/* =========================================================
   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: #001E30;
}

.ava-app {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #001E30;
}

/* ===== Navbar (desktop) ===== */
.ava-nav {
    flex: 0 0 auto;
    height: 60px;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: #001827;
    border-bottom: 1px solid rgba(159,182,190,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;
}

.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: #EAF6F8 !important; }
.mi:hover { background: rgba(159,182,190,0.08) !important; color: #EAF6F8 !important; }
.mi-del:hover { background: rgba(156,86,81,0.20) !important; }
.conn:hover { background: rgba(255,255,255,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(159,182,190,0.18);
    background: transparent;
    color: #9FB6BE;
    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: #9FB6BE;
    font: 600 14px Inter;
    transition: background .15s, color .15s;
}
.mnav i { font-size: 1.05rem; width: 20px; text-align: center; }
.mnav:hover { background: rgba(159,182,190,0.08); color: #EAF6F8; }
.mnav-danger { color: #e2938d; }
.mnav-danger i { color: #e2938d; }
.mnav-danger:hover { background: rgba(156,86,81,0.16); color: #e2938d; }
.mnav-on {
    background: rgba(159,182,190,0.16);
    color: #EAF6F8;
    box-shadow: 0 0 0 1px rgba(159,182,190,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 render their own app bar on phones → collapse the navbar */
    .layout-root.route-chat .ava-nav,
    .layout-root.route-knowledge .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: #001827;
        border-right: 1px solid rgba(159,182,190,0.12);
        box-shadow: 0 0 60px rgba(0,0,0,0.5);
        transform: translateX(-100%);
        transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ava-mobile-drawer.is-open { transform: translateX(0); }

    .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(159,182,190,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(0,8,12,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(159,182,190,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(159,182,190,0.28); border-radius: var(--r-pill); }
.um-conn-scroll::-webkit-scrollbar-thumb:hover { background: rgba(159,182,190,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(159,182,190,0.34);
}