/* =========================================
   SCROLLBAR GLOBAL - Design Caprice
   Centralisé depuis : chat.css, map.css,
   forms.css, responsive.css,
   chat_collaboration.html
   ========================================= */

/* ---- Scrollbar standard (8px) ---- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 62, 181, 0.05);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rose-fuchsia), var(--rouge-passion));
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FF00FF, var(--rouge-passion));
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rose-fuchsia) rgba(255, 62, 181, 0.05);
}

/* ---- Scrollbar fine (6px) ----
   Usage : .conversations-list, .project-panel */
.conversations-list::-webkit-scrollbar,
.project-panel::-webkit-scrollbar {
  width: 6px;
}

.conversations-list::-webkit-scrollbar-track,
.project-panel::-webkit-scrollbar-track {
  background: rgba(255, 62, 181, 0.05);
  border-radius: 10px;
}

.conversations-list::-webkit-scrollbar-thumb,
.project-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rose-fuchsia), var(--rouge-passion));
  border-radius: 10px;
}

.conversations-list::-webkit-scrollbar-thumb:hover,
.project-panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FF00FF, var(--rouge-passion));
}

/* ---- Scrollbar modale (12px, gradient fancy) ---- */
.modal-content::-webkit-scrollbar {
  width: 12px;
}

.modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  margin: 10px 0;
  border: 1px solid rgba(255, 62, 181, 0.1);
}

.modal-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    var(--rose-fuchsia) 0%,
    var(--rouge-passion) 50%,
    #FF00FF 100%
  );
  border-radius: 10px;
  border: 2px solid rgba(26, 26, 26, 0.8);
  background-clip: padding-box;
  box-shadow:
    0 0 15px rgba(255, 62, 181, 0.3),
    inset 0 0 10px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    #FF00FF 0%,
    var(--rouge-passion) 50%,
    var(--rose-fuchsia) 100%
  );
  border: 2px solid rgba(26, 26, 26, 0.6);
  box-shadow:
    0 0 20px rgba(255, 62, 181, 0.5),
    inset 0 0 15px rgba(255, 255, 255, 0.15);
}

/* ---- Mobile : scrollbar ultra-fine ---- */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
}