/* groups.css - private groups (invite link + group chat + group voice). Loaded after chatfix.css.
   The thread reuses the main chat's own classes (.ch-main, .cm, .ch-voice, .vp ...) so it follows whatever theme the chat has. */

/* unread badge on the Chat | Messages tabs (Messages counts DMs + groups) */
.ch-tabs button i{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;margin-left:7px;border-radius:99px;
  background:var(--down);color:#fff;font:800 10px var(--ui);font-style:normal}
.ch-tabs button i[hidden]{display:none!important}

/* Messages list: the + at the top starts a group */
.dm-bar{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px}
.dm-bar b{font:750 15px var(--ui);letter-spacing:-.01em;color:var(--txt-1)}
.dm-plus{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#2a2d33;color:#fff;border:0}
.dm-plus:active{transform:scale(.92)}
.gr-av{font-size:14px;font-weight:800;color:var(--txt-1)}
.gr-av img{width:100%;height:100%;object-fit:cover;display:block}
.gr-row .dmr-tx b{flex-wrap:wrap}
.gr-live{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:99px;
  background:var(--up-soft);color:var(--up);text-transform:none}

/* thread */
.gr-thread{padding:10px 12px 8px;gap:8px}
.gr-thread .dm-top{padding:0 0 8px;margin-bottom:0}
.gr-thread .dm-who{flex:1}
.gr-ibtn{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--panel);border:1px solid var(--line-2);color:var(--txt-1)}
.gr-ibtn:active{transform:scale(.94)}
.gr-voice{flex:none}
html body #s-chat #ch-grp .gr-main{flex:1 1 0!important;min-height:0!important;margin:0!important}
html body #s-chat #ch-grp .gr-main .ch-logwrap{min-height:0!important}
#gr-log .ch-sys{color:#4a5060;padding:6px 0}
@media(min-width:1024px){
  .gr-thread{height:100%}
  html body #s-chat .ch-dmp#ch-grp{max-width:760px}
}

/* sheets (new group / join / invite preview / info) */
.gr-ov{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gr-sheet{width:100%;max-width:400px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  padding:20px 18px 16px;border-radius:20px;background:#1c1e22;color:var(--txt-1,#fff);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(0,0,0,.6)}
.gr-sheet h3{margin:0 0 4px;font:750 18px var(--ui);letter-spacing:-.02em}
.gr-c{text-align:center}
.gr-sub{margin:0 0 14px;font-size:13.5px;line-height:1.4;color:var(--txt-2,#aab)}
.gr-bad{color:var(--down)}
.gr-big{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:22px;
  background:var(--raised,#23262b);color:var(--txt-1,#fff)}
.gr-field{width:100%;height:46px;padding:0 14px;border-radius:12px;background:var(--panel,#0d0f10);color:var(--txt,#fff);
  border:1px solid var(--line,#2a2d33);font:500 16px var(--ui);outline:none;box-sizing:border-box}
.gr-field:focus{border-color:rgba(255,255,255,.3)}
.gr-actions{display:flex;gap:8px;margin-top:14px}
.gr-btn{flex:1;height:44px;border-radius:12px;border:0;cursor:pointer;font:700 14.5px var(--ui);background:#34373e;color:#fff}
.gr-btn.ghost{background:transparent;color:#aeb3bd}
.gr-btn[disabled]{opacity:.45;pointer-events:none}
.gr-btn:active{transform:scale(.97)}
.gr-cap{margin:16px 2px 6px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3,#889)}
.gr-linkbox input{width:100%;height:44px;padding:0 12px;border-radius:12px;background:#15171a;color:var(--txt,#fff);
  border:1px solid var(--line-2,#2a2d33);font:600 13.5px ui-monospace,SFMono-Regular,Menlo,monospace;box-sizing:border-box;outline:none;text-overflow:ellipsis}
.gr-note{margin:8px 2px 0;font-size:12px;line-height:1.4;color:var(--txt-3,#889)}
.gr-line{display:block;width:100%;margin-top:10px;padding:12px;border-radius:12px;cursor:pointer;text-align:center;
  font:700 14px var(--ui);background:transparent;border:1px solid var(--line-2,#2a2d33);color:var(--txt-1,#fff)}
.gr-line.danger{color:var(--down)}
.gr-mems{display:flex;flex-direction:column;gap:2px;max-height:34dvh;overflow-y:auto;overscroll-behavior:contain}
.gr-mem{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:10px;cursor:pointer}
@media(hover:hover){.gr-mem:hover{background:rgba(255,255,255,.05)}}
.gr-mem .dmav{width:34px;height:34px;font-size:12px}
.gr-mn{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.gr-mn b{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-mn em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2,#aab);
  padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.08);flex:none}
.gr-kick{flex:none;padding:6px 10px;border-radius:8px;border:1px solid var(--line-2,#2a2d33);background:transparent;
  color:var(--down);font:700 12px var(--ui);cursor:pointer}

/* edit name / picture (anyone in the group) */
.gr-photo-row{display:flex;justify-content:center;gap:8px;margin:0 0 12px}
.gr-mini{padding:7px 13px;border-radius:99px;border:1px solid var(--line-2,#2a2d33);background:transparent;cursor:pointer;
  color:var(--txt-1,#fff);font:700 12.5px var(--ui)}
.gr-mini.danger{color:var(--down)}
.gr-mini[disabled]{opacity:.45;pointer-events:none}
.gr-rename{display:flex;align-items:flex-end;gap:10px;margin:2px 0 8px}
.gr-rename .gr-ul{flex:1;text-align:center}
.gr-rename .gr-tbtn[hidden]{display:none}
/* the photo cropper must sit above the group sheet */
body.gr-modal-open .cropper{z-index:9500}

/* new group: Telegram-style box (camera circle, underlined name, Cancel / Next) */
.gr-sheet.gr-sheet-tg{max-width:380px;padding:18px 18px 10px;background:#1c1e22}
.gr-tg{display:flex;align-items:center;gap:16px}
.gr-cam{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;overflow:hidden;
  background:#3a3d44;color:#e6e8ec;border:0}
.gr-cam:active{transform:scale(.95)}
.gr-cam img{width:100%;height:100%;object-fit:cover;display:block}
.gr-ul{flex:1;min-width:0;height:44px;padding:0 2px;background:transparent;color:#fff;border:0;border-bottom:1.5px solid #4a4e57;
  border-radius:0;font:500 17px var(--ui);outline:none;box-sizing:border-box}
.gr-ul::placeholder{color:#7d828c}
.gr-ul:focus{border-bottom-color:#c9ccd3}
.gr-tg-act{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}
.gr-tbtn{padding:10px 14px;background:none;border:0;border-radius:8px;cursor:pointer;font:700 14px var(--ui);
  letter-spacing:.02em;color:#c9ccd3}
.gr-tbtn:active{background:rgba(255,255,255,.07)}
.gr-tbtn[disabled]{opacity:.4;pointer-events:none}

/* ---------- Telegram-style group info (grey / black, no blue) ---------- */
.gr-sheet{position:relative;border-radius:26px}
.gr-sheet.gr-sheet-info{max-width:400px;padding:22px 14px 14px;background:#141517;border:1px solid rgba(255,255,255,.08)}
.gr-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#26282d;color:#c9ccd3;border:0;z-index:2}
.gr-x:active{transform:scale(.92)}
.gr-hero{width:92px;height:92px;font-size:32px;margin:4px auto 12px;background:#2a2c31;box-shadow:0 0 0 4px #1c1d20}
.gr-title{margin:0;font:750 22px var(--ui);letter-spacing:-.02em;padding:0 36px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-subline{margin:4px 0 16px;font-size:13.5px;color:var(--txt-2,#9aa1ad)}

/* round action tiles */
.gr-tiles{display:flex;gap:8px}
.gr-tile{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 4px 10px;
  border:0;border-radius:18px;background:#222428;color:#e6e8ec;cursor:pointer;font:650 12px var(--ui)}
.gr-tile span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gr-tile:active{transform:scale(.95)}
.gr-tile.on{background:#34373e}
@media(hover:hover){.gr-tile:hover{background:#2b2d33}}

.gr-editpanel{margin-top:8px;padding:10px 14px 8px;border-radius:18px;background:#1b1c1f}
.gr-editpanel[hidden]{display:none}
.gr-editpanel .gr-rename{margin:0}
.gr-editpanel .gr-photo-row{justify-content:flex-start;margin:4px 0 0}
.gr-editpanel .gr-photo-row:empty{display:none}

/* grouped cards */
.gr-card{margin-top:10px;padding:12px 14px 14px;border-radius:18px;background:#1b1c1f}
.gr-card .gr-cap{margin:0 0 8px}
.gr-card .gr-linkbox input{background:#121315;border-color:rgba(255,255,255,.07);border-radius:14px}
.gr-reset{display:block;width:100%;margin-top:10px;padding:11px;border:0;border-radius:14px;background:#26282d;cursor:pointer;
  font:700 13.5px var(--ui);color:var(--down)}
.gr-card-m{padding-bottom:8px}
.gr-mhead{display:flex;align-items:center;gap:10px;margin:0 2px 6px;color:var(--txt-2,#9aa1ad);
  font:800 11.5px var(--ui);letter-spacing:.07em;text-transform:uppercase}
.gr-mhead svg{width:20px;height:20px;flex:none}
.gr-card-d{padding:6px}
.gr-card-d .gr-line{margin:0;border:0;border-radius:14px;background:transparent;padding:13px}
.gr-card-d .gr-line+.gr-line{border-top:1px solid rgba(255,255,255,.06);border-radius:0 0 14px 14px}
@media(hover:hover){.gr-card-d .gr-line:hover{background:rgba(255,255,255,.04)}}

/* members: avatar, name + @handle, purple bubble for the owner */
.gr-sheet-info .gr-mems{max-height:30dvh}
.gr-sheet-info .gr-mem{padding:8px 4px;gap:12px}
.gr-sheet-info .gr-mem .dmav{width:44px;height:44px;font-size:14px}
.gr-sheet-info .gr-mn{flex-direction:column;align-items:flex-start;gap:1px}
.gr-sheet-info .gr-mn b{font-size:15px;font-weight:700;max-width:100%}
.gr-sheet-info .gr-mn small{font-size:12.5px;color:var(--txt-2,#9aa1ad);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-own{position:relative;flex:none;display:inline-grid;place-items:center;overflow:hidden;isolation:isolate;
  height:26px;padding:0 13px;border-radius:99px;
  background:linear-gradient(135deg,#2b1559 0%,#4b27a0 55%,#6a3fd6 100%);
  box-shadow:inset 0 0 0 1px rgba(196,160,255,.45),inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px -5px rgba(139,92,246,.75)}
.gr-own em{position:relative;z-index:2;font:800 12px/1 var(--ui);font-style:normal;letter-spacing:.02em;color:#f4ecff;
  text-shadow:0 0 6px rgba(20,8,48,.95),0 1px 2px rgba(20,8,48,.9)}
:is(.gr-own,.adm-bub) .rain{position:absolute;inset:0;z-index:1;display:flex;justify-content:space-around;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
:is(.gr-own,.adm-bub) .rain b{display:block;font:700 9px/10px ui-monospace,Menlo,monospace;text-align:center;color:rgba(214,190,255,.7);
  text-shadow:0 0 5px rgba(180,140,255,.9);animation:gr-fall 2.4s linear infinite;will-change:transform}
:is(.gr-own,.adm-bub) .rain b:nth-child(2){animation-duration:1.7s;animation-delay:-.6s;color:rgba(190,160,255,.55)}
:is(.gr-own,.adm-bub) .rain b:nth-child(3){animation-duration:2.9s;animation-delay:-1.4s}
:is(.gr-own,.adm-bub) .rain b:nth-child(4){animation-duration:2.1s;animation-delay:-.2s;color:rgba(190,160,255,.55)}
:is(.gr-own,.adm-bub) .rain b:nth-child(5){animation-duration:2.6s;animation-delay:-1.9s}
:is(.gr-own,.adm-bub) .rain b:nth-child(6){animation-duration:1.9s;animation-delay:-1s;color:rgba(190,160,255,.55)}
@keyframes gr-fall{from{transform:translateY(-62px)}to{transform:translateY(28px)}}
@media(prefers-reduced-motion:reduce){:is(.gr-own,.adm-bub) .rain b{animation:none;transform:translateY(-20px)}}
.gr-sheet-info .gr-kick{border:0;border-radius:99px;padding:6px 12px;background:#26282d}

/* join / created popups: same round look */
.gr-sheet:not(.gr-sheet-info):not(.gr-sheet-tg){background:#141517;border-color:rgba(255,255,255,.08);padding:24px 18px 16px}
.gr-sheet:not(.gr-sheet-info) .gr-big{width:84px;height:84px;font-size:28px;margin-bottom:12px;background:#2a2d33}
.gr-sheet:not(.gr-sheet-info) .gr-btn{border-radius:14px;background:#2e3036}
.gr-sheet:not(.gr-sheet-info) .gr-btn.ghost{background:transparent}
.gr-sheet:not(.gr-sheet-info) #gr-do{background:#e9eaee;color:#101113}

/* group call button: green round-ended pill with a handset; red round hang-up while on the call */
.gr-voice .vbtn.join{display:inline-flex;align-items:center;gap:7px;padding:0 18px 0 14px;background:#2fd067;color:#06140b;
  box-shadow:0 4px 14px -4px rgba(47,208,103,.55)}
.gr-voice .vbtn.leave{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%;background:#ff4d4d;color:#fff;
  box-shadow:0 4px 14px -4px rgba(255,77,77,.6)}
.gr-voice .vbtn.leave svg{transform:none}
.gr-voice .vbtn.mic{width:40px;height:40px;background:#2a2c31;color:#e6e8ec}
.gr-voice .vbtn.mic.off{background:rgba(255,77,77,.18);color:var(--down)}


/* admin names everywhere (chat, groups, DMs, staff): the same purple bubble with falling code */
.adm-bub{position:relative;display:inline-grid;place-items:center;overflow:hidden;isolation:isolate;vertical-align:middle;max-width:100%;
  padding:2px 12px;border-radius:99px;
  background:linear-gradient(135deg,#2b1559 0%,#4b27a0 55%,#6a3fd6 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(196,160,255,.45),inset 0 1px 0 rgba(255,255,255,.18),0 3px 12px -5px rgba(139,92,246,.75)}
.adm-bub .adm-tx{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;min-width:0;
  color:#f4ecff!important;-webkit-text-fill-color:#f4ecff;text-shadow:0 0 6px rgba(20,8,48,.95),0 1px 2px rgba(20,8,48,.9)!important;font-weight:800}
.adm-bub .adm-tx *{color:#f4ecff!important;-webkit-text-fill-color:#f4ecff;background:none!important;text-shadow:inherit!important;animation:none!important}
.adm-bub .adm-tx .rank-badge,.adm-bub .adm-tx img{-webkit-text-fill-color:initial}
.adm-bub .rain{position:absolute;inset:0;z-index:1;display:flex;justify-content:space-around;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.adm-bub .rain b{font-size:8.5px;line-height:9px}
.cm .cnm .adm-bub .rank-name,.cm .cnm .adm-bub .rank-name *{background:none!important;padding:0!important;box-shadow:none!important}
.cm .cnm .adm-bub{padding:3px 12px}
.dm-nm b .adm-bub,.dmr-tx b .adm-bub,.stf-tx b .adm-bub,.gr-mn b .adm-bub{padding:1px 10px;font-size:inherit}

.adm-bub .owner-code,.adm-bub .pspark{display:none!important}
.adm-bub .rank-name{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.adm-bub .rank-badge{width:18px;height:18px}

/* ---- Group chat thread: readable panel + tidy message lineup ----
   The wallpaper used to show straight through the message area, so pfps/text were hard to see.
   The panel now has its own see-through scrim: it follows the theme's box opacity but never drops below .78,
   and always blurs what is behind it. */
html body #s-chat #ch-grp .gr-main{
  background-color:rgba(var(--tm-glass,8,8,10),max(.78,var(--tm-a-box,.55)))!important;
  -webkit-backdrop-filter:blur(max(var(--tm-blur,0px),14px)) saturate(1.05)!important;
  backdrop-filter:blur(max(var(--tm-blur,0px),14px)) saturate(1.05)!important}
#gr-log{padding:8px 8px 10px}
/* one consistent card per run of messages: round on the first and last row, flat in between, no gaps */
#gr-log .cm{gap:10px;padding:6px 12px;margin-top:2px;border-radius:5px;
  background:rgba(var(--tm-hi,255,255,255),.06)}
#gr-log .cm:not(.cont){margin-top:8px;border-top-left-radius:14px;border-top-right-radius:14px}
#gr-log .cm:not(:has(+ .cm.cont)){border-bottom-left-radius:14px;border-bottom-right-radius:14px}
#gr-log .cm.cont{margin-top:0;padding-top:2px;padding-bottom:3px}
#gr-log .cm.me{background:rgba(var(--tm-hi,255,255,255),.10)}
@media(hover:hover){#gr-log .cm:hover{background:rgba(var(--tm-hi,255,255,255),.10)}#gr-log .cm.me:hover{background:rgba(var(--tm-hi,255,255,255),.14)}}
/* profile pictures: bigger, with a ring so they stand out from any wallpaper */
#gr-log .cm .cav{width:38px;height:38px;box-shadow:0 0 0 2px rgba(var(--tm-hi,255,255,255),.22)}
#gr-log .cm.cont .cav{height:0;box-shadow:none}