/* ============================
   Layout & Base Reset
============================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 85%;
  overflow-x: hidden;
  /*background-color: #0f1b2d;*/
  position: relative;
}

body {
  overflow-y: scroll;
}

/* ============================
   Scrollbar Styling - WebKit
============================ */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ============================
   Scrollbar Styling - Firefox
============================ */

* {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  scrollbar-width: thin;
}

/* ============================
   Fixed Elements Scrollbar Stability
============================ */

body, .navbar, header, footer, .menu, .sticky-top, .fixed-top, .sidebar, .chat, .instructions, .chat-scroll-wrapper {
  scrollbar-gutter: stable both-edges;
}

/* Optional: Hide scrollbar until hover */

.scroll-container::-webkit-scrollbar {
  width: 0px;
}

.scroll-container:hover::-webkit-scrollbar {
  /*width: 10px;*/
}

/* .chat-scroll-wrapper {
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
  height: 50vh;
  scroll-behavior: smooth;
  background: transparent;
  padding-right: 0px;
}

.chat-scroll-wrapper:hover, .chat-scroll-wrapper:focus-within {
  scrollbar-width: auto;
}

.chat-scroll-wrapper::-webkit-scrollbar {
  width: 8px;
} */