/* =========
   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 {
    /* space for sidebar */
    margin-inline-start: var(--sb-w);

    /* NO margin on the other side */
    margin-inline-end: 0;

    transition:
      margin-inline-start 0.15s ease-in-out,
      margin-inline-end 0.15s ease-in-out;
}



/* Sidebar hover — works for BOTH LTR and RTL */
.sidebar:hover ~ #main_page {
    margin-inline-start: var(--sb-w-expanded);
}

#login_page {
    background: #092368;
}

#chat_page {
  display: flex;
  flex-direction: column;
  padding-left: 0; padding-right: 0;
  overflow-x: hidden;   /* keep horizontal safety */
  overflow-y: visible;
  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;
} */

*, *::before, *::after {
  box-sizing: border-box;
}

#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;
}

/* The invisible container between messages */
.inline-add-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    height: 28px;
    cursor: pointer;
    opacity: 1;
}

/* Dashed lines on each side */
.inline-add-line {
    flex: 1;
    border-top: 1px dashed #b0b0b0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* The add (+) button - hidden by default */
.inline-add-btn {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Reveal button + lines on hover */
.inline-add-zone:hover .inline-add-btn,
.inline-add-zone:hover .inline-add-line {
    opacity: 1 !important;
}

.hover-reveal-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.hover-wrapper:hover .hover-reveal-btn {
    opacity: 1;
    pointer-events: auto;
}

/* English UI */
[dir="ltr"] .lang-he {
  display: none;
}

/* Hebrew UI */
[dir="rtl"] .lang-en {
  display: none;
}