/*
 * Groups (SOCIAL group chat) — small additions on top of messages.css. The chat
 * column, bubbles, composer and pickers are ALL reused from messages.css (.gtx-chat*,
 * .gtx-msg*, .gtx-composer*, .gtx-picker*); this file only adds the group list, the
 * create form, the per-message sender label and the two-column room (chat + member
 * sidebar). Theme-aware via the shared design tokens.
 */

.gtx-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

.gtx-groups__create {
    padding: var(--space-4, 1rem);
}

.gtx-groups__subtitle,
.gtx-grouproom__subtitle {
    margin: 0 0 var(--space-3, 0.75rem);
    font-size: 0.95rem;
    font-weight: 600;
}

.gtx-groups__form {
    display: flex;
    gap: var(--space-2, 0.5rem);
    align-items: center;
}

.gtx-groups__form .gtx-input {
    flex: 1 1 auto;
}

/* The sender label above a group message bubble (only on others' messages). */
.gtx-msg__sender {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-accent, #6ea8fe);
    margin-bottom: 0.15rem;
}

/* Room layout: chat column + member sidebar, stacking on narrow viewports. */
.gtx-grouproom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--space-4, 1rem);
    align-items: start;
}

/* TecXCord C2a: a server has a channel rail (left), the chat/voice (centre) and the
   member sidebar (right) — the Discord three-column look. */
.gtx-grouproom--server {
    grid-template-columns: 15rem minmax(0, 1fr) 16rem;
}

.gtx-grouproom__channels {
    padding: var(--space-3, 0.75rem);
    position: sticky;
    top: var(--space-4, 1rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.gtx-grouproom__server-head {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding-bottom: var(--space-3, 0.75rem);
    border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
}

.gtx-grouproom__server-meta {
    min-width: 0;
}

.gtx-grouproom__server-name {
    display: block;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtx-grouproom__server-desc {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gtx-channels {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.gtx-channels__item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-2, 0.5rem);
    color: var(--color-text-muted, #b8c0cc);
    text-decoration: none;
    line-height: 1.2;
}

.gtx-channels__item:hover {
    background: var(--color-surface-2, rgba(255, 255, 255, 0.06));
    color: var(--color-text, #e8ecf1);
}

.gtx-channels__item.is-active {
    background: var(--color-surface-3, rgba(255, 255, 255, 0.1));
    color: var(--color-text, #fff);
    font-weight: 600;
}

.gtx-channels__glyph {
    flex: 0 0 auto;
    opacity: 0.7;
}

.gtx-channels__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtx-channels__manage {
    flex: 0 0 auto;
    opacity: 0;
}

.gtx-channels__item:hover .gtx-channels__manage,
.gtx-channels__item:focus-within .gtx-channels__manage {
    opacity: 1;
}

.gtx-channels__del {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.25rem;
}

.gtx-channels__create {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    padding-top: var(--space-3, 0.75rem);
    border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
}

.gtx-channels__create .gtx-input {
    flex: 1 1 6rem;
    min-width: 0;
}

.gtx-grouproom__settings {
    margin-top: var(--space-3, 0.75rem);
}

.gtx-grouproom__settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    margin: var(--space-2, 0.5rem) 0;
}

.gtx-voiceroom {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6, 2rem);
}

.gtx-voiceroom__panel {
    width: 100%;
    max-width: 22rem;
    text-align: center;
}

.gtx-grouproom__chat {
    min-width: 0;
}

.gtx-grouproom__side {
    padding: var(--space-4, 1rem);
    position: sticky;
    top: var(--space-4, 1rem);
}

.gtx-grouproom__members {
    list-style: none;
    margin: 0 0 var(--space-3, 0.75rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.gtx-grouproom__member {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.gtx-grouproom__member-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtx-grouproom__add {
    display: flex;
    gap: var(--space-2, 0.5rem);
    align-items: center;
    margin-top: var(--space-2, 0.5rem);
}

.gtx-grouproom__add .gtx-input {
    flex: 1 1 auto;
    min-width: 0;
}

.gtx-grouproom__leave {
    margin-top: var(--space-2, 0.5rem);
}

/* Multi-party voice room (mesh WebRTC): a small panel above the member list. */
.gtx-voice {
    margin-bottom: var(--space-4, 1rem);
    padding-bottom: var(--space-4, 1rem);
    border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
}

.gtx-voice__active {
    margin-top: var(--space-2, 0.5rem);
}

.gtx-voice__list {
    list-style: none;
    margin: 0 0 var(--space-2, 0.5rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.gtx-voice__participant {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gtx-voice__participant::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-success, #4ade80);
}

.gtx-voice__participant.is-you::before {
    background: var(--color-accent, #6ea8fe);
}

.gtx-voice__controls {
    display: flex;
    gap: var(--space-2, 0.5rem);
}

.gtx-voice__status {
    margin: var(--space-2, 0.5rem) 0 0;
}

.gtx-groups__desc {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 64rem) {
    .gtx-grouproom--server {
        grid-template-columns: 13rem minmax(0, 1fr);
    }

    .gtx-grouproom--server .gtx-grouproom__side {
        grid-column: 1 / -1;
    }
}

@media (max-width: 48rem) {
    .gtx-grouproom,
    .gtx-grouproom--server {
        grid-template-columns: minmax(0, 1fr);
    }

    .gtx-grouproom__side,
    .gtx-grouproom__channels {
        position: static;
    }
}

/* --- TecXCord Wave D2: roles & permissions ------------------------------- */

/* Private-channel lock glyph in the channel list. */
.gtx-channels__lock {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.7;
}

.gtx-channels__item--private .gtx-channels__name {
    font-style: italic;
}

/* Per-channel access (privacy) control in the channel rail. */
.gtx-channels__privacy {
    margin-top: var(--space-3, 0.75rem);
    border-top: 1px solid var(--color-border, #2b2f36);
    padding-top: var(--space-2, 0.5rem);
}

.gtx-channels__privacy-summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-text-muted, #99a0ab);
}

.gtx-channels__privacy-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-2, 0.5rem);
}

/* Read-only composer notice (no send permission). */
.gtx-composer--readonly {
    padding: var(--space-3, 0.75rem);
    color: var(--color-text-muted, #99a0ab);
    font-size: 0.85rem;
    text-align: center;
    font-style: italic;
}

/* A small role colour swatch + chip. */
.gtx-role-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color-text-muted, #8b9199);
    flex: 0 0 auto;
    vertical-align: middle;
}

.gtx-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--color-border, #2b2f36);
    border-radius: 999px;
    font-size: 0.8rem;
}

.gtx-role-chip__remove {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

/* Checkbox groups (role permissions, channel allow-list). */
.gtx-check-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border: 0;
    margin: 0;
    padding: 0;
}

.gtx-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.gtx-input--color {
    width: 2.5rem;
    height: 2.25rem;
    padding: 0.15rem;
    cursor: pointer;
}

.gtx-badge--muted {
    background: var(--color-surface-2, #2b2f36);
    color: var(--color-text-muted, #99a0ab);
}

/* Role-management screen. */
.gtx-roles {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--space-4, 1rem);
}

.gtx-roles__head {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
}

.gtx-roles__title {
    margin: 0;
    font-size: 1.25rem;
}

.gtx-roles__section {
    padding: var(--space-4, 1rem);
}

.gtx-roles__subtitle {
    margin: 0 0 var(--space-3, 0.75rem);
    font-size: 1rem;
}

.gtx-roles__form,
.gtx-roles__assign {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.gtx-roles__form-row {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.gtx-roles__list,
.gtx-roles__members {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.gtx-roles__item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    border-top: 1px solid var(--color-border, #2b2f36);
    padding-top: var(--space-3, 0.75rem);
}

.gtx-roles__readonly {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gtx-roles__member {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-top: 1px solid var(--color-border, #2b2f36);
    padding-top: var(--space-2, 0.5rem);
}

.gtx-roles__member-id {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 12rem;
}

.gtx-roles__member-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.gtx-roles__roles-link {
    margin-top: var(--space-3, 0.75rem);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
}

/* ============================================================================
   TecXCord Wave D3 — channel CATEGORIES (collapsible) + UNREAD markers
   ========================================================================== */

/* A category section: an uppercase collapsible header + its channel body. */
.gtx-channels__cat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: var(--space-2, 0.5rem);
}

.gtx-channels__cat-head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gtx-channels__cat-toggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.25rem 0.35rem;
    color: var(--color-text-muted, #b8c0cc);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    min-width: 0;
}

.gtx-channels__cat-toggle:hover {
    color: var(--color-text, #e8ecf1);
}

.gtx-channels__cat-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* The chevron points down when expanded; rotates to a right-facing state when the
   category is collapsed. */
.gtx-channels__cat-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    transition: transform var(--gtx-t-fast, 0.12s) ease;
}

.gtx-channels__cat.is-collapsed .gtx-channels__cat-chevron {
    transform: rotate(-90deg);
}

/* Collapsing hides the channel body but keeps the header (Discord behaviour). */
.gtx-channels__cat.is-collapsed .gtx-channels__cat-body {
    display: none;
}

.gtx-channels__cat-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* Category management (gear → rename / move / delete) — managers only. */
.gtx-channels__cat-manage {
    flex: 0 0 auto;
    position: relative;
}

.gtx-channels__cat-gear {
    cursor: pointer;
    list-style: none;
    padding: 0 0.25rem;
    color: var(--color-text-muted, #b8c0cc);
    opacity: 0.6;
}

.gtx-channels__cat-gear::-webkit-details-marker {
    display: none;
}

.gtx-channels__cat-manage[open] .gtx-channels__cat-gear,
.gtx-channels__cat-gear:hover {
    opacity: 1;
}

.gtx-channels__cat-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) 0;
}

.gtx-channels__cat-rename {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
}

.gtx-channels__cat-rename .gtx-input {
    flex: 1 1 6rem;
    min-width: 0;
}

.gtx-channels__cat-row {
    display: flex;
    gap: var(--space-2, 0.5rem);
    align-items: center;
}

/* Create-category + assign-to-category controls sit under the create-channel form. */
.gtx-channels__cat-create {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    padding-top: var(--space-2, 0.5rem);
}

.gtx-channels__cat-create .gtx-input {
    flex: 1 1 6rem;
    min-width: 0;
}

.gtx-channels__assign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding-top: var(--space-2, 0.5rem);
}

.gtx-channels__assign .gtx-input {
    flex: 1 1 6rem;
    min-width: 0;
}

/* ----- Unread: bold name + a dot on the channel row -------------------------- */
.gtx-channels__item.is-unread .gtx-channels__name {
    color: var(--color-text, #fff);
    font-weight: 700;
}

.gtx-channels__unread {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text, #fff);
}