/* Group DMs (client/js/groupDms.js), what a block hides (client/js/blocking.js) and mutual servers
   and friends on profile cards (client/js/mutuals.js). Uses the theme tokens from styles.css, so
   the Light theme (client/appearance.css) covers it. */

/* ---- a group's icon: two members' avatars, one over the other ---- */
.group-icon { position: relative; width: 32px; height: 32px; flex: none; }
.group-icon .avatar { position: absolute; width: 20px; height: 20px; font-size: 10px; box-shadow: 0 0 0 2px var(--bg-sidebar); }
.group-icon .avatar:first-child { left: 0; top: 0; }
.group-icon .avatar:nth-child(2) { right: 0; bottom: 0; }
.group-icon.single .avatar { position: static; width: 32px; height: 32px; font-size: 14px; box-shadow: none; }
.group-icon.large { width: 80px; height: 80px; margin-bottom: 8px; }
.group-icon.large .avatar { width: 50px; height: 50px; font-size: 22px; box-shadow: 0 0 0 4px var(--bg-chat); }
.group-icon.large.single .avatar { width: 80px; height: 80px; font-size: 32px; box-shadow: none; }
.guild-icon.dm-rail-item .group-icon { width: 48px; height: 48px; }
.guild-icon.dm-rail-item .group-icon .avatar { width: 30px; height: 30px; font-size: 13px; box-shadow: 0 0 0 3px var(--bg-rail); }
.guild-icon.dm-rail-item .group-icon.single .avatar { width: 48px; height: 48px; }
.dm-row:hover .group-icon .avatar { box-shadow: 0 0 0 2px var(--bg-hover); }
.dm-row.active .group-icon .avatar { box-shadow: 0 0 0 2px var(--bg-active); }

/* ---- the open group: header, start of history ---- */
.chat-header .group-header-icon { width: 24px; height: 24px; }
.chat-header .group-header-icon .avatar { width: 15px; height: 15px; font-size: 8px; box-shadow: 0 0 0 2px var(--bg-chat); }
.chat-header .group-header-icon.single .avatar { width: 24px; height: 24px; font-size: 12px; }
.group-name-input { min-width: 0; max-width: 320px; background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 2px 6px; color: var(--text-strong); font: inherit; font-weight: 600; }
.group-name-input:hover { border-color: var(--border); background: var(--bg-input); }
.group-name-input:focus { border-color: var(--accent); background: var(--bg-input); outline: none; }
.group-name-input::placeholder { color: var(--text-strong); opacity: 1; }
.chat-header .group-add-friends { display: inline-flex; align-items: center; }
.group-dm-start h2 { margin-bottom: 4px; }

/* ---- Select Friends ---- */
.group-picker { width: 400px; max-width: calc(100vw - 32px); max-height: 460px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-sidebar); border-radius: 8px; padding: 16px; }
.group-picker .profile-section-title { margin: 0; color: var(--text-strong); font-size: 16px; text-transform: none; }
.group-picker-hint.error { color: var(--danger); }
.group-picker-input { width: 100%; }
.group-picker-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.group-picker-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 6px 8px; border-radius: 4px; color: var(--text); }
.group-picker-row:hover, .group-picker-row:focus-visible { background: var(--bg-hover); outline: none; }
.group-picker-row.picked { background: var(--bg-active); }
.group-picker-row .avatar .status { border-color: var(--bg-sidebar); }
.group-picker-row input[type='checkbox'] { margin-left: auto; pointer-events: none; accent-color: var(--accent); }
.group-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.group-picker-username { flex: none; }
.group-picker-empty { padding: 8px; }
.group-picker-footer { display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border); }
.group-picker-submit { width: 100%; }
.group-picker-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- group notices: "<name> added <name> to the group." ---- */
.message.group-notice .system-icon { color: var(--online); }
.message.group-notice.type-2 .system-icon { color: var(--danger); }
.message.group-notice.type-4 .system-icon { color: var(--text-muted); }

/* ---- blocked messages ---- */
.message.blocked-message { min-height: 0; padding-top: 0; padding-bottom: 0; }
.message.blocked-hidden { display: none; }
.message.blocked-collapsed { padding-top: 4px; padding-bottom: 4px; }
.blocked-bar { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 14px; }
/* The bar sits in the text column, above the run (the message is a gutter + body grid). */
.message > .blocked-bar { grid-column: 2; }
.message.from-blocked > .blocked-bar { margin-bottom: 4px; }
.blocked-toggle { color: var(--link); font-weight: 500; }
.message.blocked-message:hover { background: transparent; }

/* ---- mutual servers and friends on a profile card ---- */
.mutuals { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.mutual-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.mutual-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 0 6px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.mutual-tab:hover { color: var(--text); }
.mutual-tab.active { color: var(--text-strong); border-bottom-color: var(--text-strong); }
.mutual-list { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; }
.mutual-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 4px 6px; border-radius: 4px; color: var(--text); }
.mutual-row:hover, .mutual-row:focus-visible { background: var(--bg-hover); outline: none; }
.mutual-row .avatar { width: 28px; height: 28px; font-size: 12px; }
.mutual-guild-icon { width: 28px; height: 28px; flex: none; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--bg-active); color: var(--text-strong); font-size: 11px; font-weight: 700; }
.mutual-guild-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mutual-row-text { display: flex; flex-direction: column; min-width: 0; }
.mutual-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); font-size: 14px; }
.mutual-empty { padding: 6px; }