/* Groups (game.md Phase G1): the Groups list in the sidebar, the Create Group screen and the
   group screen. Laid out after the owner's Plato screenshots: dark full-screen layer, round
   back button, pill buttons, large rounded cards, uppercase section labels. Colours come from
   the app's theme variables (premium.css --p-*), so every theme and light mode still work. */

/* Sidebar list */
/* The Groups section sits after the last discussion room; both scroll as one list. */
.sidebar-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sidebar-scroll>.conversation-list{flex:none;overflow:visible}
#groupSection .conversation-heading{padding-bottom:6px}
.group-list{padding:0 10px 14px}
.group-avatar{overflow:hidden}
.group-avatar img,.group-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* Full-screen layer */
.group-screen{position:fixed;inset:0;z-index:1200;background:var(--p-bg,var(--bg,#111));color:var(--p-text,var(--text,#eee));display:flex;justify-content:center;font-family:var(--p-font,inherit);animation:group-in .18s ease-out}
@keyframes group-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.group-screen{animation:none}}
.group-screen-inner{width:100%;max-width:560px;display:flex;flex-direction:column;min-height:0;padding-top:env(safe-area-inset-top)}
.group-bar{display:flex;align-items:center;gap:12px;padding:14px 16px}
.group-bar h2{flex:1;margin:0;text-align:center;font-size:19px;font-weight:600;color:var(--p-text,var(--text))}
.group-round{flex:0 0 46px;width:46px;height:46px;border-radius:50%;border:1px solid var(--p-hair-strong,var(--border));background:var(--p-lift-strong,rgba(127,127,127,.12));color:inherit;display:grid;place-items:center;cursor:pointer}
.group-round .ico,.group-round .ico svg{width:20px;height:20px}
.group-pill-btn{height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--p-hair-strong,var(--border));background:var(--p-brand,var(--accent));color:var(--p-on-brand,#fff);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.group-pill-btn:disabled{background:var(--p-lift-strong,rgba(127,127,127,.12));color:var(--p-muted,var(--muted));cursor:default}
.group-title-pill{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 6px;border-radius:999px;border:1px solid var(--p-hair-strong,var(--border));background:var(--p-lift-strong,rgba(127,127,127,.12))}
.group-title-pill .avatar{flex:0 0 34px;width:34px;height:34px;font-size:12px}
.group-title-copy{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.group-title-copy strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-title-copy small{font-size:12px;color:var(--p-muted,var(--muted))}
.group-scroll{flex:1;min-height:0;overflow-y:auto;padding:4px 12px calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}

.group-card{background:var(--p-panel,var(--panel));border:1px solid var(--p-hair,var(--border));border-radius:26px}
.group-label{margin:22px 18px 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--p-muted,var(--muted))}

/* Photo + name + description */
.group-identity{display:flex;gap:16px;padding:18px}
.group-photo-pick{flex:0 0 112px;width:112px;height:112px;margin-top:6px;padding:0;border:0;background:none;position:relative;cursor:pointer;color:inherit}
.group-photo{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:var(--p-brand-soft,rgba(127,127,127,.18));color:var(--p-brand,var(--accent));overflow:hidden}
.group-photo .ico,.group-photo .ico svg{width:46px;height:46px}
.group-photo-badge{position:absolute;right:0;bottom:2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--p-brand,var(--accent));color:var(--p-on-brand,#fff);border:2px solid var(--p-panel,var(--panel))}
.group-photo-badge .ico,.group-photo-badge .ico svg{width:15px;height:15px}
.group-fields{flex:1;min-width:0;display:flex;flex-direction:column}
.group-fields label{margin:2px 0 8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--p-muted,var(--muted))}
.group-fields input,.group-fields textarea{width:100%;box-sizing:border-box;margin-bottom:14px;padding:11px 14px;border-radius:14px;border:1px solid var(--p-hair-strong,var(--border));background:transparent;color:inherit;font:inherit;font-size:16px;resize:none}
.group-fields textarea{margin-bottom:0}
.group-fields input:focus,.group-fields textarea:focus{outline:2px solid var(--p-brand,var(--accent));outline-offset:1px}

/* "All members can invite" switch */
.group-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 18px;font-size:16px;cursor:pointer}
.group-screen .group-switch{appearance:none;-webkit-appearance:none;flex:0 0 58px;width:58px;height:34px;margin:0;border-radius:999px;background:var(--p-lift-strong,rgba(127,127,127,.3));position:relative;cursor:pointer;transition:background .15s}
.group-switch::after{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s}
.group-screen .group-switch:checked{background:#6aa84f!important;border-color:#6aa84f!important}
.group-switch:checked::after{transform:translateX(24px)}
.group-switch:focus-visible{outline:2px solid var(--p-brand,var(--accent));outline-offset:2px}

/* People rows (invite list and member list) */
.group-people{overflow:hidden}
.group-person{width:100%;display:flex;align-items:center;gap:14px;padding:13px 18px;border:0;border-top:1px solid var(--p-hair,var(--border));background:none;color:inherit;font:inherit;text-align:left}
.group-person:first-child{border-top:0}
button.group-person{cursor:pointer}
@media (hover:hover){button.group-person:hover{background:var(--p-lift,rgba(127,127,127,.06))}}
.group-person .avatar{flex:0 0 44px;width:44px;height:44px;overflow:hidden}
.group-person-name{flex:1;min-width:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-person-name em{font-style:normal;color:var(--p-muted,var(--muted));font-size:13px}
.group-person-name small{display:block;margin-top:2px;font-size:12px;color:var(--p-muted,var(--muted))}
.group-person-name small.online{color:var(--p-online,#22c55e)}
.group-check{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:2px solid var(--p-muted,var(--muted));box-sizing:border-box}
.group-person[aria-checked="true"] .group-check{border-color:var(--p-brand,var(--accent));background:var(--p-brand,var(--accent));box-shadow:inset 0 0 0 4px var(--p-panel,var(--panel))}
.group-role{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--p-brand-soft,rgba(127,127,127,.18));color:var(--p-brand,var(--accent))}
.group-empty{margin:0;padding:18px;font-size:14px;color:var(--p-muted,var(--muted))}

.group-description{padding:16px 18px;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.group-note{margin:14px 18px 0;font-size:13px;color:var(--p-muted,var(--muted))}
.group-leave{width:100%;margin-top:22px;height:50px;border-radius:16px;border:1px solid color-mix(in srgb,var(--danger,#f87171) 45%,transparent);background:color-mix(in srgb,var(--danger,#f87171) 12%,transparent);color:var(--danger,#f87171);font:inherit;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.group-leave .ico,.group-leave .ico svg{width:18px;height:18px}

@media (max-width:420px){
  .group-identity{gap:12px;padding:14px}
  .group-photo-pick,.group-photo{flex-basis:92px;width:92px;height:92px}
}

/* ── Group chat (Phase G2): a group open in the ordinary chat panel ──────────────────
   The chat code puts .group-chat-open on <body>. Groups start with text, emoji and stickers
   (game.md C4), so calls, attachments and "for both" actions are hidden. Voice notes, read
   ticks and typing work in groups since 2026-10-02. */
body.group-chat-open #callBtn,body.group-chat-open #videoCallHeaderBtn,body.group-chat-open #attachBtn,body.group-chat-open #clearBothAction,body.group-chat-open #messageInfoAction{display:none!important}
/* Who sent it: the name (the skin hides it in two-person chats) and a small photo. */
body.group-chat-open #chatView .message-row:not(.mine) .message-bubble>.name-label{display:block;color:var(--p-brand,var(--accent));opacity:1}
.group-msg-avatar{flex:0 0 30px;width:30px;height:30px;margin:0 8px 2px 0;align-self:flex-end;font-size:11px;overflow:hidden}
.group-msg-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.group-item.active{background:var(--p-lift-strong,rgba(127,127,127,.12))}

.group-add{width:100%;margin-top:12px;height:50px;border-radius:16px;border:1px solid var(--p-hair-strong,var(--border));background:var(--p-lift,rgba(127,127,127,.06));color:var(--p-brand,var(--accent));font:inherit;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.group-add.hidden{display:none}
.group-add .ico,.group-add .ico svg{width:18px;height:18px}

/* Phase G7: admin controls and the unread badge */
.group-remove{flex:none;padding:6px 12px;border:1px solid color-mix(in srgb,var(--danger,#f87171) 45%,transparent);border-radius:999px;background:none;color:var(--danger,#f87171);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.group-item .unread-count-badge{margin-left:auto}

/* ── Phones: iPhone Safari and Chrome on Android/iPhone ────────────────────────────── */
.group-screen{touch-action:manipulation;overscroll-behavior:contain}
.group-scroll{overscroll-behavior:contain}
.group-screen button,.group-item button{-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){
  .group-remove{min-height:44px;padding:0 14px}
  .group-person{padding-block:14px}
}

/* A group without a photo: a "people" picture on the brand colour. */
.group-avatar{display:grid;place-items:center;background:linear-gradient(145deg,var(--p-brand,#5b6cff),var(--p-brand-2,#8b5cf6))!important;color:#fff!important;border:0!important}
.group-glyph{width:62%;height:62%;fill:currentColor}

/* The group icon in the sidebar opens the Groups screen; unread group messages show on it. */
#newGroupBtn{position:relative}
.group-btn-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center}
.group-btn-badge.hidden{display:none}
.group-list-card{overflow:hidden;padding:6px}
.group-list-card .group-item{border-radius:20px}
/* Edit group → Members: Make admin / Remove admin / Remove */
.group-member-edit{flex-wrap:wrap}
.group-member-edit .group-person-name{flex:1 1 130px}   /* the buttons drop to their own line before the name is cut short */
.group-member-actions{display:flex;gap:8px;margin-left:auto}
.group-chip{min-height:34px;padding:0 12px;border:1px solid var(--p-hair-strong,var(--border));border-radius:999px;background:none;color:var(--p-brand,var(--accent));font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.group-chip.danger{color:var(--danger,#f87171);border-color:color-mix(in srgb,var(--danger,#f87171) 45%,transparent)}
.group-chip:disabled{opacity:.5}
@media (pointer:coarse){.group-chip{min-height:44px}}