:root {
    --sidebar-w: 220px;
    --subnav-w: 260px;
    --topbar-h: 56px;
    --footer-h: 48px;
    --composer-h: 64px;
}

/* Desktop layout */
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    overflow: hidden;
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    z-index: 1000;
}
.app-sidebar .scroll {
    height: 100vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.app {
    min-height: 100vh;
    display: flex;
    background: var(--bs-body-bg);
    overflow: hidden;
}

/* Ensure content starts below the always‑visible topbar */
.app-topbar + .app,
.app-topbar + .app + .app-footer,
.app-topbar + .app-main {
    margin-top: var(--topbar-h);
}

.app-main {
    display: flex;
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    flex-direction: row; /* unchanged */
}

/* Subnav now on the right, so border on the left */
.app-subnav {
    width: var(--subnav-w);
    border-left: 1px solid var(--bs-border-color); /* changed from border-right */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
    scrollbar-gutter: stable;
    background: var(--bs-body-bg);
}

/* Chat container area (fills remaining space) */
.chat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Chat messages area */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    gap: .5rem;
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable;
    box-sizing: border-box;
}

/* Composer fixed above footer (handled in chat css too) */
.chat-composer {
    border-top: 1px solid var(--bs-border-color);
    padding: .75rem;
    background: var(--bs-body-bg);
}

/* Footer fixed */
.app-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 1rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    z-index: 1100;
}

/* Mobile and tablets (< lg) */
@media (max-width: 991.98px) {
    /* Show mobile topbar space (already handled globally) */
    .app-topbar + .app,
    .app-topbar + .app + .app-footer,
    .app-topbar + .app-main {
        margin-top: var(--topbar-h);
    }

    /* Hide fixed sidebar, use offcanvas instead */
    .app-sidebar {
        display: none !important;
    }

    .app {
        margin-left: 0 !important;
    }

    .app-main {
        flex-direction: column;
        height: calc(100vh - var(--topbar-h));
    }

    .app-subnav {
        display: none !important; /* replaced by offcanvasSubnav */
    }

    .chat {
        height: calc(100vh - var(--topbar-h));
    }

    .chat-messages {
        height: calc(100vh - var(--topbar-h) - var(--composer-h) - var(--footer-h));
    }

    .chat-composer {
        position: fixed;
        bottom: var(--footer-h);
        right: 0;
        left: 0;
        height: var(--composer-h);
        padding: .5rem;
        z-index: 1050;
        display: flex;
        align-items: center;
        border-top: 1px solid var(--bs-border-color);
    }

    .app-footer {
        left: 0;
    }

    #main {
        padding-bottom: var(--footer-h);
    }
}

/* Desktop margin to make room for left sidebar */
@media (min-width: 992px) {
    .app {
        margin-left: var(--sidebar-w);
    }

    .app-footer {
        left: var(--sidebar-w);
    }
}

/* Utility overrides */
.table {
    width: auto !important;
    max-width: none !important;
}

/* Market-specific quantity column styling */
.table td.market-quantity,
.table th.market-quantity {
    text-align: right;
    min-width: 80px;
}