/* =========================================================
   MAINLAYOUT — app shell. Ported 1:1 from "AVA MainLayout.dc.html":
   the navbar itself is built with the prototype's inline styles in the
   markup; this file only holds what inline styles cannot express —
   the shell flex frame, :hover/:focus helpers, the dropdown animation,
   and the mobile drawer (responsive, same drawer pattern as the chat).
   The html/body/#app background is owned by ava-base.css.
   ========================================================= */

.layout-root {
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--ava-navy);
}

.ava-app {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--ava-navy);
}

/* ===== Navbar (desktop) ===== */
.ava-nav {
    flex: 0 0 auto;
    height: 60px;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--ava-navy-deep);
    border-bottom: 1px solid rgba(var(--ava-rgb-slate),0.10);
    position: relative;
    z-index: 1000;
}

.ava-logocol {
    width: 260px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 20px;
    text-decoration: none;
}

/* Tenant logos have arbitrary intrinsic sizes and aspect ratios: scale every logo to the slot
   height (up or down), cap the width at the column budget, and let object-fit/left-alignment
   absorb the overflow for very wide marks without distortion or visible letterboxing.
   Every slot keeps the same width:height budget (220:46) so a given logo renders proportionally
   identically everywhere; flex:0 0 auto stops the surrounding flex row from squeezing it. */
.ava-logo-img {
    display: block;
    height: 46px;
    width: auto;
    max-width: min(220px, 100%);
    flex: 0 0 auto;
    object-fit: contain;
    object-position: left center;
}

/* Light theme, DEFAULT logo: swap to the navy-ink re-ink of the default mark (white wordmark
   re-inked to deep navy, teal glyph kept) — it reads on the light bars with no plate. */
:root[data-theme="light"] .ava-logo-img.logo-is-default { content: url("../logo-ink.png"); }

/* Light theme, CUSTOM logo: arbitrary artwork cannot be recolored, so a dark badge plate is
   shown behind it — but only when the avaLogo luminance probe judges the mark too light to
   read on the light bars (the .logo-plate class carries that decision). The padding lives
   inside the original height budget so the bars don't grow. */
:root[data-theme="light"] .ava-navbar-logo.logo-plate {
    box-sizing: border-box;
    height: 46px;
    padding: 6px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #012A42, #001B2C);
    border: 1px solid rgba(159, 182, 190, 0.18);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}
:root[data-theme="light"] .ava-mobile-drawer .ava-logo-img.logo-plate {
    box-sizing: border-box;
    height: 42px;
    padding: 5px 9px;
    border-radius: 9px;
    background: linear-gradient(180deg, #012A42, #001B2C);
    border: 1px solid rgba(159, 182, 190, 0.18);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

.ava-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    list-style: none;
    margin: 0 0 0 14px;
    padding: 0;
}

.ava-usercol {
    margin-left: auto;
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 20px;
}

/* hover helpers (prototype <style> block) */
.navlink:hover { color: var(--ava-slate-100) !important; }
.mi:hover { background: rgba(var(--ava-rgb-slate),0.08) !important; color: var(--ava-slate-100) !important; }
.mi-del:hover { background: rgba(var(--ava-rgb-brick),0.20) !important; }
.conn:hover { background: rgba(var(--ava-rgb-white),0.06) !important; }

.dropfade { animation: avaDropFade .14s ease; }
@keyframes avaDropFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Mobile burger + drawer (hidden on desktop) ===== */
.ava-burger-m {
    display: none;
    align-self: center;
    margin-left: auto;
    margin-right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1px solid rgba(var(--ava-rgb-slate),0.18);
    background: transparent;
    color: var(--ava-slate-500);
    cursor: pointer;
    place-items: center;
    font-size: 1.3rem;
}

.ava-mobile-drawer { display: none; }
.ava-mobile-drawer-backdrop { display: none; }

.mnav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 11px;
    text-decoration: none;
    color: var(--ava-slate-500);
    font: 600 14px Inter;
    transition: background .15s, color .15s;
}
.mnav i { font-size: 1.05rem; width: 20px; text-align: center; }
.mnav:hover { background: rgba(var(--ava-rgb-slate),0.08); color: var(--ava-slate-100); }
.mnav-danger { color: var(--ava-danger-text); }
.mnav-danger i { color: var(--ava-danger-text); }
.mnav-danger:hover { background: rgba(var(--ava-rgb-brick),0.16); color: var(--ava-danger-text); }
.mnav-on {
    background: rgba(var(--ava-rgb-slate),0.16);
    color: var(--ava-slate-100);
    box-shadow: 0 0 0 1px rgba(var(--ava-rgb-slate),0.20) inset;
}

@keyframes avaDrawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes avaFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 767px) {
    /* mobile top bar = logo + burger; desktop tabs and the user pill drop away */
    .ava-tabs,
    .ava-usercol { display: none !important; }
    .ava-logocol { width: auto; }
    .ava-burger-m { display: grid; }

    /* chat + knowledge + prompts render their own app bar on phones → collapse the navbar */
    .layout-root.route-chat .ava-nav,
    .layout-root.route-knowledge .ava-nav,
    .layout-root.route-prompts .ava-nav { display: none; }

    /* left slide-in user drawer (logo · account · license · nav). Three fixed regions:
       a sticky header, a single scrolling middle (the connector list), and a sticky footer
       (page links + logout) — only the middle scrolls, so the identity + nav stay put. */
    .ava-mobile-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 1000002;
        width: 306px;
        max-width: 86%;
        height: 100dvh;
        overflow: hidden;
        background: var(--ava-navy-deep);
        border-right: 1px solid rgba(var(--ava-rgb-slate),0.12);
        transform: translateX(-100%);
        transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* the glow only exists while the drawer is on-screen — attached to the closed
       (off-screen) box it would bleed back into the viewport as a left-edge shade */
    .ava-mobile-drawer.is-open {
        transform: translateX(0);
        box-shadow: 0 0 60px rgba(var(--ava-rgb-black),0.5);
    }

    .ava-mobile-drawer > .amd-head { flex: 0 0 auto; }
    /* same 220:46 budget ratio as the navbar slot, scaled to the drawer's 32px height */
    .ava-mobile-drawer .ava-logo-img { height: 32px; max-width: min(153px, 100%); }
    .ava-mobile-drawer > .amd-foot { flex: 0 0 auto; border-top: 1px solid rgba(var(--ava-rgb-slate),0.10); }
    .ava-mobile-drawer > .amd-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        /* scroll without a visible scrollbar strip (looks native/app-like) */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .ava-mobile-drawer > .amd-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

    .ava-mobile-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000001;
        background: rgba(var(--ava-rgb-overlay-2),0.55);
        animation: avaFadeIn .18s ease;
    }
}

/* Desktop user-menu connector list: once there are more than ~4 connectors the list scrolls on
   its own; the identity/license above and the nav/logout below stay pinned (they are separate
   blocks in the dropdown, so only this middle region moves). */
.um-conn-scroll {
    max-height: 252px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--ava-rgb-slate),0.28) transparent;
}
.um-conn-scroll::-webkit-scrollbar { width: 6px; }
.um-conn-scroll::-webkit-scrollbar-track { background: transparent; }
.um-conn-scroll::-webkit-scrollbar-thumb { background: rgba(var(--ava-rgb-slate),0.28); border-radius: var(--r-pill); }
.um-conn-scroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--ava-rgb-slate),0.42); }

/* ===== Connector scroll areas (used by the connector login views) ===== */
.ava-desktop-connector-list,
.ava-mobile-connector-list {
    scrollbar-width: thin;
    scrollbar-color: var(--ava-line-strong) transparent;
}
.ava-desktop-connector-list::-webkit-scrollbar,
.ava-mobile-connector-list::-webkit-scrollbar { width: 9px; height: 9px; }
.ava-desktop-connector-list::-webkit-scrollbar-track,
.ava-mobile-connector-list::-webkit-scrollbar-track { background: transparent; }
.ava-desktop-connector-list::-webkit-scrollbar-thumb,
.ava-mobile-connector-list::-webkit-scrollbar-thumb {
    background: var(--ava-line-strong);
    border-radius: var(--r-pill);
}
.ava-desktop-connector-list::-webkit-scrollbar-thumb:hover,
.ava-mobile-connector-list::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ava-rgb-slate),0.34);
}