/* A Workspace's Group chat and its Group info (group-chat.js; the Founder, 8 October 2026, with WhatsApp's group as the
   picture): the one-to-one chat's bubbles and composer, the Workspace's round cover and its members' names in the header,
   and the group's own page in the Terminal's cards. */

/* ---- The chat: one column, the whole width, at the one-to-one chat's height. ---- */
.chat-app.group-chat-app{grid-template-columns:minmax(0,1fr)}
.group-chat-app .group-chat{display:flex}
.group-chat-head{gap:8px;padding-inline-start:8px}
.group-chat-head .chat-back{display:inline-flex}
.group-chat-open{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;min-height:44px;padding:2px 6px 2px 2px;border-radius:12px;color:inherit;text-decoration:none}
.group-chat-open:hover{background:var(--soft)}
.group-chat-open:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.group-chat-title{display:flex;flex-direction:column;min-width:0;gap:1px}
.group-chat-name{font-size:1rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-thread-head small.group-chat-members{display:block;font-size:.8125rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.group-chat-more{flex:none;color:var(--ink,#24212d)}
.group-chat-more .icon,.group-info-bar .icon{width:22px;height:22px;stroke-width:3}

/* The Workspace's round face: its cover, or its tint with its first letter. */
.chat-face.group-face{position:relative;isolation:isolate;overflow:hidden;background:none;flex:none}
.group-face .ws-cover{z-index:-1;border-radius:50%}
.group-face-letter{position:relative;color:var(--purple-dark)}
.group-face:has(.ws-cover img) .group-face-letter{visibility:hidden}
.chat-face.group-face-large{width:112px;height:112px;font-size:2.6rem;box-shadow:0 0 0 4px var(--surface,#fff),0 6px 18px rgba(30,15,50,.12)}
.chat-face.group-letter{width:28px;height:28px;font-size:.8125rem}

/* While searching: the bar under the header, and what it found. */
.group-chat .group-chat-search{max-width:none;padding:8px 12px;border-bottom:1px solid var(--line)}
.group-chat .group-chat-search .list-search-field{min-height:42px}
.group-chat-found{flex:none;font-size:.8125rem;color:var(--muted);white-space:nowrap}
.group-chat-files{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-weight:600}
.group-chat-files .icon{width:18px;height:18px;color:var(--purple)}
.team-chat > .team-message[hidden]{display:none!important}
.group-chat-empty{margin:auto;max-width:36ch;text-align:center;color:var(--muted);font-size:.9375rem}

/* ---- Someone else's message: the one-to-one chat's row (chat-message.css), face and name over the bubble (the Founder,
   15 October 2026). A room adds only a tone for each person's name; an agent's name is in its chat colour. ---- */
.team-message .chat-who .chat-face.group-letter{width:24px;height:24px;min-width:24px;font-size:.6875rem}
.chat-group-name{display:block;margin:0 0 2px;font-weight:650;font-size:.8125rem;line-height:1.3}
.chat-group-tone-0.chat-group-tone-0{color:#7a2fc6}.chat-group-tone-1.chat-group-tone-1{color:#b4236b}.chat-group-tone-2.chat-group-tone-2{color:#1f6fb2}
.chat-group-tone-3.chat-group-tone-3{color:#16794d}.chat-group-tone-4.chat-group-tone-4{color:#a1520f}.chat-group-tone-5.chat-group-tone-5{color:#4b5bc4}
[data-theme=dark] .chat-group-tone-0{color:#c9a2f2}[data-theme=dark] .chat-group-tone-1{color:#f19ac2}[data-theme=dark] .chat-group-tone-2{color:#8fc0ef}
[data-theme=dark] .chat-group-tone-3{color:#86d3ad}[data-theme=dark] .chat-group-tone-4{color:#f0b37a}[data-theme=dark] .chat-group-tone-5{color:#a9b3f2}

/* ---- Group info: the group's own page. ---- */
.group-info{display:grid;gap:22px;max-width:720px;margin:0 auto;min-width:0}
.group-info-bar{display:flex;align-items:center;gap:8px}
.group-info-bar .icon-button{width:44px;min-width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface,#fff);color:var(--ink,#24212d);display:inline-grid;place-items:center}
.group-info-top{display:grid;justify-items:center;gap:6px;margin-top:-30px;text-align:center;min-width:0}
.group-info-top h1{margin:10px 0 0;font-size:1.625rem;line-height:1.2;overflow-wrap:anywhere}
.group-info-count{margin:0;color:var(--muted)}
.group-info-count a{color:var(--purple);font-weight:600}
.group-info-about{margin:2px 0 0;max-width:52ch;color:var(--muted);overflow-wrap:anywhere}
.group-info-actions{display:flex;justify-content:center;gap:clamp(20px,8vw,44px)}
.group-info-action{display:grid;justify-items:center;gap:6px;min-width:72px;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:.875rem;cursor:pointer}
.group-info-action-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface,#fff);color:var(--purple);transition:background .12s}
.group-info-action-icon .icon{width:22px;height:22px}
.group-info-action:hover .group-info-action-icon{background:var(--soft)}
.group-info-action:focus-visible{outline:none}
.group-info-action:focus-visible .group-info-action-icon{outline:2px solid var(--purple);outline-offset:2px}
.group-info-section{display:grid;gap:8px;min-width:0}
.group-info-section h2{margin:0 6px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.group-info-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.group-info-section-head .icon-button{width:44px;min-width:44px;height:44px;border-radius:50%;color:var(--muted)}
.group-info-section-head .icon-button[aria-pressed=true]{color:var(--purple);background:var(--soft)}
.group-info-card{list-style:none;margin:0;padding:4px 0;border:1px solid var(--line);border-radius:var(--radius,16px);background:var(--surface,#fff);overflow:hidden;min-width:0}
.group-info-row{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:0 16px;border:0;background:none;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;box-sizing:border-box}
.group-info-row + .group-info-row{box-shadow:inset 50px 1px 0 -49px var(--surface,#fff),inset 0 1px 0 var(--line)}
.group-info-row:hover,.group-member:hover{background:var(--soft)}
.group-info-row .icon{flex:none;width:20px;height:20px;color:var(--muted)}
.group-info-row > .icon:first-child{color:var(--purple)}
.group-info-value{color:var(--muted);white-space:nowrap}
.group-info-find{margin:0 0 4px}
.group-members > li + li{border-top:1px solid var(--line)}
.group-member{display:block;width:100%;padding:8px 12px 8px 16px;border:0;background:none;color:inherit;font:inherit;text-align:start;text-decoration:none;box-sizing:border-box;cursor:pointer}
div.group-member{cursor:default}
.group-member .agent-row{display:flex;align-items:center;gap:12px;min-width:0}
.group-member .agent-row-copy{flex:1 1 auto;min-width:0}
.group-member .agent-row-end{margin-inline-start:auto;display:flex;align-items:center;gap:8px;flex:none}
.group-member-face{flex:none;display:inline-flex}
.group-member-face :is(.human-photo,.chat-face){width:44px;height:44px;min-width:44px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--soft);color:var(--purple);font-weight:650}
.group-member-tag{font-size:.8125rem;color:var(--muted)}
.group-member-add{display:flex;align-items:center;gap:12px;font-weight:600}
.group-add-face .icon{width:20px;height:20px}
.group-member-none{padding:14px 16px;color:var(--muted)}
[data-theme=dark] .group-info-card,[data-theme=dark] .group-info-action-icon,[data-theme=dark] .group-info-bar .icon-button{background:var(--surface,#1d1924)}
[data-theme=dark] .group-chat-more{color:inherit}
/* Guests' agents (0158, ADR-039): the agent row with its owner's line, and Remove, Withdraw or Bring at its end. */
.group-guest{display:flex;align-items:center;gap:10px}
.group-guest > .agent-row{flex:1 1 auto;min-width:0}
.group-guest > .btn{flex:none;min-height:44px;padding:0 16px}
.group-bring-said{margin:0;padding:14px 16px 4px;color:var(--muted);font-size:.9375rem;line-height:1.4}
.group-bring .group-members{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
/* On a phone a Group chat is the whole screen, as an agent's chat is (the Founder, 10 October 2026, 23:37, on Dev: "rather
   than being a full screen view as a group chat should be, it's kind of like a bubble of the screen within the screen"):
   no page header, no bar of screens, no card around it; its own header carries Back. */
@media (max-width:699px){
  .chat-app.group-chat-app{position:fixed;top:0;left:0;right:0;bottom:0;z-index:35;height:auto;min-height:0;margin:0;border:0;border-radius:0;background:var(--surface,#fff)}
  html:has(.chat-app.group-chat-app),body:has(.chat-app.group-chat-app){overflow:hidden;overscroll-behavior:none}
  body:has(.chat-app.group-chat-app) :is(.bottom-nav,.chat-launcher){display:none}
  /* The keyboard up: the room is held over it like every chat (chat-message.css, html.chat-kb). */
}

/* Tagging (mention-picker.js): the list above the composer, a tag in a bubble, the Feed's @ mark. */
.mention-list{position:absolute;left:8px;right:8px;bottom:100%;margin:0 0 6px;padding:4px;list-style:none;max-height:min(264px,45vh);overflow-y:auto;background:var(--card,#fff);color:inherit;border:1px solid var(--line,#d9dbe3);border-radius:14px;box-shadow:0 6px 22px rgba(30,20,50,.18);z-index:30}
.mention-list li{margin:0}
.mention-row{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:4px 8px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.mention-list li.on .mention-row,.mention-row:hover{background:var(--soft,#efe9f7)}
.mention-row .portrait-box,.mention-row .human-photo,.mention-row .chat-face{flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden}
.mention-row .portrait-box [data-portrait]{width:32px!important;height:32px!important}
.mention-copy{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.mention-copy small{opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-message.team-message.team-message .chat-bubble mark.mention{background:color-mix(in srgb,currentColor 14%,transparent);color:inherit;font-weight:700;border-radius:5px;padding:0 3px}
.team-message.team-message.team-message .chat-bubble mark.mention.mention-me{background:color-mix(in srgb,currentColor 38%,transparent);box-shadow:inset 0 -2px 0 currentColor}
.feed-at{flex:none;display:inline-block;min-width:22px;height:22px;border-radius:11px;background:var(--feed-accent,#6b3fd4);color:#fff;font-size:.8rem;font-weight:700;line-height:22px;text-align:center}
/* A discussion running in the room (0214, room-discussion.js): one line above the composer, in the working line's look. */
.room-discussion{display:flex;align-items:center;gap:8px;padding:4px 16px 2px;font-size:12px;min-width:0;color:var(--muted)}
.room-discussion>.icon{width:16px;height:16px;flex:none}
.room-discussion-said{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-discussion-stop{flex:none}
.room-discussion-form textarea{width:100%;resize:vertical}
/* Members, as WhatsApp's (room-members.js; the Founder, 17 October 2026): a row slid toward the start shows a red trash; a tap opens the member's sheet. */
.room-member{position:relative;overflow:hidden;background:#c62f4a}
.room-member:not([data-removable]){background:none}
.room-member-slide{position:relative;z-index:1;background:var(--surface,#fff);transition:transform .18s ease-out;touch-action:pan-y}
.room-member[data-dragging] .room-member-slide{transition:none}
.room-member-trash{position:absolute;inset-block:0;inset-inline-end:0;width:80px;display:grid;place-items:center;border:0;padding:0;background:#c62f4a;color:#fff;cursor:pointer}
.room-member-trash .icon{width:24px;height:24px}
.group-member .agent-row-end .group-member-tag{white-space:nowrap}
[data-theme=dark] .room-member-slide{background:var(--surface,#1d1924)}
dialog.member-sheet{position:fixed;inset:auto 0 0;width:100vw;max-width:100vw;max-height:100dvh;height:auto;margin:0;padding:0;border:0;background:transparent;overflow:visible;color:var(--ink,#24212d)}
dialog.member-sheet::backdrop{background:#0005}
.member-sheet-panel{position:relative;display:grid;gap:14px;max-height:min(86dvh,720px);overflow:auto;padding:4px 16px calc(16px + env(safe-area-inset-bottom));background:var(--surface,#fff);border-radius:20px 20px 0 0;box-shadow:0 -10px 40px #1c142b33;box-sizing:border-box}
[data-theme=dark] .member-sheet-panel{background:#1d1926;color:#f1eff7}
.member-sheet-handle{display:grid;place-items:center;height:14px}
.member-sheet-handle span{width:40px;height:4px;border-radius:2px;background:var(--line,#d9d6e2)}
.member-sheet-close{position:absolute;top:8px;inset-inline-end:8px;width:44px;height:44px;border-radius:50%}
.member-sheet-top{display:grid;justify-items:center;gap:4px;text-align:center;min-width:0}
.member-sheet-top .portrait-box{width:88px;height:88px;border-radius:50%;overflow:hidden;margin-bottom:6px}
.member-sheet-letter{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--purple);font-size:2rem;font-weight:650}
.member-sheet-top h2{margin:0;font-size:1.35rem;font-weight:700;overflow-wrap:anywhere}
.member-sheet-title{margin:0;color:var(--muted)}
.member-sheet-main{display:grid;gap:14px}
.member-sheet-main[hidden],.member-sheet-confirm[hidden]{display:none}
.member-sheet-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.member-sheet-act{display:grid;justify-items:center;gap:6px;min-height:72px;padding:12px 6px;border:1px solid var(--line);border-radius:14px;background:none;color:inherit;font:inherit;font-size:.875rem;cursor:pointer}
.member-sheet-act-icon{color:var(--purple)}
.member-sheet-act-icon .icon{width:22px;height:22px}
.member-sheet-list,.member-sheet-confirm{display:grid;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.member-sheet-row{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 16px;border:0;background:none;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;box-sizing:border-box}
.member-sheet-row + .member-sheet-row{border-top:1px solid var(--line)}
.member-sheet-row .icon{flex:none;width:20px;height:20px;color:var(--muted)}
.member-sheet-row:hover,.member-sheet-act:hover{background:var(--soft)}
.member-sheet-danger,.member-sheet-danger .icon{color:#c62f4a}
[data-theme=dark] .member-sheet-danger,[data-theme=dark] .member-sheet-danger .icon{color:#ff8a9e}
.member-sheet-ask{margin:14px 16px 2px;font-weight:650}
.member-sheet-means{margin:0 16px 12px;color:var(--muted);font-size:.9rem}
.member-sheet-confirm .member-sheet-yes{border-top:1px solid var(--line);justify-content:center;font-weight:650}
.member-sheet-no{justify-content:center}
@media (min-width:701px){dialog.member-sheet{inset:0;margin:auto;width:min(420px,calc(100vw - 32px));height:fit-content}.member-sheet-panel{border-radius:18px;box-shadow:0 24px 60px #0004}.member-sheet-handle{display:none}}
/* Delete Workspace, the last row of Group info's Settings (the Founder, 22 October 2026): the danger colour, icon and word. */
.group-info-row.group-info-danger,.group-info-row.group-info-danger > .icon:first-child{color:var(--red,#bd3551)}