/* ── 聊天气泡 (信息 › 信息设置 › 聊天气泡) ──
   One look for 单聊 (#wechat-chat-detail), 群聊 (#gx-chat) and the picker's preview (#wx-bub-preview); the picker's
   tiles (.wx-bt) use the same variables. js/chat-wallpaper.js paint() sets on the host:
     data-bub    frost | jelly | thin | outline | paper      质感
     data-bub-a  high | std | low                           透明度 (high = most see-through)
     data-bub-r  lg | std | sm                              圆角
     data-bub-tc white | ta                                 角色的气泡颜色 (ta = a light wash of --tc, the character's colour;
                                                            群聊 sets --tc on each row)
     --mc        my bubble's colour (unset = #a8c3e0)
   Each 质感 defines its numbers as triples (-0 high, -1 std, -2 low); data-bub-a picks one. Dark = a dark chat
   background (.wp-dark) or dark mode on the default background (:not(.wp)), same rule as before.
   Loaded after wechat.css and group-chat-look.css: the older base bubble rules there are fallbacks only. */

/* ── light ── */
[data-bub]{
  --b-ink:#2b3a48;--b-ts:none;--bw:1px;--hl:none;--tb-base:#fff;--tc-k:18%;
  --a1-0:28%;--a1-1:42%;--a1-2:68%;--a2-0:28%;--a2-1:42%;--a2-2:68%;
  --a-bd:rgba(255,255,255,.6);--a-sh:0 6px 16px -12px rgba(20,40,70,.5);--bl:blur(14px) saturate(1.3);
  --m1-0:40%;--m1-1:55%;--m1-2:72%;--m2-0:40%;--m2-1:55%;--m2-2:72%;--mb1:rgba(255,255,255,.18);--mb2:rgba(255,255,255,.18);
  --m-bd:rgba(255,255,255,.5);--m-sh:var(--a-sh)}
[data-bub="jelly"]{
  --a1-0:50%;--a1-1:62%;--a1-2:86%;--a2-0:12%;--a2-1:20%;--a2-2:55%;--hl:block;
  --a-bd:rgba(255,255,255,.85);--bl:blur(5px) saturate(1.5);
  --a-sh:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -8px 14px -8px rgba(255,255,255,.6),0 6px 14px -10px rgba(20,40,70,.5);
  --m1-0:50%;--m1-1:60%;--m1-2:66%;--m2-0:34%;--m2-1:45%;--m2-2:88%;--mb1:rgba(255,255,255,.55);--mb2:transparent;
  --m-bd:rgba(255,255,255,.78);--m-sh:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -8px 14px -8px rgba(225,238,255,.6),0 6px 14px -10px rgba(20,40,70,.55)}
[data-bub="thin"]{
  --a1-0:18%;--a1-1:30%;--a1-2:50%;--a2-0:18%;--a2-1:30%;--a2-2:50%;
  --a-bd:rgba(255,255,255,.9);--a-sh:none;--bl:blur(3px);
  --m1-0:24%;--m1-1:34%;--m1-2:50%;--m2-0:24%;--m2-1:34%;--m2-2:50%;--mb1:transparent;--mb2:transparent;
  --m-bd:rgba(255,255,255,.75);--m-sh:none}
[data-bub="outline"]{
  --bw:1.2px;--a1-0:12%;--a1-1:30%;--a1-2:55%;--a2-0:12%;--a2-1:30%;--a2-2:55%;
  --a-bd:rgba(70,90,115,.34);--a-sh:none;--bl:blur(4px);
  --m1-0:12%;--m1-1:22%;--m1-2:36%;--m2-0:12%;--m2-1:22%;--m2-2:36%;--mb1:transparent;--mb2:transparent;
  --m-bd:color-mix(in srgb,var(--mc,#a8c3e0) 65%,#3f5470);--m-sh:none}
[data-bub="paper"]{
  --a1-0:80%;--a1-1:92%;--a1-2:100%;--a2-0:80%;--a2-1:92%;--a2-2:100%;
  --a-bd:rgba(40,60,90,.08);--a-sh:0 1px 2px rgba(40,60,90,.08);--bl:none;
  --m1-0:26%;--m1-1:36%;--m1-2:50%;--m2-0:26%;--m2-1:36%;--m2-2:50%;--mb1:#fff;--mb2:#fff;
  --m-bd:rgba(40,60,90,.08);--m-sh:var(--a-sh)}

/* ── dark: a dark chat background, or dark mode on the default one ── */
[data-bub].wp-dark,:root[data-theme="dark"] [data-bub]:not(.wp){
  --b-ink:#f2f5f8;--b-ts:0 1px 2px rgba(0,0,0,.28);--tc-k:40%;
  --a1-0:10%;--a1-1:16%;--a1-2:22%;--a2-0:10%;--a2-1:16%;--a2-2:22%;
  --a-bd:rgba(255,255,255,.2);--a-sh:none;
  --m1-0:26%;--m1-1:36%;--m1-2:50%;--m2-0:26%;--m2-1:36%;--m2-2:50%;--mb1:rgba(255,255,255,.06);--mb2:rgba(255,255,255,.06);
  --m-bd:rgba(255,255,255,.24);--m-sh:none}
[data-bub="jelly"].wp-dark,:root[data-theme="dark"] [data-bub="jelly"]:not(.wp){
  --hl:none;--a1-0:12%;--a1-1:18%;--a1-2:26%;--a2-0:3%;--a2-1:6%;--a2-2:12%;--a-sh:inset 0 1px 0 rgba(255,255,255,.2);
  --m1-0:38%;--m1-1:48%;--m1-2:58%;--m2-0:24%;--m2-1:34%;--m2-2:46%;--mb1:rgba(255,255,255,.14);--mb2:transparent;
  --m-bd:rgba(255,255,255,.22);--m-sh:inset 0 1px 0 rgba(255,255,255,.22)}
[data-bub="thin"].wp-dark,:root[data-theme="dark"] [data-bub="thin"]:not(.wp){
  --a1-0:4%;--a1-1:8%;--a1-2:14%;--a2-0:4%;--a2-1:8%;--a2-2:14%;--a-bd:rgba(255,255,255,.5);
  --m1-0:18%;--m1-1:24%;--m1-2:38%;--m2-0:18%;--m2-1:24%;--m2-2:38%;--mb1:transparent;--mb2:transparent;--m-bd:rgba(255,255,255,.5)}
[data-bub="outline"].wp-dark,:root[data-theme="dark"] [data-bub="outline"]:not(.wp){
  --a1-0:0%;--a1-1:4%;--a1-2:10%;--a2-0:0%;--a2-1:4%;--a2-2:10%;--a-bd:rgba(255,255,255,.34);
  --m1-0:12%;--m1-1:20%;--m1-2:32%;--m2-0:12%;--m2-1:20%;--m2-2:32%;--mb1:transparent;--mb2:transparent;
  --m-bd:color-mix(in srgb,var(--mc,#a8c3e0) 65%,#fff)}
[data-bub="paper"].wp-dark,:root[data-theme="dark"] [data-bub="paper"]:not(.wp){
  --b-ink:#e6ebf1;--b-ts:none;--tb-base:#2b3038;--tc-k:22%;
  --a1-0:80%;--a1-1:92%;--a1-2:100%;--a2-0:80%;--a2-1:92%;--a2-2:100%;--a-bd:rgba(255,255,255,.07);
  --m1-0:34%;--m1-1:44%;--m1-2:56%;--m2-0:34%;--m2-1:44%;--m2-2:56%;--mb1:#2b3038;--mb2:#2b3038;--m-bd:rgba(255,255,255,.08)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-bub]:not(.wp){
    --b-ink:#f2f5f8;--b-ts:0 1px 2px rgba(0,0,0,.28);--tc-k:40%;
    --a1-0:10%;--a1-1:16%;--a1-2:22%;--a2-0:10%;--a2-1:16%;--a2-2:22%;
    --a-bd:rgba(255,255,255,.2);--a-sh:none;
    --m1-0:26%;--m1-1:36%;--m1-2:50%;--m2-0:26%;--m2-1:36%;--m2-2:50%;--mb1:rgba(255,255,255,.06);--mb2:rgba(255,255,255,.06);
    --m-bd:rgba(255,255,255,.24);--m-sh:none}
  :root:not([data-theme="light"]) [data-bub="jelly"]:not(.wp){
    --hl:none;--a1-0:12%;--a1-1:18%;--a1-2:26%;--a2-0:3%;--a2-1:6%;--a2-2:12%;--a-sh:inset 0 1px 0 rgba(255,255,255,.2);
    --m1-0:38%;--m1-1:48%;--m1-2:58%;--m2-0:24%;--m2-1:34%;--m2-2:46%;--mb1:rgba(255,255,255,.14);--mb2:transparent;
    --m-bd:rgba(255,255,255,.22);--m-sh:inset 0 1px 0 rgba(255,255,255,.22)}
  :root:not([data-theme="light"]) [data-bub="thin"]:not(.wp){
    --a1-0:4%;--a1-1:8%;--a1-2:14%;--a2-0:4%;--a2-1:8%;--a2-2:14%;--a-bd:rgba(255,255,255,.5);
    --m1-0:18%;--m1-1:24%;--m1-2:38%;--m2-0:18%;--m2-1:24%;--m2-2:38%;--mb1:transparent;--mb2:transparent;--m-bd:rgba(255,255,255,.5)}
  :root:not([data-theme="light"]) [data-bub="outline"]:not(.wp){
    --a1-0:0%;--a1-1:4%;--a1-2:10%;--a2-0:0%;--a2-1:4%;--a2-2:10%;--a-bd:rgba(255,255,255,.34);
    --m1-0:12%;--m1-1:20%;--m1-2:32%;--m2-0:12%;--m2-1:20%;--m2-2:32%;--mb1:transparent;--mb2:transparent;
    --m-bd:color-mix(in srgb,var(--mc,#a8c3e0) 65%,#fff)}
  :root:not([data-theme="light"]) [data-bub="paper"]:not(.wp){
    --b-ink:#e6ebf1;--b-ts:none;--tb-base:#2b3038;--tc-k:22%;
    --a1-0:80%;--a1-1:92%;--a1-2:100%;--a2-0:80%;--a2-1:92%;--a2-2:100%;--a-bd:rgba(255,255,255,.07);
    --m1-0:34%;--m1-1:44%;--m1-2:56%;--m2-0:34%;--m2-1:44%;--m2-2:56%;--mb1:#2b3038;--mb2:#2b3038;--m-bd:rgba(255,255,255,.08)}
}

/* ── 透明度 / 圆角 / 角色的气泡颜色 ── */
[data-bub]{--a1:var(--a1-1);--a2:var(--a2-1);--m1:var(--m1-1);--m2:var(--m2-1);--tb:var(--tb-base);--b-r:20px}
[data-bub][data-bub-a="high"]{--a1:var(--a1-0);--a2:var(--a2-0);--m1:var(--m1-0);--m2:var(--m2-0)}
[data-bub][data-bub-a="low"]{--a1:var(--a1-2);--a2:var(--a2-2);--m1:var(--m1-2);--m2:var(--m2-2)}
[data-bub][data-bub-r="lg"]{--b-r:24px}
[data-bub][data-bub-r="sm"]{--b-r:11px}
[data-bub][data-bub-tc="ta"],[data-bub][data-bub-tc="ta"] .msg-row{--tb:color-mix(in srgb,var(--tc,#a8c3e0) var(--tc-k),var(--tb-base))}

/* ── the bubbles ── */
#v-chat :is(#wechat-chat-detail,#gx-chat,#wx-bub-preview)[data-bub] :is(.msg-row.a,.msg-row.u) .msg-bub,#v-chat :is(#wechat-chat-detail,#gx-chat,#wx-bub-preview)[data-bub] .typing{padding:9px 14px;border-radius:var(--b-r);border:var(--bw) solid var(--a-bd);color:var(--b-ink);text-shadow:var(--b-ts);position:relative;overflow:hidden}
#v-chat :is(#wechat-chat-detail,#gx-chat,#wx-bub-preview)[data-bub] .msg-row.a .msg-bub,#v-chat :is(#wechat-chat-detail,#gx-chat,#wx-bub-preview)[data-bub] .typing{background:linear-gradient(180deg,color-mix(in srgb,var(--tb) var(--a1),transparent),color-mix(in srgb,var(--tb) var(--a2),transparent));box-shadow:var(--a-sh);-webkit-backdrop-filter:var(--bl);backdrop-filter:var(--bl)}
#v-chat :is(#wechat-chat-detail,#gx-chat,#wx-bub-preview)[data-bub] .msg-row.u .msg-bub{background:linear-gradient(180deg,color-mix(in srgb,var(--mc,#a8c3e0) var(--m1),var(--mb1)),color-mix(in srgb,var(--mc,#a8c3e0) var(--m2),var(--mb2)));border-color:var(--m-bd);box-shadow:var(--m-sh);-webkit-backdrop-filter:var(--bl);backdrop-filter:var(--bl)}
#v-chat :is(#wechat-chat-detail,#gx-chat,#wx-bub-preview)[data-bub] .msg-row.a:not(:has(+ .msg-row.a)) .msg-bub{border-bottom-left-radius:6px}
#v-chat :is(#wechat-chat-detail,#gx-chat,#wx-bub-preview)[data-bub] .msg-row.u:not(:has(+ .msg-row.u)) .msg-bub{border-bottom-right-radius:6px}
/* 果冻's highlight */
#v-chat :is(#wechat-chat-detail,#gx-chat,#wx-bub-preview)[data-bub] :is(.msg-row.a,.msg-row.u) .msg-bub::before,#v-chat :is(#wechat-chat-detail,#gx-chat,#wx-bub-preview)[data-bub] .typing::before{content:'';display:var(--hl);position:absolute;left:9px;width:42%;top:2px;height:36%;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0));pointer-events:none}
#v-chat :is(#wechat-chat-detail,#gx-chat)[data-bub] .msgs{background:transparent}

/* ── the picker: tiles and the live preview ── */
.wx-bt[data-bub] i.t{background:linear-gradient(180deg,color-mix(in srgb,var(--tb) var(--a1),transparent),color-mix(in srgb,var(--tb) var(--a2),transparent));border:var(--bw) solid var(--a-bd);box-shadow:var(--a-sh)}
.wx-bt[data-bub] i.m{background:linear-gradient(180deg,color-mix(in srgb,var(--mc,#a8c3e0) var(--m1),var(--mb1)),color-mix(in srgb,var(--mc,#a8c3e0) var(--m2),var(--mb2)));border:var(--bw) solid var(--m-bd);box-shadow:var(--m-sh)}
#v-chat #wx-bub-preview[data-bub] .msg-bub{transition:border-radius var(--mo-slow) var(--mo-ease-spring),font-size var(--mo-base) var(--mo-ease-out),color var(--mo-base) var(--mo-ease-out)}
@keyframes wxBubPop{from{transform:scale(.94)}to{transform:none}}
#v-chat #wx-bub-preview .msg-bub.wx-pop{animation:wxBubPop var(--mo-release) var(--mo-ease-bounce) backwards}
@keyframes wxPick{from{transform:scale(.9)}to{transform:none}}
.wx-btile.wx-picked .wx-bt,.wx-chips>.wx-picked em{animation:wxPick var(--mo-release) var(--mo-ease-bounce)}
.wx-btile .wx-bt,.wx-seg button,.wx-chips>*{transition:transform var(--mo-release) var(--mo-ease-bounce)}
.wx-btile:active .wx-bt,.wx-seg button:active,.wx-chips>*:active{transform:scale(var(--mo-press-scale-sm));transition-duration:70ms}
/* segmented controls: one thumb slides under the labels */
.wx-seg{position:relative;display:flex;gap:4px;padding:3px;border-radius:15px;background:var(--wx-glass);border:1px solid var(--wx-glass-line)}
.wx-seg button{position:relative;z-index:1;flex:1;border:none;background:none;padding:8px 0;border-radius:12px;font-family:inherit;font-size:13px;color:var(--ink2);cursor:pointer}
.wx-seg button[aria-checked="true"]{color:var(--ink);font-weight:700}
.wx-seg-thumb{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:12px;background:#fff;box-shadow:0 4px 10px -6px rgba(50,80,120,.55);transition:transform var(--mo-slow) var(--mo-ease-spring),width var(--mo-slow) var(--mo-ease-spring)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .wx-seg-thumb{background:rgba(255,255,255,.16);box-shadow:none}}
:root[data-theme="dark"] .wx-seg-thumb{background:rgba(255,255,255,.16);box-shadow:none}
@media(prefers-reduced-motion:reduce){#v-chat #wx-bub-preview .msg-bub.wx-pop,.wx-btile.wx-picked .wx-bt,.wx-chips>.wx-picked em{animation:none}.wx-seg-thumb,#v-chat #wx-bub-preview[data-bub] .msg-bub{transition:none}}
/* the preview card: 单聊 / 群聊 switch on top, lines leave with a quick fade when it switches */
.wx-bub-scope{display:flex;justify-content:center;padding:12px 12px 0}
.wx-bub-scope .wx-seg{width:148px;background:rgba(255,255,255,.4)}
.wx-bub-scope .wx-seg button{padding:6px 0;font-size:12.5px}
.wx-bub-preview.wp-dark .wx-bub-scope .wx-seg{background:rgba(255,255,255,.1)}
.wx-bub-preview.wp-dark .wx-bub-scope .wx-seg button{color:rgba(255,255,255,.7)}
.wx-bub-preview.wp-dark .wx-bub-scope .wx-seg button[aria-checked="true"]{color:#fff}
#wx-bub-msgs{transition:opacity var(--mo-fast) ease-in,transform var(--mo-fast) ease-in}
#wx-bub-msgs.wx-out{opacity:0;transform:translateY(3px)}
.wx-bub-preview[data-scope="group"] .msg-row.a+.msg-row.a:not(.wx-cont) .msg-av{visibility:visible}
.wx-bub-preview[data-scope="group"] .msg-row.a.wx-cont .msg-av{visibility:hidden}
.wx-bub-preview .gx-col{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start}
.wx-bub-preview .gx-who{font-size:11px;margin-left:4px;color:var(--ink2)}
.wx-bub-preview.wp-dark .gx-who{color:rgba(255,255,255,.72)}
.wx-seg+.wx-sec-t,.wx-btiles+.wx-sec-t{margin-top:18px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .wx-bub-preview:not(.wp) .wx-bub-scope .wx-seg{background:rgba(255,255,255,.08)}
  :root:not([data-theme="light"]) .wx-bub-preview:not(.wp) .wx-bub-scope .wx-seg button{color:rgba(255,255,255,.62)}
  :root:not([data-theme="light"]) .wx-bub-preview:not(.wp) .wx-bub-scope .wx-seg button[aria-checked="true"]{color:#fff}}
:root[data-theme="dark"] .wx-bub-preview:not(.wp) .wx-bub-scope .wx-seg{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .wx-bub-preview:not(.wp) .wx-bub-scope .wx-seg button{color:rgba(255,255,255,.62)}
:root[data-theme="dark"] .wx-bub-preview:not(.wp) .wx-bub-scope .wx-seg button[aria-checked="true"]{color:#fff}