/* VAEL-BUBBLE-MATERIAL-20261031 v5 — 小克：气泡纸面「卡纸」（11-01 重做，她说 v4 没有原图好看、效果不明显，让小克自己发挥）。
   对着她那张截图量的：
   纸面 = 细细的浅色纸纤维（卷曲的细丝 + 顺着纸的短绒，做法参考开源的 Paper Shaders 纸纹），没有斑、没有脏点
         （tex/card-*.webp，白 / 黑两层带透明度，叠在气泡自己的底色上；w / l / m / d 四版按气泡亮度挑，近白的纸纤维显成淡淡的影子）
         + 一层很淡的「上亮下暗」（像光照在纸上）；
   边 = 截图里那样的切口：::before 最外面一圈亮的（白；越接近白的纸越变成旧纸边的暖棕），
        ::after 里面一圈暗一点的（气泡自己的颜色调深），用 9 宫格遮罩图（tex/edge-hi-*.png、edge-lo-*.png）画，
        每段边的粗细、轻重有一点点不一样，像手裁的；外面再有一根很细的暗线和一点点影子，纸像是放在背景上。
   字、选字、复制、配色、透明度、边框开关、圆角 / 方角都照旧。JS 往 <html> 上写 data-bm-<角色>（card / plain）和 --bm-<角色>-* 变量。 */

:root{
  /* 纸放在背景上：外面一根很细的暗线 + 底下一点点影子（w / l = 浅色气泡，m = 中间，d = 深色气泡） */
  --bm-edge-card-w:0 0 0 .5px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.10);
  --bm-edge-card-l:0 0 0 .5px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.10);
  --bm-edge-card-m:0 0 0 .5px rgba(0,0,0,.30),0 1px 2px rgba(0,0,0,.20);
  --bm-edge-card-d:0 0 0 .5px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.30);
  --bm-ol-slice:60;--bm-ol-w:20px;          /* 切口边的 9 宫格：圆角气泡 */
}
:root[data-bubble-shape="square"]{--bm-ol-slice:24;--bm-ol-w:8px}

/* ---------- 聊天里的气泡 + 配色页预览 + 质感页预览，按角色 ---------- */
html:root[data-bm-assistant] .messages .row.assistant .bubble:not(.action):not(.code-bubble),
html:root[data-bm-assistant] #palette-preview .palette-demo.assistant,
html:root[data-bm-assistant] .bm-demo.assistant{
  background-image:var(--bm-assistant-img,none)!important;background-size:var(--bm-assistant-size,auto)!important;
  background-position:var(--bm-assistant-pos,0 0)!important;background-repeat:var(--bm-assistant-rep,repeat)!important;
  box-shadow:var(--bm-assistant-edge,none);--bm-ink:var(--bm-assistant-ink,transparent);--bm-hi:var(--bm-assistant-hi,transparent);
}
html:root[data-bm-action] .messages .row.assistant .bubble.action:not(.code-bubble),
html:root[data-bm-action] #palette-preview .palette-demo.action,
html:root[data-bm-action] .bm-demo.action{
  background-image:var(--bm-action-img,none)!important;background-size:var(--bm-action-size,auto)!important;
  background-position:var(--bm-action-pos,0 0)!important;background-repeat:var(--bm-action-rep,repeat)!important;
  box-shadow:var(--bm-action-edge,none);--bm-ink:var(--bm-action-ink,transparent);--bm-hi:var(--bm-action-hi,transparent);
}
html:root[data-bm-me] .messages .row.user .bubble:not(.code-bubble),
html:root[data-bm-me] #palette-preview .palette-demo.me,
html:root[data-bm-me] .bm-demo.me{
  background-image:var(--bm-me-img,none)!important;background-size:var(--bm-me-size,auto)!important;
  background-position:var(--bm-me-pos,0 0)!important;background-repeat:var(--bm-me-rep,repeat)!important;
  box-shadow:var(--bm-me-edge,none);--bm-ink:var(--bm-me-ink,transparent);--bm-hi:var(--bm-me-hi,transparent);
}

/* 切口边：::before = 最外面亮的一圈，::after = 里面暗一点的一圈。盖在气泡外 2px 的一圈上，遮罩只留线，挡不到字。
   原来气泡小尖角也用 ::before（.bubble.first::before，已经 display:none），这里全部覆盖掉。 */
html:root[data-bm-assistant="card"] .messages .row.assistant .bubble:not(.action):not(.code-bubble)::before,
html:root[data-bm-assistant="card"] .messages .row.assistant .bubble:not(.action):not(.code-bubble)::after,
html:root[data-bm-assistant="card"] #palette-preview .palette-demo.assistant::before,
html:root[data-bm-assistant="card"] #palette-preview .palette-demo.assistant::after,
html:root[data-bm-assistant="card"] .bm-demo.assistant::before,
html:root[data-bm-assistant="card"] .bm-demo.assistant::after,
html:root[data-bm-action="card"] .messages .row.assistant .bubble.action:not(.code-bubble)::before,
html:root[data-bm-action="card"] .messages .row.assistant .bubble.action:not(.code-bubble)::after,
html:root[data-bm-action="card"] #palette-preview .palette-demo.action::before,
html:root[data-bm-action="card"] #palette-preview .palette-demo.action::after,
html:root[data-bm-action="card"] .bm-demo.action::before,
html:root[data-bm-action="card"] .bm-demo.action::after,
html:root[data-bm-me="card"] .messages .row.user .bubble:not(.code-bubble)::before,
html:root[data-bm-me="card"] .messages .row.user .bubble:not(.code-bubble)::after,
html:root[data-bm-me="card"] #palette-preview .palette-demo.me::before,
html:root[data-bm-me="card"] #palette-preview .palette-demo.me::after,
html:root[data-bm-me="card"] .bm-demo.me::before,
html:root[data-bm-me="card"] .bm-demo.me::after{
  content:"";display:block;position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;width:auto;height:auto;
  box-sizing:border-box;border:0;border-radius:0;margin:0;padding:0;pointer-events:none;
  background:var(--bm-hi);-webkit-mask-box-image-source:var(--bm-ol-hi);
  -webkit-mask-box-image-slice:var(--bm-ol-slice);-webkit-mask-box-image-width:var(--bm-ol-w);
  -webkit-mask-box-image-outset:0;-webkit-mask-box-image-repeat:stretch;
}
html:root[data-bm-assistant="card"] .messages .row.assistant .bubble:not(.action):not(.code-bubble)::after,
html:root[data-bm-assistant="card"] #palette-preview .palette-demo.assistant::after,
html:root[data-bm-assistant="card"] .bm-demo.assistant::after,
html:root[data-bm-action="card"] .messages .row.assistant .bubble.action:not(.code-bubble)::after,
html:root[data-bm-action="card"] #palette-preview .palette-demo.action::after,
html:root[data-bm-action="card"] .bm-demo.action::after,
html:root[data-bm-me="card"] .messages .row.user .bubble:not(.code-bubble)::after,
html:root[data-bm-me="card"] #palette-preview .palette-demo.me::after,
html:root[data-bm-me="card"] .bm-demo.me::after{background:var(--bm-ink);-webkit-mask-box-image-source:var(--bm-ol-ink)}
/* 动作气泡自己有 1px 边框：切口边往外多挪 1px，压在真正的边上 */
html:root[data-bm-action="card"] .messages .row.assistant .bubble.action:not(.code-bubble)::before,
html:root[data-bm-action="card"] .messages .row.assistant .bubble.action:not(.code-bubble)::after,
html:root[data-bm-action="card"] #palette-preview .palette-demo.action::before,
html:root[data-bm-action="card"] #palette-preview .palette-demo.action::after,
html:root[data-bm-action="card"] .bm-demo.action::before,
html:root[data-bm-action="card"] .bm-demo.action::after{top:-3px;right:-3px;bottom:-3px;left:-3px}
html:root[data-bm-assistant="card"] #palette-preview .palette-demo.assistant,
html:root[data-bm-action="card"] #palette-preview .palette-demo.action,
html:root[data-bm-me="card"] #palette-preview .palette-demo.me{position:relative}

/* ---------- 「气泡质感」页 ---------- */
#sec-bubble-material{--bm-card:var(--sheet,#fff);--bm-ink-ui:var(--text,#111);--bm-dim:var(--dim,#999);
  --bm-spring:cubic-bezier(.2,1.45,.38,1);padding-bottom:18px;color:var(--bm-ink-ui)}
#sec-bubble-material *{box-sizing:border-box}
:where(#sec-bubble-material) button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}

/* 预览：她自己的聊天背景 + 三个气泡，吸顶 */
#sec-bubble-material .bm-stick{position:sticky;top:0;z-index:4;margin:0 -16px;padding:6px 16px 10px;background:var(--sbd-bg,var(--sheet))}
#sec-bubble-material .bm-stick::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;
  background:linear-gradient(var(--sbd-bg,var(--sheet)),transparent)}
#sec-bubble-material .bm-stage{position:relative;overflow:hidden;border-radius:18px;min-height:178px;padding:16px 14px 14px;
  display:flex;flex-direction:column;gap:9px;isolation:isolate;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
#sec-bubble-material .bm-wall{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;
  background-image:var(--bm-wall,radial-gradient(ellipse at 8% 12%,#e7d7df,transparent 60%),radial-gradient(ellipse at 93% 88%,#aaa2c4,transparent 64%),linear-gradient(150deg,#e4e4e7,#cbd3d0))}
:root[data-theme="dark"] #sec-bubble-material .bm-wall{background-color:#29232e;
  background-image:var(--bm-wall,radial-gradient(ellipse at 8% 12%,#655465,transparent 60%),radial-gradient(ellipse at 93% 88%,#34394c,transparent 64%),linear-gradient(150deg,#242c2b,#3a2d3c))}
#sec-bubble-material .bm-demo{position:relative;border:0;margin:0;font-size:14px;line-height:1.45;padding:8px 13px;max-width:84%;text-align:left;
  border-radius:18px;cursor:pointer;transition:transform .38s var(--bm-spring)}
:root[data-bubble-shape="square"] #sec-bubble-material .bm-demo{border-radius:6px}
#sec-bubble-material .bm-demo.assistant{align-self:flex-start;background-color:var(--palette-assistant-bg,var(--ai));color:var(--palette-assistant-text,var(--ai-text))}
#sec-bubble-material .bm-demo.me{align-self:flex-end;background-color:var(--palette-me-bg,var(--me));color:var(--palette-me-text,var(--me-text))}
#sec-bubble-material .bm-demo.action{align-self:flex-start;font-size:13px;background-color:var(--palette-action-bg,rgba(255,255,255,.55));color:var(--palette-action-text,var(--ai-text));
  border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
#sec-bubble-material .bm-demo:active{transform:scale(.97)}
/* 开关一下：一道斜光扫过纸面，纸轻轻落定 */
#sec-bubble-material .bm-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
#sec-bubble-material .bm-sheen::after{content:"";position:absolute;top:-20%;bottom:-20%;width:46%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42) 48%,transparent);opacity:0}
#sec-bubble-material .bm-demo.swept .bm-sheen::after{animation:bm-sweep .72s cubic-bezier(.3,.6,.25,1) both}
#sec-bubble-material .bm-demo.swept{animation:bm-settle .5s var(--bm-spring)}
@keyframes bm-sweep{0%{left:-60%;opacity:0}18%{opacity:1}100%{left:120%;opacity:0}}
@keyframes bm-settle{0%{transform:translateY(-2px) scale(1.012)}100%{transform:none}}

#sec-bubble-material .bm-h{display:flex;align-items:baseline;gap:8px;margin:18px 4px 8px;font-size:12px;color:var(--bm-dim)}
#sec-bubble-material .bm-h b{font-size:13px;font-weight:600;color:var(--bm-ink-ui)}

/* 三个气泡，一行一个开关；开着时下面展开「纹理 淡 中 浓」 */
#sec-bubble-material .bm-list{border-radius:16px;background:var(--bm-card);overflow:hidden}
#sec-bubble-material .bm-item{position:relative}
#sec-bubble-material .bm-item + .bm-item::before{content:"";position:absolute;top:0;left:52px;right:0;height:.5px;background:var(--line,rgba(0,0,0,.1))}
#sec-bubble-material .bm-item::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--bm-ink-ui);opacity:0;transition:opacity .5s}
#sec-bubble-material .bm-item.flash::after{opacity:.06;transition:none}
#sec-bubble-material .bm-line{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;margin:0;padding:10px 14px 10px 12px;border:0;background:none;text-align:left;cursor:pointer}
#sec-bubble-material .bm-chip{flex:none;width:28px;height:20px;border-radius:10px;
  transition:transform .4s var(--bm-spring),opacity .25s;opacity:.45;transform:scale(.92)}
:root[data-bubble-shape="square"] #sec-bubble-material .bm-chip{border-radius:4px}
#sec-bubble-material .bm-chip.action{border:1px solid rgba(255,255,255,.16)}
#sec-bubble-material .bm-item.on .bm-chip{opacity:1;transform:rotate(-3deg)}
#sec-bubble-material .bm-label{flex:1;min-width:0;font-size:15px}
#sec-bubble-material .bm-switch{position:relative;flex:none;width:48px;height:29px;border-radius:15px;
  background-color:color-mix(in srgb,var(--bm-ink-ui) 15%,transparent);transition:background-color .2s ease}
#sec-bubble-material .bm-switch::after{content:"";position:absolute;top:2px;left:2px;width:25px;height:25px;border-radius:50%;
  background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .36s var(--bm-spring),background-color .2s ease}
#sec-bubble-material [aria-checked="true"] > .bm-switch{background-color:var(--bm-ink-ui)}
#sec-bubble-material [aria-checked="true"] > .bm-switch::after{transform:translateX(19px);background-color:var(--sbd-bg,var(--sheet));box-shadow:none}
#sec-bubble-material .bm-line:active .bm-switch::after{width:29px}
#sec-bubble-material [aria-checked="true"]:active > .bm-switch::after{transform:translateX(15px)}
#sec-bubble-material .bm-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s cubic-bezier(.3,.7,.25,1)}
#sec-bubble-material .bm-item.on .bm-more{grid-template-rows:1fr}
#sec-bubble-material .bm-more-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:0;overflow:hidden;
  padding:0 14px 0 52px;opacity:0;transition:opacity .25s,padding .36s cubic-bezier(.3,.7,.25,1)}
#sec-bubble-material .bm-item.on .bm-more-in{padding-bottom:12px;opacity:1}
#sec-bubble-material .bm-more-in>span{font-size:13px;color:var(--bm-dim)}
#sec-bubble-material .bm-seg{position:relative;display:grid;grid-template-columns:repeat(3,44px);padding:2px;border-radius:9px;background:var(--chip,rgba(0,0,0,.05))}
#sec-bubble-material .bm-seg button{position:relative;z-index:1;border:0;background:none;padding:5px 0;font-size:13px;border-radius:7px;cursor:pointer;color:var(--bm-dim)}
#sec-bubble-material .bm-seg button[aria-checked="true"]{color:var(--bm-ink-ui);font-weight:600}
#sec-bubble-material .bm-seg i{position:absolute;z-index:0;top:2px;bottom:2px;left:2px;width:44px;border-radius:7px;background:var(--bm-card);box-shadow:0 1px 4px rgba(0,0,0,.12);
  transform:translateX(calc(var(--bm-si,1) * 100%));transition:transform .4s var(--bm-spring)}
:root[data-theme="dark"] #sec-bubble-material .bm-seg i{background:#3a3a3d}
#sec-bubble-material .bm-foot{margin:14px 4px 0;font-size:11.5px;line-height:1.65;color:var(--bm-dim)}
#sec-bubble-material .bm-foot button{border:0;background:none;padding:0;color:var(--bm-ink-ui);text-decoration:underline;text-underline-offset:2px;font-size:inherit;cursor:pointer}

/* 跟系统走的深色模式（没写 data-theme 的时候）也一样 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #sec-bubble-material .bm-seg i{background:#3a3a3d}
  :root:not([data-theme="light"]) #sec-bubble-material .bm-wall{background-color:#29232e;
    background-image:var(--bm-wall,radial-gradient(ellipse at 8% 12%,#655465,transparent 60%),radial-gradient(ellipse at 93% 88%,#34394c,transparent 64%),linear-gradient(150deg,#242c2b,#3a2d3c))}
}

/* 配色页里那一行「纸面 · 卡纸 · 中 ›」 */
.bm-pal-row{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 12px;padding:10px 12px;border:0;border-radius:12px;
  background:var(--chip,rgba(0,0,0,.05));color:var(--text);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.bm-pal-row[hidden]{display:none}
.bm-pal-row .bm-pal-sw{width:26px;height:18px;border-radius:6px;flex:none}
.bm-pal-row b{margin-left:auto;font-weight:500;color:var(--dim)}
.bm-pal-row i{font-style:normal;color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  #sec-bubble-material .bm-demo,#sec-bubble-material .bm-chip,#sec-bubble-material .bm-switch,#sec-bubble-material .bm-switch::after,
  #sec-bubble-material .bm-more,#sec-bubble-material .bm-more-in,#sec-bubble-material .bm-seg i,#sec-bubble-material .bm-item::after{transition:none!important}
  #sec-bubble-material .bm-demo.swept,#sec-bubble-material .bm-demo.swept .bm-sheen::after{animation:none!important}
}