/* TitleFlow LibreChat Integration CSS Fix
 * This file makes the LibreChat header visible and flush with TitleFlow topbar.
 */

/* LibreChat Header Visibility Fix - Make it visible and flush */
div.sticky.top-0.z-10.flex.h-14,
div.fixed.top-0.z-10.flex.h-14 {
    display: flex !important;
    visibility: visible !important;
    top: 56px !important; /* Position directly below TitleFlow topbar */
}

/* Additional specificity for stubborn elements */
html body div.sticky.top-0.z-10.flex.h-14,
html body div.fixed.top-0.z-10.flex.h-14 {
    display: flex !important;
    visibility: visible !important;
    top: 56px !important;
}

/* Remove ALL body padding to make headers flush */
body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Adjust LibreChat's layout to start right after TitleFlow navigation */
/* Reset all margin-left values to 0px to see the natural layout */
.nav.active {
    margin-left: 0px !important; /* Reset LibreChat nav margin */
}

#root {
    margin-left: 0px !important; /* Reset root margin */
}

main {
    margin-left: 0px !important; /* Reset main content margin */
}

/* Fix chat history navigation to account for TitleFlow topbar */
/* Use more specific selectors like the other fixes in this file */
nav[aria-label="Chat history"],
.nav-sidebar,
aside.nav,
nav.nav {
    padding-top: 56px !important; /* Account for TitleFlow topbar height */
}

/* Additional specificity for navigation elements */
html body nav[aria-label="Chat history"],
html body .nav-sidebar,
html body aside.nav,
html body nav.nav {
    padding-top: 56px !important;
}

/* Fix controls navigation to align with TitleFlow topbar */
/* Use very high specificity to override Tailwind's py-1 class */
nav#controls-nav.sidenav.py-1 {
    padding-top: 56px !important; /* Align with TitleFlow topbar height */
}

/* Additional specificity for controls navigation */
html body nav#controls-nav.sidenav.py-1 {
    padding-top: 56px !important;
}

/* Even more specific selector as backup */
html body nav[id="controls-nav"][role="navigation"].py-1 {
    padding-top: 56px !important;
}

/* Fix chat history navigation to account for TitleFlow topbar */
#chat-history-nav {
    padding-top: 56px !important; /* Account for TitleFlow topbar height */
}

/* Additional specificity for chat history navigation */
html body #chat-history-nav {
    padding-top: 56px !important;
}

/* Even more specific selector for chat history navigation with classes */
html body nav#chat-history-nav.flex.h-full.flex-col {
    padding-top: 56px !important;
}

/* Maximum specificity selector for chat history navigation */
html body nav[id="chat-history-nav"][aria-label="Chat History"].flex.h-full.flex-col {
    padding-top: 56px !important;
}

/* Media query specific fixes for responsive padding */
@media (min-width: 768px) {
    #chat-history-nav {
        padding-top: 56px !important;
    }

    html body #chat-history-nav {
        padding-top: 56px !important;
    }

    html body nav#chat-history-nav.flex.h-full.flex-col {
        padding-top: 56px !important;
    }

    html body nav[id="chat-history-nav"][aria-label="Chat History"].flex.h-full.flex-col {
        padding-top: 56px !important;
    }
}

/* JavaScript-based fix will be applied via titleflow-auto-loader.js */