/* ============================================================
   Groups Panel — Inline list mounted into the Groups tab host
   (Legacy `.groups-panel-overlay` full-viewport overlay removed.)
   ============================================================ */

/* ---- Inline (tab) Mount — used by the Groups tab host ---- */
.groups-tab-host {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: var(--bg-color, transparent);
    overflow: hidden;
}

/* Ensure the host actually shows when its parent tab is active */
#tab-content-groups {
    display: none;
    flex-direction: column;
    overflow: hidden;
}
#tab-content-groups.active {
    display: flex;
}

/* In inline mode the whole .gp-header is redundant — the tab label already
   says "Groups", and there's no overlay to dismiss. Hide the entire header. */
.groups-tab-host .gp-header {
    display: none;
}

/* Tighten toolbar padding now that the header is gone */
.groups-tab-host .gp-toolbar {
    padding-top: 14px;
}

/* Make the list region flex-fill the remaining tab height */
.groups-tab-host #gpList,
.groups-tab-host .gp-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---- Header ---- */
.gp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    flex-shrink: 0;
}

.gp-header-left h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary, #e4e4e7);
    margin: 0;
}

.gp-header-left p {
    font-size: 0.85rem;
    color: var(--text-muted, #71717a);
    margin: 6px 0 0;
}

.gp-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-hover, #1a1a1d);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    color: var(--text-secondary, #a1a1aa);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.gp-close-btn:hover {
    background: var(--surface-active, #27272a);
    color: var(--text-primary, #e4e4e7);
}

/* ---- Toolbar ---- */
.gp-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    flex-shrink: 0;
}

.gp-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.gp-search-wrapper i {
    position: absolute;
    left: 14px;
    color: var(--text-muted, #71717a);
    font-size: 0.85rem;
    pointer-events: none;
}

.gp-search-input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    background: var(--input-bg, #18181b);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary, #e4e4e7);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    min-height: 42px;
}

.gp-search-input::placeholder {
    color: var(--text-muted, #71717a);
}

.gp-search-input:focus {
    border-color: var(--accent, #3bf692);
}

.gp-search-clear {
    position: absolute;
    right: 8px;
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted, #71717a);
    cursor: pointer;
    border-radius: 50%;
    font-size: 0.8rem;
}

.gp-search-clear.visible {
    display: flex;
}

.gp-search-clear:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.gp-sort-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.gp-sort-label {
    font-size: 0.8rem;
    color: var(--text-muted, #71717a);
    white-space: nowrap;
}

/* MOBILE-ONLY glyph. Hidden by default: on desktop the visible "Sort by:" label
   is what identifies the control, so showing this too would put a redundant
   second sort icon in the toolbar (it would also lay out as an ordinary in-flow
   flex item between the label and the select). It is revealed — and absolutely
   positioned inside .gp-sort-wrapper — only in the <=768px block, where the
   label is hidden and the glyph takes over that job. */
.gp-sort-icon {
    display: none;
}

.gp-sort-select {
    padding: 8px 12px;
    background: var(--input-bg, #18181b);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 8px);
    color: var(--text-primary, #e4e4e7);
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
    min-height: 42px;
}

.gp-new-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--accent, #3bf692) 0%, #60a5fa 60%, #2563eb 100%);
    border: 1px solid rgba(59, 246, 146, 0.2);
    border-radius: var(--radius-md, 8px);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    min-height: 42px;
}

.gp-new-btn:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(59, 246, 146, 0.35);
}

.gp-new-btn:active {
    transform: scale(0.98);
}

/* ---- List Container ---- */
.gp-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 28px;
}

/* ---- Group Row ---- */
/* ── Enterprise console table (plan tmp/plan-groups-panel-enterprise.md) ──
   Shared 5-column grid template between the header row and every group row:
   [group] [sessions] [activity] [chat] [chevron]. The expanded detail band
   and color picker span the full width (grid-column 1/-1).
   Columns are SHRINKABLE (minmax) and the host is a size container — the
   groups tab lives in the RESIZABLE response pane, which can be far
   narrower than the viewport while the <=768px media query stays inactive
   (Codex review: fixed columns overflowed a narrow pane). */
.groups-tab-host {
    container-type: inline-size;
}

.gp-table-head,
.gp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(56px, 90px) minmax(72px, 110px) minmax(104px, 150px) 28px;
    gap: 12px;
    align-items: center;
}

/* Narrow PANE (not viewport): drop the Activity column so Group/Sessions/
   Chat keep breathing room. Desktop-only — the <=768px media block below
   owns the mobile layout (incl. folding activity into the meta line). */
@media (min-width: 769px) {
    @container (max-width: 560px) {
        .gp-table-head,
        .gp-row {
            grid-template-columns: minmax(0, 1fr) minmax(56px, 90px) minmax(104px, 150px) 28px;
        }

        .gp-table-head span:nth-child(3),
        .gp-row .gp-row-time {
            /* .gp-row qualifier outranks the base .gp-row-time rule that
               appears LATER in the file (same specificity would lose) */
            display: none;
        }
    }
}

.gp-table-head {
    /* horizontal padding mirrors .gp-list (28px) so columns align with rows */
    padding: 8px 28px;
    border-bottom: 1px solid var(--border, #27272a);
    font-family: var(--font-mono, monospace);
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted, #71717a);
}

.gp-th-right {
    text-align: right;
}

.gp-row {
    padding: 13px 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.gp-row:hover {
    background: var(--surface-hover, rgba(255, 255, 255, 0.03));
}

.gp-row:last-child {
    border-bottom: none;
}

.gp-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.gp-row-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gp-row-info {
    flex: 1;
    min-width: 0;
}

.gp-row-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #e4e4e7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-row-desc {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted, #71717a);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sessions column — right-aligned tabular numerals; the column header
   provides the label on desktop, so the per-row label hides there
   (mobile shows it again — no header at that width) */
.gp-row-count {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.gp-row-count-num {
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary, #e4e4e7);
}

.gp-row-count-label {
    display: none;
    font-size: 0.62rem;
    color: var(--text-muted, #71717a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gp-row-time {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.gp-row-time-val {
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    color: var(--text-secondary, #a1a1aa);
    white-space: nowrap;
}

.gp-row-time-label {
    display: none;
    font-size: 0.62rem;
    color: var(--text-muted, #71717a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Chat — THE highlighted affordance: solid brand purple labeled button.
   Keeps the legacy .gp-row-icon class (delegation contract) with the
   compound .gp-chat-btn winning specificity over legacy + light overrides. */
.gp-row-icon.gp-chat-btn {
    --gp-chat: #7c3aed;
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--gp-chat);
    border: none;
    border-radius: var(--radius-md, 8px);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    flex-shrink: 0;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.gp-row-icon.gp-chat-btn i {
    font-size: 0.9rem;
}

.gp-row-icon.gp-chat-btn:hover {
    filter: brightness(1.15);
}

.gp-row-icon.gp-chat-btn:active {
    transform: scale(0.98);
}

/* Expand/collapse chevron indicator */
.gp-row-chevron {
    font-size: 0.7rem;
    color: var(--text-muted, #71717a);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.gp-row.expanded .gp-row-chevron {
    transform: rotate(180deg);
    color: var(--text-secondary, #a1a1aa);
}

/* ---- Expanded detail band: stat chips + recent sessions + toolbar ---- */
/* Subtle wash only — --surface-hover is a SOLID (#27272a dark) that turns
   the expanded row into a heavy slab (approved mockup used ~2% white). */
.gp-row.expanded {
    background: rgba(255, 255, 255, 0.02);
}

/* The band is a CONTAINED inset card (approved mockup): bordered, rounded,
   symmetric padding — content (incl. Delete / "all N →") never hugs the
   row edge. */
.gp-detail-band {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 6px 0 2px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    border-radius: 12px;
    min-width: 0;
}

.gp-stat-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gp-stat-chip {
    font-family: var(--font-mono, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 0.66rem;
    color: var(--text-secondary, #a1a1aa);
    background: var(--input-bg, #121214);
    border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.07));
    border-radius: var(--radius-full, 999px);
    padding: 3px 10px;
    white-space: nowrap;
}

.gp-recent {
    border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.07));
    border-radius: 10px;
    overflow: hidden;
}

.gp-recent-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.04));
    min-width: 0;
}

.gp-recent-time {
    font-family: var(--font-mono, monospace);
    font-size: 0.66rem;
    color: var(--text-muted, #71717a);
    flex-shrink: 0;
    min-width: 56px;
}

.gp-recent-name {
    font-size: 0.8rem;
    color: var(--text-primary, #e4e4e7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-recent-all {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    padding: 7px 12px;
    background: transparent;
    border: none;
    color: var(--accent-light, #60a5fa);
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s;
}

.gp-recent-all:hover {
    background: var(--surface-hover, rgba(255, 255, 255, 0.04));
}

.gp-recent-all i {
    font-size: 0.62rem;
}

.gp-row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Base action button */
.gp-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--radius-md, 8px);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Quiet outlined toolbar buttons (replaces the gradient pills) */
.gp-action-quiet {
    background: transparent;
    border: 1px solid var(--border, #27272a);
    color: var(--text-primary, #e4e4e7);
}

.gp-action-quiet i {
    color: var(--text-secondary, #a1a1aa);
}

.gp-action-quiet:hover {
    background: var(--surface-hover, rgba(255, 255, 255, 0.05));
}

.gp-action-quiet:active {
    transform: scale(0.97);
}

/* Danger/delete — isolated at the far right, red outline */
.gp-action-danger {
    margin-left: auto;
    background: var(--error-dim, rgba(239, 68, 68, 0.06));
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: var(--error, #ef4444);
}

.gp-action-danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.gp-action-danger:active {
    transform: scale(0.97);
}

/* Color picker dots */
.gp-color-picker {
    grid-column: 1 / -1;
    display: none;
    gap: 6px;
    padding: 8px 0 0 21px;
    flex-wrap: wrap;
    min-width: 0;
}

.gp-row.color-picking .gp-color-picker {
    display: flex;
}

.gp-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.gp-color-dot:hover {
    transform: scale(1.2);
}

.gp-color-dot.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* ---- Footer ---- */
/* Mobile-only "New Group" bar — the desktop toolbar keeps .gp-new-btn instead.
   Shown (and fully documented) inside the @media (max-width: 768px) block. */
.gp-create-bar {
    display: none;
}

.gp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    /* Reserve the Android/iOS bottom system-bar inset so the count + pagination are not
       occluded by the nav bar — the footer is the bottom-pinned flex child of the
       full-viewport Groups tab. Resolves to 12px on web/desktop (inset = 0). */
    padding-bottom: calc(12px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    flex-shrink: 0;
}

.gp-footer-count {
    font-size: 0.75rem;
    color: var(--text-muted, #71717a);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gp-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

.gp-page-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-sm, 6px);
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}

.gp-page-btn:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.gp-page-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.gp-page-btn.active {
    background: var(--accent, #3bf692);
    color: #000;
    border-color: var(--accent);
    font-weight: 600;
}

/* ---- Empty State ---- */
.gp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 60px 28px;
    text-align: center;
}

.gp-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-hover, rgba(255, 255, 255, 0.04));
    border-radius: 50%;
    margin-bottom: 20px;
    font-size: 2rem;
    color: var(--text-muted, #71717a);
}

.gp-empty h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary, #e4e4e7);
    margin: 0 0 8px;
}

.gp-empty p {
    font-size: 0.9rem;
    color: var(--text-muted, #71717a);
    margin: 0 0 24px;
    max-width: 320px;
}

.gp-empty-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--accent, #3bf692) 0%, #60a5fa 60%, #2563eb 100%);
    border: 1px solid rgba(59, 246, 146, 0.2);
    border-radius: var(--radius-md, 8px);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.2s;
}

.gp-empty-cta:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    .gp-header {
        padding: 18px 16px 14px;
    }

    .gp-toolbar {
        /* NOWRAP is load-bearing: search + sort must share ONE line.
           `wrap` is inherited from when this toolbar held THREE items (search,
           sort, New Group). New Group now lives in .gp-create-bar at the bottom,
           so only two remain — and with the search wrapper on `flex: 1 1 auto`
           its hypothetical main size is its CONTENT width, which together with
           the sort pill exceeds 343px and made the browser wrap sort onto a
           second line. Measured at 375px before this fix: search y=117 (w=343,
           the whole row), sort y=169. Shrinking is what should absorb the
           overflow here, not wrapping — `min-width: 0` on the search wrapper
           is what lets that happen. */
        flex-wrap: nowrap;
        padding: 10px 16px;
        gap: 8px;
    }

    /* SEARCH — grow to fill the row.
       The previous rule here was `width: 100%`, which could never work: the base
       rule sets `flex: 1` (i.e. flex-basis 0%), and for a flex item the FLEX BASIS —
       not `width` — determines the main size. So the search box never claimed a
       full-width line and all three controls stayed crammed onto one row (measured
       at 375px: search 102px, sort 53px with its label clipped by 66px).
       `min-width: 0` is required: a flex item defaults to `min-width: auto`, which
       refuses to shrink below its content and would re-introduce the overflow. */
    .gp-search-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }

    .gp-search-input {
        min-height: 44px;   /* touch target (was 42px) */
    }

    /* SORT — a labelled pill that never truncates. `flex: 0 0 auto` (NOT the old
       `flex: 1`, which is what let it collapse to 53px and clip "Most Recently
       Used" down to "Mo⌄"). The option LABELS were shortened in the fragment so
       the widest one fits; their VALUES are unchanged, so groupsPanel.js's
       `change` handler still switches on the same five strings. */
    .gp-sort-wrapper {
        order: 2;
        flex: 0 0 auto;
        position: relative;
    }

    /* "Sort by:" is redundant once the pill shows the current value, and it cost
       ~60px of a 343px row. The select carries aria-label="Sort groups" so the
       accessible name survives hiding this. */
    .gp-sort-label {
        display: none;
    }

    .gp-sort-icon {
        display: block;         /* base rule hides it — this is the mobile-only reveal */
        position: absolute;
        left: 11px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.8rem;
        color: var(--text-muted, #71717a);
        pointer-events: none;   /* never eat the tap meant for the select */
    }

    .gp-sort-select {
        min-height: 44px;       /* touch target */
        padding-left: 30px;     /* clears .gp-sort-icon */
    }

    /* New Group moves out of the toolbar into .gp-create-bar at the bottom.
       Hiding it does NOT break its click listener — groupsPanel.js binds the same
       shared createHandler to #gpNewBtn, #gpEmptyCta and #gpCreateBarBtn. */
    .gp-new-btn {
        display: none;
    }

    .gp-list {
        padding: 0 16px;
    }

    /* Mobile: no column header; rows collapse to two lines with the chat
       button spanning both on the right — [name | chat] / [meta | chat] */
    .gp-table-head {
        display: none !important;
    }

    .gp-row {
        grid-template-columns: minmax(0, 1fr) auto 96px;
        grid-template-areas:
            "main main chat"
            "count time chat";
        gap: 6px 12px;
        padding: 12px 0;
    }

    .gp-row-main {
        grid-area: main;
    }

    .gp-row-count {
        grid-area: count;
        justify-content: flex-start;
        align-items: baseline;
        gap: 4px;
    }

    .gp-row-count-label {
        display: inline;
    }

    /* Activity sits beside the count on the meta line */
    .gp-row-time {
        grid-area: time;
        justify-content: flex-end;
    }

    .gp-row-icon.gp-chat-btn {
        grid-area: chat;
        height: 40px;
        align-self: center;
    }

    .gp-row-chevron {
        display: none;
    }

    /* Band keeps its own symmetric card padding on mobile — only the
       color picker's desktop indent gets flattened here */
    .gp-detail-band,
    .gp-color-picker {
        grid-column: 1 / -1;
    }

    .gp-color-picker {
        padding-left: 0;
    }

    .gp-action-danger {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    /* BOTTOM-EDGE RESERVE IS HANDED OVER TO .gp-create-bar AT THIS BREAKPOINT.
       The footer is no longer the bottom-most flex child on mobile, so it must NOT
       also reserve the system-bar inset — reserving it in both places would
       double-count the inset and needlessly shrink #gpList. The base rule (~line
       626) keeps its own inset for desktop, where .gp-create-bar is display:none
       and the footer IS still the bottom-most child. */
    .gp-footer {
        padding: 10px 16px;
    }

    /* CREATE BAR — the mobile home of "New Group".
       Deliberately a FLEX SIBLING, not position:fixed. #groupsTabHost is a
       height-constrained flex column whose only `flex: 1 1 auto` child is #gpList,
       so this bar simply makes the list shrink — no viewport math and no
       FAB-reserve arithmetic, which is the bug class that twice ate a scrollport
       on this app.
       CLEARANCE (measured in-browser, then re-measured after implementing —
       the first value was WRONG). #mobileResizeHandle is position:absolute;
       top:-12px; height:28px on .pane-input, is pointer-events:auto, lives OUTSIDE
       any tab, and owns every tap in its band. At 375x812 it starts at y=800 while
       #groupsTabHost ends at y=815 — so the handle intrudes ~15px above the host's
       bottom edge, NOT the 12px its own `top:-12px` implies.
       A first attempt used 14px and measured button-bottom=801 vs handle-top=800:
       the centre of the button hit-tested fine while its BOTTOM EDGE and both
       bottom corners returned #mobileResizeHandle — a 1px dead strip that a
       centre-only check would have passed. 22px puts the button's bottom at ~793,
       a ~7px margin that survives the small host-height variation observed
       (810 -> 815) as the column reflows.
       If this is ever retuned, re-probe the button's LOWER EDGE and CORNERS, not
       its centre. */
    .gp-create-bar {
        display: block;
        flex: 0 0 auto;
        padding: 10px 16px calc(22px + var(--app-safe-bottom));
        border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
        background: var(--panel-bg);
    }

    .gp-create-bar-btn {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 18px;
        background: linear-gradient(135deg, var(--accent, #3bf692) 0%, #60a5fa 60%, #2563eb 100%);
        border: 1px solid rgba(59, 246, 146, 0.2);
        border-radius: var(--radius-md, 8px);
        color: #fff;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .gp-create-bar-btn:active {
        transform: translateY(1px);
    }
}

/* ============================================================
   LIGHT THEME OVERRIDES
   ============================================================ */
html.light-theme .groups-tab-host {
    background: var(--bg-color, #f8f2ed);
}

html.light-theme .gp-close-btn {
    background: var(--surface-hover, #efe7df);
    border-color: var(--border, rgba(0, 0, 0, 0.08));
}

html.light-theme .gp-search-input {
    background: var(--input-bg, #f3ece5);
    border-color: var(--border, rgba(0, 0, 0, 0.1));
}

html.light-theme .gp-sort-select {
    background: var(--input-bg, #f3ece5);
    border-color: var(--border, rgba(0, 0, 0, 0.1));
}

html.light-theme .gp-row:hover {
    background: var(--surface-hover, #efe7df);
}

/* Expanded stays a subtle wash in light theme too (solid #efe7df slabs) */
html.light-theme .gp-row.expanded {
    background: rgba(0, 0, 0, 0.025);
}

html.light-theme .gp-row-icon {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
}

html.light-theme .gp-row-icon:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.3);
}

/* The chat BUTTON stays solid purple in light theme too — the compound
   selector outranks the legacy .gp-row-icon tint above (Codex plan #4).
   #7c3aed on #fff text = 5.2:1 (AA). */
html.light-theme .gp-row-icon.gp-chat-btn,
html.light-theme .gp-row-icon.gp-chat-btn:hover {
    background: var(--gp-chat, #7c3aed);
    border-color: transparent;
    color: #fff;
}

html.light-theme .gp-table-head {
    border-bottom-color: var(--border, rgba(0, 0, 0, 0.1));
}

html.light-theme .gp-color-dot.active {
    border-color: #333;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

html.light-theme .gp-page-btn.active {
    background: var(--accent, #1aab8a);
    color: #fff;
    border-color: var(--accent);
}

html.light-theme .gp-empty-icon {
    background: var(--surface-hover, #efe7df);
}