/* Group settings page (#/group/:chatId) — TEAM-G
 * ภาษาดีไซน์ชุดเดียวกับ messages/chat/profile:
 * การ์ดขาวโปร่ง rgba(255,255,255,.62) + blur(14px), ขอบขาว .65, มุม 20-26px,
 * เงาฟ้า rgba(80,140,220,.15), ชื่อ #1f3350 / รอง #7d92ad */

.gp-page{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 12px 18px}

/* ---- top bar (การ์ดกระจกลอย) ---- */
.gp-top{display:flex;align-items:center;gap:10px;flex:none;
  margin:calc(10px + env(safe-area-inset-top)) 0 10px;
  padding:9px 11px;border-radius:26px;
  background:var(--card-glass);border:1px solid var(--card-brd);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 20px rgba(80,140,220,.15), inset 0 1px 0 rgba(255,255,255,.9);
  position:sticky;top:0;z-index:5}
.gp-top .icon-btn{background:var(--card-glass);border:1px solid var(--card-brd);
  color:var(--card-ink);box-shadow:0 3px 10px rgba(80,140,220,.12);transition:transform .16s ease}
.gp-top .icon-btn:active{transform:scale(.9)}
.gp-top-title{font-size:16.5px;font-weight:700;color:var(--card-ink)}

.gp-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.gp-loading{padding:34px 0;text-align:center;font-size:14px;color:var(--card-ink-dim)}

/* ---- การ์ดกลาง ---- */
.gp-card{padding:15px 16px;border-radius:22px;
  background:var(--card-glass);border:1px solid var(--card-brd);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 20px rgba(80,140,220,.15), inset 0 1px 0 rgba(255,255,255,.9);
  animation:gpIn .38s cubic-bezier(.22,.9,.3,1) backwards}
.gp-card:nth-of-type(2){animation-delay:.05s}
.gp-card:nth-of-type(3){animation-delay:.1s}
.gp-card:nth-of-type(4){animation-delay:.15s}
@keyframes gpIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.gp-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:11px}
.gp-card-top h3{display:flex;align-items:center;gap:8px;min-width:0;
  font-size:14.5px;font-weight:700;color:var(--card-ink)}
.gp-card-top h3 svg{width:17px;height:17px;flex:none;color:var(--accent)}
.gp-link-btn{display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:12.5px;font-weight:600;color:var(--accent);
  padding:6px 11px;border-radius:var(--r-pill);
  background:rgba(47,139,255,.1);border:1px solid rgba(47,139,255,.22);
  transition:transform .12s, background .15s}
.gp-link-btn svg{width:14px;height:14px}
.gp-link-btn:active{transform:scale(.94)}
.gp-link-btn:hover{background:rgba(47,139,255,.18)}

/* ---- หัวกลุ่ม ---- */
.gp-head{display:flex;align-items:center;gap:14px;border-radius:26px;padding:17px 16px}
.gp-head-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.gp-name-row{display:flex;align-items:center;gap:8px;min-width:0}
.gp-name{font-size:19px;font-weight:700;color:var(--card-ink);min-width:0}
.gp-name-input{width:100%;font-size:18px;font-weight:700;color:var(--card-ink);
  padding:5px 11px;border-radius:14px;
  background:var(--card-glass);border:1px solid var(--accent);
  box-shadow:0 0 0 3px rgba(47,139,255,.14)}
.gp-mini-btn{flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--card-ink-dim);
  background:var(--card-glass);border:1px solid var(--card-brd);
  transition:transform .12s, color .15s}
.gp-mini-btn svg{width:15px;height:15px}
.gp-mini-btn:active{transform:scale(.9)}
.gp-mini-btn:hover{color:var(--accent)}
.gp-head-sub{font-size:12.5px;color:var(--card-ink-dim)}

/* ---- ประกาศ ---- */
.gp-ann{font-size:13.5px;line-height:1.55;color:var(--card-ink);
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.gp-ann.empty{color:var(--card-ink-dim);font-style:italic}

/* ---- แถวตั้งค่า + สวิตช์ ---- */
.gp-row{display:flex;align-items:center;gap:12px}
.gp-row-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gp-row-title{font-size:13.5px;font-weight:600;color:var(--card-ink)}
.gp-row-sub{font-size:11.5px;color:var(--card-ink-dim)}
.gp-switch{flex:none;position:relative;width:46px;height:27px;display:inline-block}
.gp-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.gp-switch i{position:absolute;inset:0;border-radius:var(--r-pill);
  background:rgba(160,185,215,.45);border:1px solid var(--card-brd);
  transition:background .2s}
.gp-switch i::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;
  border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(30,60,100,.28);
  transition:transform .2s cubic-bezier(.32,.72,.22,1)}
.gp-switch input:checked + i{background:linear-gradient(135deg,#4aa4ff,var(--accent));
  border-color:rgba(47,139,255,.5);box-shadow:0 0 12px rgba(47,139,255,.35)}
.gp-switch input:checked + i::after{transform:translateX(19px)}
.gp-switch input:disabled{cursor:default}
.gp-switch input:disabled + i{opacity:.55}

/* ---- รายชื่อสมาชิก ---- */
.gp-members{display:flex;flex-direction:column;gap:4px;margin:0 -6px}
.gp-member{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 8px;border-radius:16px;transition:background .15s, transform .12s}
.gp-member.tappable:hover{background:var(--card-glass)}
.gp-member.tappable:active{transform:scale(.985)}
.gp-member[disabled]{cursor:default}
.gp-m-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.gp-m-name{font-size:14.5px;font-weight:600;color:var(--card-ink)}
.gp-m-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gp-m-sub{font-size:11.5px;color:var(--card-ink-dim)}
.gp-chev{flex:none;display:flex;color:var(--card-ink-dim);opacity:.8}
.gp-chev svg{width:15px;height:15px}

.gp-tag{flex:none;font-size:10.5px;line-height:1;font-weight:600;
  padding:3px 8px;border-radius:var(--r-pill)}
.gp-tag.owner{color:#8a6408;background:rgba(245,197,66,.22);border:1px solid rgba(245,197,66,.5)}
.gp-tag.admin{color:#1f66c2;background:rgba(47,139,255,.14);border:1px solid rgba(47,139,255,.35)}
.gp-tag.muted{color:var(--card-ink-dim);background:rgba(160,185,215,.2);border:1px solid rgba(160,185,215,.4)}

/* ---- ปุ่มออกจากกลุ่ม (แดงจาง) ---- */
.gp-leave{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:2px;padding:14px;border-radius:24px;
  font-size:14px;font-weight:700;color:#ef4444;
  background:rgba(254,226,226,.55);border:1px solid rgba(252,165,165,.65);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .12s, background .15s}
.gp-leave svg{width:18px;height:18px}
.gp-leave:hover{background:rgba(254,226,226,.8)}
.gp-leave:active{transform:scale(.98)}

/* ===== sheets (slide-up กระจกหนา) ===== */
.gp-sheet-bg{position:fixed;inset:0;z-index:100;background:rgba(7,20,41,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:gpFade .25s ease}
@keyframes gpFade{from{opacity:0}to{opacity:1}}
.gp-sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:101;
  width:min(480px,100%);max-height:86dvh;overflow-y:auto;color:var(--lt-ink);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--card-brd);border-bottom:none;
  border-radius:26px 26px 0 0;padding:12px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 60px rgba(9,30,60,.35);
  animation:gpUp .38s cubic-bezier(.32,.72,.22,1)}
@keyframes gpUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.gp-sheet.closing{animation:gpDown .22s ease forwards}
.gp-sheet-bg.closing{animation:gpFadeOut .22s ease forwards}
@keyframes gpDown{to{transform:translate(-50%,100%)}}
@keyframes gpFadeOut{to{opacity:0}}
.gp-sheet .grab{width:40px;height:6px;border-radius:3px;background:rgba(125,146,173,.3);
  margin:0 auto 14px}
.gp-sheet h3{font-size:16px;font-weight:700;margin-bottom:14px;color:var(--card-ink)}
.gp-sheet-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.gp-sheet-name{font-size:16px;font-weight:700;color:var(--card-ink);min-width:0}
.gp-sheet-cancel{display:block;width:100%;text-align:center;padding:13px;
  margin-top:8px;font-size:14px;color:var(--card-ink-dim)}

.gp-ann-input{border-radius:var(--r-md);resize:none;min-height:110px;line-height:1.55;
  font-size:14px;background:var(--card-glass);border-color:var(--lt-card-brd);
  color:var(--card-ink);margin-bottom:16px}
.gp-ann-input::placeholder{color:var(--card-ink-dim)}

/* action list ในชีต */
.gp-acts{display:flex;flex-direction:column;gap:6px}
.gp-act{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:14px 15px;border-radius:18px;font-size:14.5px;font-weight:600;color:var(--card-ink);
  background:var(--card-glass);border:1px solid var(--card-brd);
  transition:background .15s, transform .12s}
.gp-act svg{width:18px;height:18px;flex:none;color:var(--accent)}
.gp-act:hover{background:var(--card-glass)}
.gp-act:active{transform:scale(.98)}
.gp-act.danger{color:#ef4444;background:rgba(254,226,226,.5);border-color:rgba(252,165,165,.6)}
.gp-act.danger svg{color:#ef4444}
.gp-act.danger:hover{background:rgba(254,226,226,.8)}

.gp-pick{display:flex;flex-direction:column;gap:4px;max-height:52dvh;overflow-y:auto;
  margin:0 -6px 8px}
.gp-pick .gp-chev svg{width:16px;height:16px;color:var(--accent)}

.gp-confirm-txt{font-size:15px;font-weight:600;line-height:1.5;color:var(--card-ink);
  text-align:center;margin:6px 4px 18px}
.gp-danger-btn{display:block;width:100%;padding:14px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#ff7a7a,#ef4444);
  box-shadow:0 6px 18px rgba(239,68,68,.35);transition:transform .12s}
.gp-danger-btn:active{transform:scale(.97)}

/* ---- จอแคบ ---- */
@media (max-width:379px){
  .gp-page{padding:0 8px 14px}
  .gp-card{padding:13px 13px}
  .gp-head{gap:11px;padding:15px 13px}
  .gp-name{font-size:17px}
  .gp-member{padding:8px 6px;gap:9px}
  .gp-sheet{padding:12px 15px calc(18px + env(safe-area-inset-bottom))}
}

/* ===== ปุ่มเปลี่ยนรูปกลุ่ม (owner/admin) ===== */
.gp-ava-btn{position:relative;flex:none;padding:0;border-radius:50%;cursor:pointer;
  transition:transform .12s}
.gp-ava-btn:active{transform:scale(.95)}
.gp-ava-btn:focus-visible{box-shadow:0 0 0 3px rgba(47,139,255,.45)}
.gp-ava-cam{position:absolute;right:-3px;bottom:-1px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,#38bdf8,#2f8bff);
  border:2px solid rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(47,139,255,.45)}
.gp-ava-cam svg{width:11px;height:11px}
.gp-ava-btn.uploading{pointer-events:none}
.gp-ava-btn.uploading .avatar{opacity:.45}
.gp-ava-btn.uploading::after{content:'';position:absolute;top:50%;left:50%;
  width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:2.5px solid rgba(47,139,255,.25);border-top-color:#2f8bff;
  animation:gpAvaSpin .7s linear infinite}
@keyframes gpAvaSpin{to{transform:rotate(360deg)}}

/* ---- sheet ข้อมูลตัวเอง (แตะแถวสมาชิกที่เป็นเราเอง) ---- */
.gp-self-title{margin:12px 0 8px;font-size:14px;font-weight:700;color:var(--card-ink)}
.gp-self-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.gp-self-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:14px;background:var(--card-glass);
  border:1px solid var(--card-brd)}
.gp-self-row span{font-size:12.5px;color:var(--card-ink-dim)}
.gp-self-row b{font-size:12.5px;font-weight:700;color:var(--card-ink)}
.gp-self-hint{margin:0 0 12px;font-size:11.5px;line-height:1.55;color:var(--card-ink-dim)}
.gp-self-edit{width:100%;justify-content:center}