/* =====================================================================================================
   THE TOP BAR — one bar for the whole product
   Loaded by BOTH the app (App.razor) and the server-rendered settings pages (_Layout.cshtml), and drawn
   from the same markup in both (Chatbot.razor and _TopBar.cshtml), so crossing between the chat and
   its settings changes nothing in the bar but which item is highlighted.

   Everything here is stated rather than inherited — box model, font, sizes, heights — because the two
   pages sit on different stylesheets underneath (MudBlazor's reset on one, the account styles on the
   other), and anything left to inherit would be a pixel that moves on the way across.
   ===================================================================================================== */
.sat-topbar {
    --sat-navy: #1E3A5F;
    --sat-navy-soft: #E6ECF4;

    position: relative;
    z-index: 30;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
    height: 64px;
    margin: 0;
    padding: 0 24px;
    background: var(--sat-navy);
    color: #fff;
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
}

.sat-topbar *,
.sat-topbar *::before,
.sat-topbar *::after {
    box-sizing: border-box;
}

/* ---- The name ---- */
.sat-brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 11px;
    color: #fff;
    text-decoration: none;
}

.sat-brand img {
    display: block;
    width: 36px;
    height: 36px;
}

.sat-brand-text {
    display: flex;
    flex-direction: column;
}

.sat-brand-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.sat-brand-tagline {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 500;
}

/* ---- Where you can go ---- */
/* Pushed to the right, beside the actions: the name alone on the left, everything you press on the
   right, where the hand already is for New chat and the account. */
.sat-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 0 auto;
    padding: 0;
}

/* The wrappers a menu comes in — MudMenu's div in the app, a <details> on the settings pages — must
   not add a box of their own, or the item inside them sits a pixel off its neighbours. */
.sat-nav > .mud-menu,
.sat-nav > details {
    display: inline-flex;
    position: relative;
}

.sat-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    font: inherit;
    font-size: 14px;
    /* One weight in every state: a heavier current item would reflow the row as you move along it. */
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.sat-link::-webkit-details-marker {
    display: none;
}

.sat-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.sat-link--on,
.sat-link--on:hover {
    background: #fff;
    color: var(--sat-navy);
}

.sat-icon {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.sat-caret {
    width: 16px;
    height: 16px;
    margin-left: -2px;
    transition: transform 0.18s ease;
}

details[open] > .sat-link .sat-caret,
details[open] > .sat-profile .sat-caret {
    transform: rotate(180deg);
}

/* ---- New chat and the account, on the right ---- */
/* A hairline between where you can go and what you can do, so the two groups read as two. */
.sat-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.sat-actions > .mud-menu,
.sat-actions > details {
    display: inline-flex;
    position: relative;
}

.sat-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: var(--sat-navy);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.sat-cta:hover {
    background: var(--sat-navy-soft);
    color: var(--sat-navy);
}

.sat-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
    height: 40px;
    margin: 0;
    padding: 0 14px 0 10px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.18s ease;
}

.sat-profile::-webkit-details-marker {
    display: none;
}

.sat-profile:hover {
    background: rgba(255, 255, 255, 0.2);
}

.sat-profile-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Light / dark ----
   A switch: sun on the left, moon on the right, and a white thumb that slides under whichever is on,
   so the active one is drawn navy on white and the other stays pale on the track. Its position comes
   from data-theme on <html>, which the boot script sets before first paint — so it is never briefly
   wrong, on either kind of page. */
.sat-theme {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 999px;
    background: none;
    cursor: pointer;
}

.sat-theme-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 60px;
    height: 32px;
    padding: 0 7px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    transition: background-color 0.22s ease, border-color 0.22s ease;
}

.sat-theme:hover .sat-theme-track {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.22);
}

.sat-theme-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(8, 20, 36, 0.35);
    transition: transform 0.24s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.sat-theme-sun,
.sat-theme-moon {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    transition: color 0.22s ease;
}

.sat-theme-sun { color: var(--sat-navy); }
.sat-theme-moon { color: rgba(255, 255, 255, 0.8); }

:root[data-theme="dark"] .sat-theme-track {
    border-color: rgba(108, 180, 240, 0.6);
    background: rgba(108, 180, 240, 0.3);
}

:root[data-theme="dark"] .sat-theme-thumb {
    transform: translateX(28px);
}

:root[data-theme="dark"] .sat-theme-sun { color: rgba(255, 255, 255, 0.8); }
:root[data-theme="dark"] .sat-theme-moon { color: var(--sat-navy); }

.sat-theme:focus-visible,
.sat-link:focus-visible,
.sat-cta:focus-visible,
.sat-profile:focus-visible,
.sat-brand:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---- The settings pages' menus (the app uses MudMenu popovers, styled to match in chatbot.css) ---- */
.sat-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    min-width: 210px;
    padding: 6px;
    border: 1px solid #BFCDDD;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 33, 58, 0.08), 0 20px 48px rgba(16, 33, 58, 0.16);
    animation: sat-menu-in 0.16s ease-out both;
}

.sat-menu--end {
    left: auto;
    right: 0;
}

@keyframes sat-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.sat-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #2F3E52;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.sat-menu-item:hover {
    background: #F2F6FB;
    color: #10213A;
}

.sat-menu-item:focus-visible {
    outline: 2px solid #2B78C2;
    outline-offset: -2px;
}

.sat-menu-item--on,
.sat-menu-item--on:hover {
    background: #2B78C2;
    color: #fff;
}


:root[data-theme="dark"] .sat-menu {
    border-color: #2E3F58;
    background: #152033;
}

:root[data-theme="dark"] .sat-menu-item {
    color: #D0DAE6;
}

:root[data-theme="dark"] .sat-menu-item:hover {
    background: #1A273C;
    color: #E8EEF6;
}

:root[data-theme="dark"] .sat-menu-item--on,
:root[data-theme="dark"] .sat-menu-item--on:hover {
    background: #2F74B8;
    color: #fff;
}


/* ---- Narrower windows: the same bar, shedding words in the same order on every page ---- */
@media (max-width: 1100px) {
    .sat-brand-tagline {
        display: none;
    }
}

@media (max-width: 900px) {
    .sat-topbar {
        gap: 12px;
        padding: 0 12px;
    }

    .sat-link {
        padding: 0 11px;
    }

    .sat-link-text {
        display: none;
    }
}

@media (max-width: 600px) {
    .sat-brand-text,
    .sat-profile-name,
    .sat-cta-text {
        display: none;
    }

    .sat-cta {
        padding: 0 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sat-link,
    .sat-cta,
    .sat-profile,
    .sat-caret,
    .sat-theme-track,
    .sat-theme-thumb,
    .sat-theme-sun,
    .sat-theme-moon {
        transition: none;
    }

    .sat-menu {
        animation: none;
    }
}

/* ---- Crossing between the app and its settings ----
   The two are separate documents (the settings pages are server-rendered), so moving between them is
   a full page load. A cross-document view transition keeps the bar where it is — it is named, so the
   browser carries it across as one element — while the page underneath cross-fades. Browsers without
   support simply load the page, and the bar still lands in exactly the same place. */
@view-transition {
    navigation: auto;
}

.sat-topbar {
    view-transition-name: sat-topbar;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.22s;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* ---- Editorial type ----
   The bar keeps its navy, playing the part of the dark strip at the head of an editorial page; what
   changes is the type and the shapes. The name is set in Instrument Serif at its only weight, every
   label in IBM Plex Mono, uppercase with a touch of negative tracking, and everything pressable is a
   pill. Shared by both hosts, so the settings pages' bar changes with the app's. */
.sat-topbar {
    --sat-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sat-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
    font-family: var(--sat-mono);
}

.sat-brand-title {
    font-family: var(--sat-serif);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
}

.sat-brand-tagline {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.sat-link,
.sat-profile {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.sat-profile {
    text-transform: none;
}

.sat-cta {
    padding: 0 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* ---- One surface with the page ----
   The bar used to be a navy band laid across the top. Now it has no fill of its own: the page's
   canvas runs up behind it — white, with the home page's and settings pages' soft wash, or the deep
   navy of dark mode — so bar and page read as one surface. The navy moves into the ink: the name and
   labels, the pill for where you are, and New chat as the one filled button.

   Where the page scrolls under it, a hairline and a faint shadow appear, so you can tell the content
   has moved (data-scrolled: set by askMeHome in chatbot.js on the home page, and by the settings
   layout's own script). At rest there is no line at all.

   The colours read the editorial tokens when the page defines them (chatbot.css in the app,
   settings.css on the settings pages), with the same values as fallbacks. */
.sat-topbar {
    --sat-ink: var(--ed-ink, #0E1D33);
    --sat-soft: var(--ed-smoke, #5E6C80);
    --sat-line: var(--ed-ash, #D5DCE6);
    --sat-line-strong: var(--ed-ash-strong, #B9C4D3);
    --sat-mist: var(--ed-mist, #EDF2F9);
    --sat-fill: #1E3A5F;
    --sat-on-fill: #FFFFFF;

    background: transparent;
    color: var(--sat-ink);
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

:root[data-theme="dark"] .sat-topbar {
    --sat-fill: #EEF2F8;
    --sat-on-fill: #1E3A5F;
}

.sat-brand {
    color: var(--sat-ink);
}

.sat-brand-tagline {
    color: var(--sat-soft);
}

.sat-link,
.sat-profile {
    border: 1px solid transparent;
    color: var(--sat-ink);
}

.sat-link:hover {
    border-color: var(--sat-line-strong);
    background: transparent;
    color: var(--sat-ink);
}

.sat-link--on,
.sat-link--on:hover {
    border-color: var(--sat-fill);
    background: var(--sat-fill);
    color: var(--sat-on-fill);
}

.sat-actions {
    border-left-color: var(--sat-line);
}

.sat-cta,
.sat-cta:hover {
    background: var(--sat-fill);
    color: var(--sat-on-fill);
}

.sat-cta:hover {
    filter: brightness(1.15);
}

:root[data-theme="dark"] .sat-cta:hover {
    filter: brightness(0.92);
}

.sat-profile {
    border-color: var(--sat-line-strong);
    background: transparent;
}

.sat-profile:hover {
    border-color: var(--sat-ink);
    background: transparent;
}

/* The switch: a hairline track on the page, the thumb a white disc under the active icon. */
.sat-theme-track,
:root[data-theme="dark"] .sat-theme-track {
    border-color: var(--sat-line-strong);
    background: var(--sat-mist);
}

.sat-theme:hover .sat-theme-track {
    border-color: var(--sat-ink);
    background: var(--sat-mist);
}

.sat-theme-thumb {
    box-shadow: 0 1px 3px rgba(14, 29, 51, 0.25);
}

.sat-theme-sun { color: #1E3A5F; }
.sat-theme-moon { color: var(--sat-soft); }

:root[data-theme="dark"] .sat-theme-sun { color: var(--sat-soft); }
:root[data-theme="dark"] .sat-theme-moon { color: #1E3A5F; }

.sat-theme:focus-visible,
.sat-link:focus-visible,
.sat-cta:focus-visible,
.sat-profile:focus-visible,
.sat-brand:focus-visible {
    outline-color: var(--sat-ink);
}

/* Scrolled: the hairline appears. */
.askme-page[data-scrolled] .sat-topbar,
.acct-app[data-scrolled] .sat-topbar {
    box-shadow: 0 1px 0 var(--sat-line), 0 10px 24px -18px rgba(14, 29, 51, 0.35);
}

:root[data-theme="dark"] .askme-page[data-scrolled] .sat-topbar,
:root[data-theme="dark"] .acct-app[data-scrolled] .sat-topbar {
    box-shadow: 0 1px 0 var(--sat-line), 0 10px 24px -18px rgba(0, 0, 0, 0.8);
}

@media (prefers-reduced-motion: reduce) {
    .sat-topbar {
        transition: none;
    }
}