/* ── 群聊 (js/apps/group-chat.js) ──
   The chat page itself (#gx-chat) borrows the private chat's whole look from styles/wechat.css
   (:is(#wechat-chat-detail,#gx-chat) …). This file only adds what a group needs: the member avatars in the header,
   names over bubbles, 拍一拍, the 群聊信息 page, the dialogs and the invite card. Colours come from the theme
   tokens (--ink / --pri / --wx-glass …) so light, dark and every theme follow. Loaded after wechat.css. */
#v-chat{--gx-glass:var(--wx-glass,rgba(255,255,255,.62));--gx-line:var(--wx-glass-line,rgba(255,255,255,.85));--gx-shadow:var(--wx-card-shadow,0 14px 28px -22px rgba(60,90,130,.55));
  --gx-sep:color-mix(in srgb,var(--ink2) 16%,transparent);--gx-warn:color-mix(in srgb,var(--rose) 70%,var(--ink) 30%);
  --gx-modal:rgba(255,255,255,.9);--gx-modal-fancy:rgba(255,255,255,.64);--gx-soft:rgba(255,255,255,.5);--gx-soft-focus:rgba(255,255,255,.85);--gx-tile:rgba(255,255,255,.75)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) #v-chat{--gx-modal:rgba(38,44,51,.94);--gx-modal-fancy:rgba(38,44,51,.72);--gx-soft:rgba(255,255,255,.06);--gx-soft-focus:rgba(255,255,255,.1);--gx-tile:rgba(255,255,255,.12)}}
:root[data-theme="dark"] #v-chat{--gx-modal:rgba(38,44,51,.94);--gx-modal-fancy:rgba(38,44,51,.72);--gx-soft:rgba(255,255,255,.06);--gx-soft-focus:rgba(255,255,255,.1);--gx-tile:rgba(255,255,255,.12)}
#gx-chat{position:relative;z-index:1}
#gx-chat.active{z-index:2}

/* ── group avatar: a 2×2 mosaic (the user + up to 3 members) ── */
.gx-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:100%;height:100%;padding:2px;border-radius:30%;background:var(--gx-tile);overflow:hidden}
.gx-mosaic i{display:grid;place-items:center;overflow:hidden;border-radius:28%;font-style:normal;font-size:10px;color:var(--ink);background:var(--pri-pale)}
.gx-mosaic i>*{width:100%;height:100%;border-radius:inherit;display:grid;place-items:center}
.gx-mosaic i img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.gx-mosaic.n3 i:first-child{grid-column:span 2;width:50%;justify-self:center}
.gx-mosaic.n2{align-content:center}.gx-mosaic.n2 i{aspect-ratio:1}
.wechat-avatar.gx-row-av{padding:0;background:none;box-shadow:none;border-radius:30%;overflow:visible}
.gx-mute-ic{display:inline-grid;width:14px;height:14px;color:var(--ink2);margin-left:4px;flex-shrink:0}
.gx-mute-ic svg{width:13px;height:13px}
#wechat-tab-chats .wechat-unread.gx-quiet{background:var(--pri-pale);color:var(--ink2)}

/* ── + menu ── */
.gx-pop{position:absolute;z-index:40;min-width:164px;padding:6px;border-radius:20px;background:var(--gx-modal);border:1px solid var(--gx-line);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 20px 40px -18px rgba(40,55,80,.5);transform-origin:top right}
.gx-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:0;background:none;border-radius:14px;font:inherit;font-size:15px;color:var(--ink);text-align:left;cursor:pointer}
.gx-pop button+button{border-top:1px solid var(--gx-sep);border-radius:0 0 14px 14px}
.gx-pop svg{width:18px;height:18px;color:var(--pri-deep)}

/* ── chat page header: up to 3 member avatars above the name capsule; each one can be 拍一拍'd ── */
#gx-chat .gx-contact{display:flex;flex-direction:column;align-items:center}
#gx-chat .gx-top-avs{display:flex;justify-content:center;pointer-events:auto}
#gx-chat .gx-hav{position:relative;width:48px;height:48px;margin:0 -8px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--pri-pale);overflow:visible;cursor:pointer;box-shadow:0 8px 18px -10px rgba(40,55,80,.5)}
#gx-chat .gx-hav>*:not(.gx-ripple){width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center}
#gx-chat .gx-hav img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#gx-chat .gx-contact .app-title{font:inherit;cursor:pointer}
#gx-chat .gx-sub.typing{color:var(--pri-deep)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) #gx-chat .gx-hav{border-color:rgba(255,255,255,.18)}}
:root[data-theme="dark"] #gx-chat .gx-hav{border-color:rgba(255,255,255,.18)}

/* ── messages: a name over the first bubble of each person's run; avatars follow the speaker, not the side ── */
#gx-chat .gx-col{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
#gx-chat .gx-who{font-size:11.5px;padding-left:4px;line-height:1.2}
#gx-chat .msg-row.a+.msg-row.a .msg-av{visibility:visible}
#gx-chat .msg-row.a.gx-cont .msg-av{visibility:hidden}
#gx-chat .msg-row.a:not(.gx-cont) .msg-av{margin-top:17px}
#gx-chat .msg-row.a .msg-av{position:relative;overflow:visible;cursor:pointer;font:inherit}
#gx-chat .msg-row.a .msg-av>*:not(.gx-ripple){width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center}
#gx-chat .gx-ghost-av{visibility:hidden!important}
#gx-chat .msg-t .gx-at{color:var(--pri-deep);font-weight:600}
#gx-chat .gx-retry{align-self:center;margin:0 6px;border:0;background:none;font:inherit;font-size:12px;color:var(--gx-warn);cursor:pointer}
#gx-chat .msg-row.gx-hit .msg-bub{box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 40%,transparent)}
.gx-ripple{position:absolute;inset:0;border-radius:50%;border:2px solid;pointer-events:none}
.gx-at-btn{font:500 20px/1 -apple-system,system-ui,sans-serif;color:var(--ink)}

/* ── full pages (发起群聊 / 群聊信息) ── */
.gx-page.active{flex-direction:column}
.gx-bar{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 8px}
.gx-bar h2{flex:1;margin:0;text-align:center;font-size:19px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.gx-rb{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gx-line);background:var(--gx-glass);color:var(--ink);box-shadow:var(--gx-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);cursor:pointer;flex-shrink:0}
.gx-rb svg{width:19px;height:19px}
.gx-rb.ghost{visibility:hidden}
.gx-scroll{padding:6px 0 calc(28px + var(--sab))}
.gx-sec,.gx-card{margin:0 16px 14px;border-radius:22px;background:var(--gx-glass);border:1px solid var(--gx-line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--gx-shadow);overflow:hidden}
.gx-sec h3{margin:0;padding:14px 18px 4px;font-size:12.5px;font-weight:500;color:var(--ink2);letter-spacing:.06em;transition:color .25s}
.gx-sec.focus h3{color:var(--pri-deep)}
.gx-in{display:block;width:calc(100% - 28px);margin:6px 14px 14px;border:1px solid color-mix(in srgb,var(--mist) 70%,transparent);border-radius:16px;background:var(--gx-soft-focus);padding:11px 14px;font:inherit;font-size:15px;color:var(--ink);outline:none;transition:box-shadow .3s}
.gx-in:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 18%,transparent)}
.gx-picked{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:58px;padding:4px 18px 14px}
.gx-picked .msg-av,.gx-li .msg-av{width:40px;height:40px;border-radius:50%;padding:0;margin:0;box-shadow:none;overflow:hidden;border:1.5px solid #fff}
.gx-empty-inline,.gx-empty{font-size:13px;color:var(--ink2)}
.gx-empty{padding:12px 18px}
.gx-li{display:flex;align-items:center;gap:12px;width:100%;padding:12px 18px;border:0;border-top:1px solid var(--gx-sep);background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.gx-li:first-child{border-top:0}
.gx-li .gx-tx{flex:1;min-width:0}
.gx-li .gx-tx b{display:block;font-weight:500;font-size:15.5px}
.gx-chk{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--mist);display:grid;place-items:center;flex-shrink:0;background:var(--gx-soft)}
.gx-chk svg{width:14px;height:14px;color:#fff;opacity:0}
.gx-li.on .gx-chk{background:var(--pri-deep);border-color:var(--pri-deep)}
.gx-li.on .gx-chk svg{opacity:1}
.gx-cta{display:block;width:calc(100% - 32px);margin:6px 16px 24px;height:52px;border:0;border-radius:26px;background:var(--pri-deep);color:var(--on-pri-deep);font:inherit;font-size:16px;font-weight:600;box-shadow:0 12px 24px -12px rgba(60,85,125,.7);cursor:pointer;transition:background .25s,color .25s}
.gx-cta[disabled]{background:var(--gx-glass);color:var(--ink2);box-shadow:none;cursor:default}

.gx-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0 18px}
.gx-head .gx-mosaic.big{width:84px;height:84px;padding:4px;gap:3px;border-radius:26px;border:1px solid var(--gx-line);box-shadow:0 12px 24px -14px rgba(40,55,80,.55);margin-bottom:6px}
.gx-head .gx-mosaic.big i{border-radius:12px;font-size:15px}
.gx-head b{font-size:21px;font-weight:500;color:var(--ink)}
.gx-head small{font-size:12.5px;color:var(--ink2)}
.gx-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 4px;padding:16px 10px 14px}
.gx-mem{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;padding:0}
.gx-mem .gx-wrap{position:relative}
.gx-mem .msg-av{width:48px;height:48px;border-radius:50%;padding:0;margin:0;box-shadow:none;overflow:hidden;border:2px solid #fff;font-size:17px}
.gx-mem>span:last-child{font-size:12px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-mem.muted .msg-av{filter:grayscale(.7) brightness(1.12)}
.gx-ms{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:var(--surface);display:grid;place-items:center;color:var(--ink2);box-shadow:0 2px 4px rgba(40,55,80,.2)}
.gx-ms svg{width:11px;height:11px}
.gx-add{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1.5px dashed var(--mist);color:var(--ink2);font-size:22px}
.gx-faint{color:var(--ink2)!important;opacity:.75}
.gx-row-i{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:12px 16px;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.gx-row-i+.gx-row-i,.gx-fold .gx-row-i{border-top:1px solid var(--gx-sep)}
div.gx-row-i{cursor:default}
.gx-k{font-size:15px;flex-shrink:0}
.gx-v{flex:1;min-width:0;text-align:right;font-size:14px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-row-i.stack2{flex-direction:column;align-items:stretch;gap:4px}
.gx-row-i.stack2 .gx-top{display:flex;align-items:center;gap:12px}
.gx-row-i.stack2 .gx-k{flex:1}
.gx-row-i.stack2 .gx-v{text-align:left;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5}
.gx-row-i.gx-col-row{flex-direction:column;align-items:stretch;gap:10px}
.gx-chev{width:15px;height:15px;color:var(--mist);flex-shrink:0}
.gx-sub2{display:block;font-size:12px;color:var(--ink2);margin-top:3px}
.gx-fold{overflow:hidden}
.gx-swatch{display:inline-block;width:22px;height:22px;border-radius:7px;border:1.5px solid #fff;box-shadow:0 2px 6px -2px rgba(40,55,80,.35);vertical-align:middle;background-size:cover}
.gx-warn{color:var(--gx-warn)}
.gx-leave{display:block;width:calc(100% - 32px);margin:2px 16px 30px;min-height:52px;border-radius:22px;border:1px solid var(--gx-line);background:var(--gx-glass);color:var(--gx-warn);font:inherit;font-size:15px;cursor:pointer;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

/* segmented + switch */
.gx-seg{position:relative;display:flex;padding:4px;border-radius:17px;background:color-mix(in srgb,var(--pri-pale) 85%,transparent)}
.gx-seg button{position:relative;z-index:1;flex:1;height:34px;border:0;border-radius:13px;background:none;font:inherit;font-size:14px;color:var(--ink2);cursor:pointer;transition:color .25s}
.gx-seg button.sel{color:var(--ink);font-weight:600}
.gx-seg .ind{position:absolute;top:4px;bottom:4px;left:4px;border-radius:13px;background:var(--surface);box-shadow:0 4px 10px -4px rgba(40,55,80,.3)}
.gx-sw{position:relative;width:52px;height:32px;padding:0;border:0;border-radius:16px;background:color-mix(in srgb,var(--mist) 60%,transparent);cursor:pointer;flex-shrink:0;transition:background .3s}
.gx-sw .knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:13px;background:#fff;box-shadow:0 2px 6px rgba(40,55,80,.25)}
.gx-sw.on{background:var(--pri-deep)}

/* ── dialogs (centred; the page behind blurs in place) ── */
.gx-ov{position:absolute;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--ink) 16%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gx-md{width:100%;max-width:312px;max-height:86%;overflow-y:auto;border-radius:26px;background:var(--gx-modal);border:1px solid var(--gx-line);box-shadow:0 30px 60px -24px rgba(40,55,80,.55);padding:20px 18px 18px;color:var(--ink)}
.gx-md h4{margin:0 0 4px;font-size:18px;font-weight:500;text-align:center}
.gx-md p{margin:0 0 14px;font-size:13px;color:var(--ink2);text-align:center;line-height:1.6}
.gx-mlist{display:flex;flex-direction:column;margin:6px -6px 2px}
.gx-mlist button{display:flex;align-items:center;gap:12px;padding:9px 10px;border:0;border-radius:14px;background:none;font:inherit;font-size:15px;color:var(--ink);text-align:left;cursor:pointer}
.gx-md .msg-av{width:36px;height:36px;border-radius:50%;padding:0;margin:0;box-shadow:none;overflow:hidden;border:1.5px solid #fff;flex-shrink:0}
.gx-btns{display:flex;gap:10px;margin-top:16px}
.gx-btns button{flex:1;height:44px;border:0;border-radius:22px;background:var(--pri-pale);font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
.gx-btns .pri{background:var(--pri-deep);color:var(--on-pri-deep);font-weight:600}
.gx-btns .warn{background:var(--gx-warn);color:#fff;font-weight:600}
.gx-lbl{font-size:12.5px;color:var(--ink2);margin:16px 2px 8px}
.gx-swrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:15px}
.gx-swrow small{display:block;color:var(--ink2);font-size:12px;margin-top:2px}
.gx-note{margin-top:16px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--pri-pale) 60%,transparent);font-size:12.5px;color:var(--ink2);line-height:1.6}
.gx-note b{color:var(--ink);font-weight:500}
.gx-mhead{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:2px}
.gx-mhead .msg-av{width:60px;height:60px;font-size:21px}
.gx-lnk{display:block;margin:14px auto 0;border:0;background:none;font:inherit;font-size:13.5px;color:var(--pri-deep);cursor:pointer}
.gx-lnk.warn{color:var(--gx-warn)}
.gx-hint{margin:12px 0 0!important;font-size:12px!important}
.gx-opt{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);text-align:left;cursor:pointer}
.gx-opt+.gx-opt{border-top:1px solid var(--gx-sep)}
.gx-opt .tx{flex:1}
.gx-opt small{display:block;font-size:12px;color:var(--ink2);margin-top:2px}
.gx-opt .rad{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--mist);display:grid;place-items:center;flex-shrink:0}
.gx-opt.on .rad{border-color:var(--pri-deep)}
.gx-opt.on .rad::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--pri-deep)}

/* the glass dialogs: 群名 / 昵称 / 群背景 / 群聊记忆 / 聊天背景 / 查找 */
.gx-md.fancy{background:var(--gx-modal-fancy);-webkit-backdrop-filter:blur(28px) saturate(1.6);backdrop-filter:blur(28px) saturate(1.6);box-shadow:inset 0 1px 0 var(--gx-line),0 30px 60px -24px rgba(40,55,80,.55);padding:22px 18px 16px}
.gx-mi{width:46px;height:46px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;background:linear-gradient(160deg,var(--surface),var(--pri-pale));color:var(--pri-deep);box-shadow:0 6px 14px -8px rgba(60,85,125,.55),inset 0 1px 0 var(--gx-line)}
.gx-mi svg{width:21px;height:21px}
.gx-md.fancy .gx-btns button:not(.pri):not(.warn){background:transparent;color:var(--ink2)}
.gx-md.fancy .gx-btns .pri{box-shadow:0 10px 20px -12px rgba(60,85,125,.8)}
.gx-soft{display:block;width:100%;border:1px solid var(--gx-line);border-radius:18px;background:var(--gx-soft);padding:13px 15px;font:inherit;font-size:15px;line-height:1.6;color:var(--ink);outline:none;resize:none;box-shadow:inset 0 1px 3px rgba(40,55,80,.07);transition:box-shadow .3s,background .3s}
.gx-soft::placeholder{color:var(--mist)}
.gx-soft:focus{background:var(--gx-soft-focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 16%,transparent),0 8px 22px -12px rgba(60,85,125,.5)}
.gx-soft.center{text-align:center;font-size:17px}
.gx-softwrap{position:relative}
.gx-softwrap .gx-soft{padding-bottom:28px}
.gx-cnt{position:absolute;right:14px;bottom:10px;font-size:11px;color:var(--mist)}
.gx-hint1{margin-top:8px;font-size:12px;color:var(--ink2);text-align:center}
.gx-prev{margin-top:14px;padding:12px;border-radius:18px;background:color-mix(in srgb,var(--pri-pale) 45%,transparent)}
.gx-prev .cap{display:block;font-size:11px;color:var(--ink2);letter-spacing:.06em;margin-bottom:8px}
.gx-np{display:flex;gap:8px;align-items:flex-start}
.gx-np .msg-av{width:30px;height:30px}
.gx-np .nm{display:block;font-size:11px;margin:0 0 3px 4px}
.gx-np .nb{display:inline-block;padding:7px 12px;border-radius:16px 16px 16px 6px;background:var(--gx-soft-focus);font-size:13.5px;box-shadow:0 6px 14px -10px rgba(40,55,80,.4)}
.gx-np .nat{display:inline-block;color:var(--pri-deep);font-weight:600}
.gx-npill{display:flex;flex-direction:column;align-items:center}
.gx-npav{display:flex}
.gx-npav .msg-av{width:26px;height:26px;margin:0 -5px}
.gx-npill .pp{display:block;margin-top:-5px;padding:5px 16px 6px;border-radius:14px;background:var(--gx-soft-focus);text-align:center;max-width:230px;min-width:96px;box-shadow:0 6px 14px -10px rgba(40,55,80,.45)}
.gx-npill b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-npill small{display:block;font-size:10.5px;color:var(--ink2)}
.gx-gsum{position:relative;padding:14px 14px 13px 16px;border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--pri) 20%,transparent),color-mix(in srgb,var(--pri) 7%,transparent));font-size:14px;line-height:1.65}
.gx-gsum .q{position:absolute;right:12px;top:-4px;font-size:44px;line-height:1;color:color-mix(in srgb,var(--pri-deep) 25%,transparent)}
.gx-gsum em{display:block;font-style:normal;font-size:11px;letter-spacing:.06em;color:var(--pri-deep);margin-bottom:4px}
.gx-mrows{display:flex;flex-direction:column;margin-top:6px;max-height:240px;overflow-y:auto}
.gx-mrow{display:flex;gap:10px;align-items:flex-start;padding:11px 2px}
.gx-mrow+.gx-mrow{border-top:1px solid var(--gx-sep)}
.gx-mrow .msg-av{width:30px;height:30px}
.gx-mrow .mh{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
.gx-mrow .mt{font-size:13.5px;line-height:1.55;margin-top:2px}
.gx-chip{font-size:10.5px;font-weight:400;padding:1px 7px;border-radius:8px}
.gx-chip.public{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green-text)}
.gx-chip.private{background:color-mix(in srgb,var(--period-ovulation) 20%,transparent);color:var(--period-ovulation-text)}
.gx-chip.secret{background:color-mix(in srgb,var(--rose) 18%,transparent);color:var(--rose-text)}
.gx-pillbtn{display:block;width:100%;height:42px;margin-top:10px;border:0;border-radius:21px;background:color-mix(in srgb,var(--pri-pale) 70%,transparent);color:var(--pri-deep);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.gx-sfield{position:relative}
.gx-sfield>svg{position:absolute;left:14px;top:50%;width:17px;height:17px;margin-top:-8.5px;color:var(--ink2);pointer-events:none}
.gx-sfield .gx-soft{padding-left:40px}
.gx-find{display:flex;flex-direction:column;margin-top:10px;max-height:270px;overflow-y:auto}
.gx-fhint{padding:14px 0 6px;text-align:center;font-size:12.5px;color:var(--mist)}
.gx-fcount{font-size:11px;color:var(--ink2);letter-spacing:.06em;margin:2px 4px 4px}
.gx-fr{display:flex;gap:10px;align-items:flex-start;padding:10px 4px;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.gx-fr+.gx-fr{border-top:1px solid var(--gx-sep)}
.gx-fr .msg-av{width:30px;height:30px}
.gx-fr .fn{display:block;font-size:12px;font-weight:500}
.gx-fr .ft{display:block;font-size:13.5px;line-height:1.5;margin-top:1px}
.gx-fr mark{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--amber) 55%,transparent) 55%);color:inherit}
.gx-walls{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;margin-top:4px}
.gx-walls button{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:0;font:inherit;cursor:pointer}
.gx-walls .tile{position:relative;display:block;width:100%;height:92px;border-radius:16px;border:1px solid var(--gx-line);background-size:cover!important;background-position:center!important;box-shadow:0 8px 16px -12px rgba(40,55,80,.55);overflow:hidden;transition:box-shadow .25s}
.gx-walls .tile i{position:absolute;height:9px;border-radius:5px;background:rgba(255,255,255,.85)}
.gx-walls .tile .b1{left:9px;top:16px;width:46%}
.gx-walls .tile .b2{right:9px;top:32px;width:38%;background:color-mix(in srgb,var(--pri) 35%,transparent)}
.gx-walls .tile .b3{left:9px;top:48px;width:30%}
.gx-walls .ck{position:absolute;right:6px;bottom:6px;width:20px;height:20px;border-radius:50%;background:var(--pri-deep);color:#fff;display:grid;place-items:center;transform:scale(0)}
.gx-walls .ck svg{width:11px;height:11px}
.gx-walls .on .tile{box-shadow:0 0 0 2px var(--pri-deep),0 10px 18px -12px rgba(40,55,80,.6)}
.gx-walls .on .ck{transform:scale(1)}
.gx-walls .wn{font-size:12px;color:var(--ink2)}
.gx-walls .on .wn{color:var(--ink);font-weight:500}

/* ── 群聊邀请卡 in a private chat (same family as the call card) ── */
.gx-inv{width:268px;border-radius:24px;background:var(--gx-modal);border:1px solid var(--gx-line);box-shadow:0 14px 30px -18px rgba(40,55,80,.45);overflow:hidden;color:var(--ink);cursor:default}
.gx-inv .top{display:flex;gap:12px;align-items:center;padding:16px 16px 14px}
.gx-inv .gav{width:50px;height:50px;border-radius:50%;padding:3px;background:var(--pri-pale);flex-shrink:0}
.gx-inv .gav .gx-mosaic{border-radius:50%;gap:1.5px;padding:0}
.gx-inv .gav .gx-mosaic i{border-radius:0;font-size:9.5px}
.gx-inv .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gx-inv .meta b{font-size:16px;font-weight:600;line-height:1.3}
.gx-inv .meta small{font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-inv .num{display:flex;align-items:baseline;gap:2px;font-size:30px;line-height:1;color:var(--ink);flex-shrink:0}
.gx-inv .num small{font-size:12px;color:var(--ink2)}
.gx-inv .ft{display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 16px;height:46px;border-top:1px solid var(--gx-sep);font-size:13.5px;color:var(--ink2)}
.gx-join{display:flex;align-items:center;gap:4px;height:34px;padding:0 12px;border:0;border-radius:17px;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--pri-deep);cursor:pointer}
.gx-join svg{width:14px;height:14px}
.gx-join[disabled]{color:var(--ink2);font-weight:400;cursor:default}
@media(prefers-reduced-motion:reduce){.gx-ripple{display:none}}
/* in the 信息 list the group avatar sits in the same round frame as a person's: the mosaic is clipped round there */
.gx-row-av .gx-mosaic{border-radius:50%;padding:0;gap:1.5px}
.gx-row-av .gx-mosaic i{border-radius:0}
/* the composer has only one button inside the pill (@, where the private chat has 表情 + 语音): keep the pill inside the screen */
#gx-chat .chat-input #gx-ci{padding-right:48px}
#gx-chat .chat-input #gx-at{margin-left:-44px;margin-right:6px;width:38px;height:42px;z-index:2}