:root {
  --sidebar-width: 4rem;
}

*{
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Inter', sans-serif;
}

#main, #nav {
  position: absolute;
  visibility: hidden;
}

#nav { width: var(--sidebar-width); border-right: 1px solid rgba(133, 129, 129, 0.39); }
#main { margin-left: var(--sidebar-width); }
#input { margin-left: var(--sidebar-width); }
.text-sidebar { left: calc(var(--sidebar-width) + 0.5rem) }

#nav, .text-sidebar {
  transition: width 0.3s ease; 
}

#main, #input {
  transition: margin-left 0.3s ease; 
}



#newConv {
  transition: opacity 0.5s ease-in-out;
}


#scrollbar {
  mask-image: linear-gradient(to bottom, black 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent);
}

#scrollbar::-webkit-scrollbar {
  width: 10px;
  position: absolute;
  right: 0;
}

#scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
}

#scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

#scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.3);
}

#text::-webkit-scrollbar {
  width: 10px;
  position: absolute;
  right: 0;
}

#text::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
}

#text::-webkit-scrollbar-track {
  background: transparent;
}

#text::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.3);
}

.loader {
  width: 100px;
  height: 100px;
  border: 5px solid black;
  border-top: 5px solid white; /* Couleur principale du loader */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}