/* AnyTalk identity v2 — the language picker.

   LanguagePopUp ships its own <style> block, which is global and unscoped: it dresses the card
   for the six legacy pages that open it. This file dresses the same markup for the rebranded
   pages instead, and applies only when the component is asked for it (Rebranded="true"), which
   puts .at-v2 .at-lang-v2 on the overlay. Every rule here is a class deeper than the one it
   replaces, so it wins wherever it applies and changes nothing anywhere else.

   The card is the kit's floating panel: inset, deeply rounded, corner light at the top left. A
   language row is a slate pill — the flag is the only colour in it, which is the point of the
   row, so nothing else in it competes. */

.at-lang-v2.popup-overlay {
    align-items: center;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    background: rgba(0, 4, 7, 0.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.at-lang-v2 .popup-content {
    width: min(24rem, 100%);
    max-height: min(90%, 40rem);
    padding: 1.5rem 1.15rem 1.15rem;
    border: 1px solid rgba(129, 174, 183, 0.20);
    border-radius: var(--at-radius-xl);
    background:
        radial-gradient(circle at 14% 0%, rgba(49, 225, 208, 0.10), transparent 30%),
        radial-gradient(circle at 94% 88%, rgba(49, 168, 255, 0.06), transparent 38%),
        linear-gradient(160deg, rgba(16, 29, 37, 0.985), rgba(4, 10, 14, 0.99));
    box-shadow: var(--at-shadow-drawer), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    color: var(--at-text-primary);
    text-align: start;
    scrollbar-gutter: stable;
}

    .at-lang-v2 .popup-content::-webkit-scrollbar {
        width: 6px;
    }

    .at-lang-v2 .popup-content::-webkit-scrollbar-thumb {
        border-radius: var(--at-radius-pill);
        background: rgba(129, 174, 183, 0.28);
    }

/* The rounded-square control from the kit, in place of the bare ✕. 44px so it stays a
   comfortable target on a phone. */
.at-lang-v2 .close-button {
    top: 0.7rem;
    right: 0.7rem;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(154, 168, 178, 0.22);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(24, 39, 48, 0.82), rgba(10, 19, 25, 0.88));
    color: var(--at-text-secondary);
    font-size: 1rem;
    line-height: 1;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

    .at-lang-v2 .close-button:hover {
        border-color: rgba(49, 225, 208, 0.48);
        background: linear-gradient(180deg, rgba(30, 49, 59, 0.94), rgba(13, 25, 32, 0.94));
        color: var(--at-text-primary);
    }

    .at-lang-v2 .close-button:active {
        transform: scale(0.95);
    }

.at-lang-v2 .language-list {
    display: grid;
    gap: 7px;
    margin: 3.1rem 0 0;
}

/* Same row as the navigation drawer: slate pill, mint label when it is the current choice,
   never a filled brand block. */
.at-lang-v2 .language-item {
    min-height: 54px;
    gap: 14px;
    margin-bottom: 0;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: rgba(21, 35, 45, 0.55);
    color: var(--at-text-secondary);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

    .at-lang-v2 .language-item:hover {
        background: var(--at-active-gradient);
        border-color: rgba(129, 174, 183, 0.18);
        color: var(--at-text-primary);
    }

    .at-lang-v2 .language-item:active {
        transform: scale(0.985);
    }

    .at-lang-v2 .language-item:focus-visible {
        outline: none;
        box-shadow: var(--at-focus-ring);
    }

/* Circular, with a hairline so a flag whose edge is white or near-white still reads as a
   distinct object against the pill. */
.at-lang-v2 .language-flag {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    margin-right: 0;
    border-radius: 50%;
    border: 1px solid rgba(129, 174, 183, 0.28);
    object-fit: cover;
}

.at-lang-v2 #normalbutton {
    width: 100%;
    min-height: 46px;
    margin-top: 1.15rem;
    padding: 0 1rem;
    border: 1px solid rgba(154, 168, 178, 0.22);
    border-radius: var(--at-radius-pill);
    background: linear-gradient(180deg, rgba(24, 39, 48, 0.82), rgba(10, 19, 25, 0.88));
    color: var(--at-text-primary);
    font-weight: 500;
    transition: border-color 150ms ease, background 150ms ease;
}

    .at-lang-v2 #normalbutton:hover {
        border-color: rgba(49, 225, 208, 0.48);
        background: linear-gradient(180deg, rgba(30, 49, 59, 0.94), rgba(13, 25, 32, 0.94));
    }

@media (prefers-reduced-motion: reduce) {
    .at-lang-v2 .popup-content,
    .at-lang-v2 .language-item,
    .at-lang-v2 .close-button {
        transition: none;
    }
}