/* AnyTalk identity v2 — application chrome (top bar, drawer, navigation).
   Source: AnyTalk_Rebrand_Kit_v2/components/anytalk-navigation.css

   Scoped to .at-chrome-v2, which MainLayout puts on the layout root only while a
   rebranded new-version surface is open (see Constants/RebrandedSurfaces.cs). Everywhere else the
   application keeps the legacy teal chrome, so this file repaints nothing on its own.

   Rules are anchored on ids and classes written by MainLayout — #headerMainAny, #sidebar —
   rather than on Blazorise's own layout classes, which are not ours to depend on. The id
   also buys the specificity needed to win against the component-scoped stylesheets of
   NavMenu and NavGroup, whose scope attribute would otherwise outrank a plain class.

   Colour budget from the brand spec: ~80% near-black, ~15% raised slate, ~4% mint, ~1%
   electric blue. Teal is an accent here; the top bar is never a full-width teal band. */

.at-chrome-v2 {
    /* Metrics the token file leaves out because they only describe chrome. */
    --at-topbar-height: 76px;
    --at-icon-button-size: 46px;
    --at-drawer-width: 356px;
    --at-nav-item-height: 54px;

    background: var(--at-midnight);
}

/* Paint the browser safe area and overscroll canvas before the layout itself renders. The
   document class is emitted by App.razor on the first response and kept in sync by scripts.js
   after enhanced navigation, preventing Safari's default white canvas from showing as a line. */
html.at-document-v2,
body.at-document-v2 {
    min-height: 100%;
    background-color: #071117 !important;
}

body.at-document-v2 {
    min-height: 100vh;
    min-height: 100dvh;
}

body.at-document-v2::before {
    content: "";
    position: fixed;
    z-index: 999;
    inset: 0 0 auto;
    height: env(safe-area-inset-top, 0px);
    background: #071117;
    pointer-events: none;
}

.at-chrome-v2 {
    min-height: 100vh;
    min-height: 100dvh;
}

html.at-immersive-fallback,
html.at-immersive-fallback body {
    height: var(--at-visual-viewport-height, 100dvh);
    min-height: var(--at-visual-viewport-height, 100dvh);
    overflow: hidden;
}

html.at-immersive-fallback .at-chrome-v2 {
    height: var(--at-visual-viewport-height, 100dvh) !important;
    min-height: var(--at-visual-viewport-height, 100dvh) !important;
}

/* ---------------------------------------------------------------- top bar */

.at-chrome-v2 #headerMainAny {
    position: relative;
    z-index: 1000;
    min-height: calc(var(--at-topbar-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
    background: var(--at-chrome-gradient);
    border-bottom: 1px solid rgba(49, 225, 208, 0.18);
    box-shadow: var(--at-shadow-chrome);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
}

/* The hairline of mint under the bar, faded out at both ends so it reads as a highlight
   rather than as a second border. */
.at-chrome-v2 #headerMainAny::after {
    content: "";
    position: absolute;
    inset: auto 24% -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(49, 225, 208, 0.52), transparent);
}

.at-chrome-v2 #headerMainAny .row {
    align-items: center;
    min-height: var(--at-topbar-height);
    margin: 0;
}

/* Both side columns centre their control, so the lockup in the middle column stays
   optically centred even though the two sides hold different numbers of buttons. */
.at-chrome-v2 #headerMainAny .row > * {
    display: flex;
    align-items: center !important;
}

.at-chrome-v2 #headerMainAny .at-brand-lockup img {
    width: 39px;
    height: 39px;
}

.at-chrome-v2 #headerMainAny .at-wordmark {
    font-size: 24px;
}

/* ------------------------------------------------- rounded-square controls */

.at-chrome-v2 .at-icon-button {
    width: var(--at-icon-button-size);
    height: var(--at-icon-button-size);
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(154, 168, 178, 0.22);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(24, 39, 48, 0.82), rgba(10, 19, 25, 0.88));
    color: var(--at-text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 8px 24px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

    .at-chrome-v2 .at-icon-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));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 22px rgba(49, 225, 208, 0.10);
    }

    .at-chrome-v2 .at-icon-button:active {
        transform: scale(0.95);
    }

    /* app.css strips the border from every .btn on :focus and :active with !important, and
       Bootstrap replaces the ring with its own blue glow. Both are undone here so the focus
       state stays visible and stays in this palette. */
    .at-chrome-v2 .at-icon-button:focus,
    .at-chrome-v2 .at-icon-button:active,
    .at-chrome-v2 .at-icon-button:focus-visible {
        border-color: rgba(49, 225, 208, 0.48) !important;
        outline: none;
        box-shadow: var(--at-focus-ring);
    }

    .at-chrome-v2 .at-icon-button--accent {
        border-color: rgba(49, 225, 208, 0.46);
        color: var(--at-brand-bright) !important;
    }

    .at-chrome-v2 .at-icon-button .at-glyph {
        width: 24px;
        height: 24px;
    }

/* ----------------------------------------------------------------- drawer */

/* The kit's drawer floats over the page inset from every edge, so it is positioned against
   the viewport rather than against the layout's sider region. Width has to be !important:
   scripts.js writes 300px/0px inline as it opens and closes, and the transform and
   visibility on .sidebar are what actually take the panel off-screen. */
.at-chrome-v2 #sidebar.at-drawer {
    position: fixed;
    z-index: 1100;
    top: max(12px, env(safe-area-inset-top));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    width: min(var(--at-drawer-width), calc(100vw - 24px)) !important;
    height: auto;
    padding: 18px 14px 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    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);
    backdrop-filter: blur(30px) saturate(125%);
    -webkit-backdrop-filter: blur(30px) saturate(125%);
}

.at-chrome-v2 .at-drawer-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent !important;
    overflow-y: auto;
}

.at-chrome-v2 .at-drawer-head {
    min-height: 54px;
    padding: 0 2px 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .at-chrome-v2 .at-drawer-head .at-brand-lockup {
        text-decoration: none;
    }

    .at-chrome-v2 .at-drawer-head img {
        width: 42px;
        height: 42px;
    }

    .at-chrome-v2 .at-drawer-head .at-wordmark {
        font-size: 24px;
    }

.at-chrome-v2 .at-drawer-rule {
    height: 1px;
    margin: 15px 8px 18px;
    background: linear-gradient(90deg, rgba(49, 225, 208, 0.30), rgba(154, 168, 178, 0.10), transparent);
}

/* The scrim is appended to <body> by scripts.js, so it is a sibling of the layout root and
   cannot be reached from inside it. */
.at-chrome-v2 ~ .nav-menu-scrim {
    background: rgba(0, 4, 7, 0.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ------------------------------------------------------- navigation items */

.at-chrome-v2 #sidebar .navbar,
.at-chrome-v2 #sidebar .nav {
    padding: 0;
    margin-bottom: 0 !important;
}

.at-chrome-v2 #sidebar .nav-item {
    padding: 0 0 7px;
}

    .at-chrome-v2 #sidebar .nav-item:first-of-type {
        padding-top: 0;
    }

/* A row, a group heading, and the logout button are three different elements that have to
   read as one list, so they share this rule rather than each approximating it. */
.at-chrome-v2 #sidebar .nav-link,
.at-chrome-v2 #sidebar .nav-group-summary {
    min-height: var(--at-nav-item-height);
    height: auto;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 18px;
    color: var(--at-text-secondary);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-align: start;
    text-decoration: none;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

    .at-chrome-v2 #sidebar .nav-link:hover,
    .at-chrome-v2 #sidebar .nav-group-summary:hover {
        color: var(--at-text-primary);
        background: rgba(26, 42, 52, 0.60);
    }

    .at-chrome-v2 #sidebar .nav-link:active,
    .at-chrome-v2 #sidebar .nav-group-summary:active {
        transform: scale(0.985);
    }

/* Slate pill with a mint label — never a filled teal row, per the brand spec. */
.at-chrome-v2 #sidebar .nav-link.active {
    color: var(--at-brand-bright);
    background: var(--at-active-gradient);
    border-color: rgba(129, 174, 183, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px rgba(0, 0, 0, 0.18);
}

/* Group members keep the indent NavGroup gives them; the rule above would flatten it. */
.at-chrome-v2 #sidebar .nav-group .nav-item {
    padding-left: 10px;
}

.at-chrome-v2 #sidebar .nav-group[open] > .nav-group-summary {
    color: var(--at-text-primary);
}

/* Icons take the mint accent. Bootstrap's .text-white on the Blazorise icons carries
   !important, so this has to as well. */
.at-chrome-v2 #sidebar .nav-link i,
.at-chrome-v2 #sidebar .nav-group-summary i {
    color: var(--at-brand-mint) !important;
    filter: drop-shadow(0 0 8px rgba(49, 225, 208, 0.16));
}

.at-chrome-v2 #sidebar .nav-link img {
    filter: drop-shadow(0 0 8px rgba(49, 225, 208, 0.16));
}

/* The two .bi-* entries are white glyphs baked into a data URI, which nothing can recolour;
   the mint copies below replace them for the duration of the rebranded chrome. */
.at-chrome-v2 #sidebar .bi-person-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2331E1D0' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.at-chrome-v2 #sidebar .bi-arrow-bar-left-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FF6B7E' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.at-chrome-v2 #sidebar .bi-person-admin-tools {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2331E1D0' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

/* Sign out is the one destructive row in the list, so it answers in the danger colour. */
.at-chrome-v2 #sidebar form .nav-link {
    width: 100%;
}

    .at-chrome-v2 #sidebar form .nav-link:hover {
        color: #FF9BA8;
        background: rgba(255, 107, 126, 0.08);
    }

/* ------------------------------------------------------------ small phones */

@media (max-width: 380px) {
    .at-chrome-v2 {
        --at-topbar-height: 70px;
        --at-icon-button-size: 44px;
    }

    .at-chrome-v2 #headerMainAny {
        padding-inline: 12px;
    }

        .at-chrome-v2 #headerMainAny .at-brand-lockup img {
            width: 35px;
            height: 35px;
        }

        .at-chrome-v2 #headerMainAny .at-wordmark {
            font-size: 22px;
        }

    /* Below the width where a 28px radius still looks deliberate, the drawer squares off
       and takes the full width it can get. */
    .at-chrome-v2 #sidebar.at-drawer {
        top: env(safe-area-inset-top);
        bottom: env(safe-area-inset-bottom);
        left: 0;
        width: 100vw !important;
        border-radius: 0;
    }
}

@media (max-height: 560px) and (max-width: 950px) and (pointer: coarse) {
    .at-chrome-v2 {
        --at-topbar-height: 56px;
        --at-icon-button-size: 44px;
    }

    .at-chrome-v2 #headerMainAny {
        padding-inline: max(8px, env(safe-area-inset-left));
    }

    .at-chrome-v2 #headerMainAny .at-brand-lockup img {
        width: 32px;
        height: 32px;
    }

    .at-chrome-v2 #headerMainAny .at-wordmark {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .at-chrome-v2 .at-icon-button,
    .at-chrome-v2 #sidebar .nav-link,
    .at-chrome-v2 #sidebar .nav-group-summary {
        transition: none;
    }
}