/* =========
   Variables
   ========= */
:root {
    --sb-w: 5rem;              /* collapsed sidebar width */
    --sb-w-expanded: 16rem;    /* expanded on hover */
    --content-gap: 1rem;       /* spacing from content edge */
}

/* ===========================
   Sidebar (default: left/LTR)
   =========================== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    width: var(--sb-w);
    padding: 2rem 1rem;
    background: #092368;
    z-index: 1050;

    transition: width 0.15s ease-in-out, left 0.15s ease-in-out, right 0.15s ease-in-out;
    border-right: 1px solid lightgray;
}

/* RTL: pin the sidebar to the right instead */
.sidebar-rtl {
    left: auto;
    right: 0;
    border-left: 1px solid lightgray;
    border-right: none;
}

/* Expand sidebar on hover */
.sidebar:hover {
    width: var(--sb-w-expanded);
}

/* Keep nav link content from wrapping */
.sidebar .nav-link {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

/* Fix icon width inside nav links */
.sidebar .nav-link i {
    width: 1rem;
}

/* Hide nav link labels by default; reveal on hover */
.sidebar .nav-link span {
    visibility: hidden;
    opacity: 1;
    transition: opacity 0.1s ease-in-out;
}
.sidebar:hover .nav-link span {
    visibility: visible;
    opacity: 1;
    color: black;
}

/* Sidebar header layout + reveal on hover */
.sidebar-header {
    display: flex;
    justify-content: left;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}
.sidebar-header h2 {
    opacity: 0;
    margin-left: 1rem;
    margin-bottom: 0;
    transition: opacity 0.1s ease-in-out;
}
.sidebar:hover .sidebar-header h2 {
    opacity: 1;
}

/* ============
   Main content
   ============ */
/* Base (LTR): leave room on the left for the sidebar */
#main_page {
    margin-left: calc(var(--sb-w) + var(--content-gap));
    margin-right: var(--content-gap);
    transition: margin 0.15s ease-in-out; /* animate both sides */
}

/* RTL variant: swap margins; increase specificity to beat #main_page base */
#main_page.main-page-rtl {
    margin-left: var(--content-gap);
    margin-right: calc(var(--sb-w) + var(--content-gap));
}

/* When sidebar (left/LTR) is hovered, push content further right */
.sidebar:hover ~ #main_page {
    margin-left: calc(var(--sb-w-expanded) + var(--content-gap));
}

/* When sidebar is on the right (RTL) and hovered, push content left */
.sidebar.sidebar-rtl:hover ~ #main_page {
    margin-right: calc(var(--sb-w-expanded) + var(--content-gap));
    margin-left: var(--content-gap);
}

#login_page {
    background: #092368;
}

#chat_page {
  display: flex;
  flex-direction: column;
  padding-left: 0; padding-right: 0;
  overflow: hidden;
  min-height: 0; /* crucial when children use flex scrolling */
}

/* Kill extra vertical padding that Grid adds around the textarea row */
#chat_input_area .mantine-Grid-root {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#chat-scroll {
    width: 100%;
    height: calc(100vh - 25vh); /* full viewport minus input area + margin */
    overflow-y: auto;
}

#lottie-loader {
  width: 300px;
  height: 300px;
}
/* ======
   Logos
   ====== */
/* Hide the expanded logo by default */
.expanded-logo { display: none; }

/* On hover, swap logos */
.sidebar:hover .expanded-logo {
    display: block;
    max-width: 50rem;
}
.sidebar:hover .collapsed-logo {
    display: none;
}

#react-entry-point {
  background: #092368; /* your loader bg */
  min-height: 100vh;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Heebo";
  src: url("/assets/fonts/Heebo-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Figtree", "Heebo", sans-serif;
}