*{font-family: "Montserrat", sans-serif;}

/* Classes utilitaires pour les tailles de police */
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }

/* Classe utilitaire pour limiter le nombre de lignes */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Classes utilitaires pour les hauteurs spécifiques */
.h-38 { height: 9.5rem; }

/* Scrollbar global - Style moderne et minimaliste */
::-webkit-scrollbar {width: 3px;height: 3px;}
::-webkit-scrollbar-track {background: #f1f5f9;border-radius: 2px;}
::-webkit-scrollbar-thumb {background: #cbd5e1;border-radius: 2px;transition: background 0.2s ease;}
::-webkit-scrollbar-thumb:hover {background: #94a3b8;}
::-webkit-scrollbar-corner {background: #f1f5f9;}
/* Scrollbar pour Firefox */
* {scrollbar-width: thin;scrollbar-color: #cbd5e1 #f1f5f9;}
/* Scrollbar fin pour les petits éléments */
.thin-scrollbar::-webkit-scrollbar {width: 3px;height: 3px;}
.thin-scrollbar::-webkit-scrollbar-track {background: #f8fafc;}
.thin-scrollbar::-webkit-scrollbar-thumb {background: #e2e8f0;border-radius: 2px;}
.thin-scrollbar::-webkit-scrollbar-thumb:hover {background: #cbd5e1;}
/* Classe utilitaire pour cacher la scrollbar SAUF sur desktop */
.scrollbar-hide {scrollbar-width: none;}
.scrollbar-hide::-webkit-scrollbar {display: none;}
/* Sur desktop (PC), afficher une scrollbar fine au hover */
@media (min-width: 1024px) and (hover: hover) {
  .scrollbar-hide {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
  }
  .scrollbar-hide:hover {
    scrollbar-color: #cbd5e1 #f1f5f9;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  .scrollbar-hide::-webkit-scrollbar-track {
    background: transparent;
    transition: background 0.3s ease;
  }
  .scrollbar-hide::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
    transition: background 0.3s ease;
  }
  .scrollbar-hide:hover::-webkit-scrollbar-track {
    background: #f1f5f9;
  }
  .scrollbar-hide:hover::-webkit-scrollbar-thumb {
    background: #cbd5e1;
  }
  .scrollbar-hide:hover::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
}

.pal-1{padding-left: 1px;}.pal-2{padding-left: 2px;}.pal-3{padding-left: 3px;}.pal-4{padding-left: 4px;}.pal-5{padding-left: 5px;}.pal-6{padding-left: 6px;}.pal-7{padding-left: 7px;}.pal-8{padding-left: 8px;}.pal-9{padding-left: 9px;}.pal-10{padding-left: 10px;}
.par-1{padding-right: 1px;}.par-2{padding-right: 2px;}.par-3{padding-right: 3px;}.par-4{padding-right: 4px;}.par-5{padding-right: 5px;}.par-6{padding-right: 6px;}.par-7{padding-right: 7px;}.par-8{padding-right: 8px;}.par-9{padding-right: 9px;}.par-10{padding-right: 10px;}
.pat-1{padding-top: 1px;}.pat-2{padding-top: 2px;}.pat-3{padding-top: 3px;}.pat-4{padding-top: 4px;}.pat-5{padding-top: 5px;}.pat-6{padding-top: 6px;}.pat-7{padding-top: 7px;}.pat-8{padding-top: 8px;}.pat-9{padding-top: 9px;}.pat-10{padding-top: 10px;}
.pab-1{padding-bottom: 1px;}.pab-2{padding-bottom: 2px;}.pab-3{padding-bottom: 3px;}.pab-4{padding-bottom: 4px;}.pab-5{padding-bottom: 5px;}.pab-6{padding-bottom: 6px;}.pab-7{padding-bottom: 7px;}.pab-8{padding-bottom: 8px;}.pab-9{padding-bottom: 9px;}.pab-10{padding-bottom: 10px;}
.mal-1{margin-left: 1px;}.mal-2{margin-left: 2px;}.mal-3{margin-left: 3px;}.mal-4{margin-left: 4px;}.mal-5{margin-left: 5px;}.mal-6{margin-left: 6px;}.mal-7{margin-left: 7px;}.mal-8{margin-left: 8px;}.mal-9{margin-left: 9px;}.mal-10{margin-left: 10px;}
.mar-1{margin-right: 1px;}.mar-2{margin-right: 2px;}.mar-3{margin-right: 3px;}.mar-4{margin-right: 4px;}.mar-5{margin-right: 5px;}.mar-6{margin-right: 6px;}.mar-7{margin-right: 7px;}.mar-8{margin-right: 8px;}.mar-9{margin-right: 9px;}.mar-10{margin-right: 10px;}
.mat-1{margin-top: 1px;}.mat-2{margin-top: 2px;}.mat-3{margin-top: 3px;}.mat-4{margin-top: 4px;}.mat-5{margin-top: 5px;}.mat-6{margin-top: 6px;}.mat-7{margin-top: 7px;}.mat-8{margin-top: 8px;}.mat-9{margin-top: 9px;}.mat-10{margin-top: 10px;}
.mab-1{margin-bottom: 1px;}.mab-2{margin-bottom: 2px;}.mab-3{margin-bottom: 3px;}.mab-4{margin-bottom: 4px;}.mab-5{margin-bottom: 5px;}.mab-6{margin-bottom: 6px;}.mab-7{margin-bottom: 7px;}.mab-8{margin-bottom: 8px;}.mab-9{margin-bottom: 9px;}.mab-10{margin-bottom: 10px;}
.fs-1{font-size: 1px;}.fs-2{font-size: 2px;}.fs-3{font-size: 3px;}.fs-4{font-size: 4px;}.fs-5{font-size: 5px;}.fs-6{font-size: 6px;}.fs-7{font-size: 7px;}.fs-8{font-size: 8px;}.fs-9{font-size: 9px;}.fs-10{font-size: 10px;}.fs-11{font-size: 11px;}.fs-12{font-size: 12px;}.fs-13{font-size: 13px;}.fs-14{font-size: 14px;}.fs-15{font-size: 15px;}.fs-16{font-size: 16px;}.fs-17{font-size: 17px;}.fs-18{font-size: 18px;}.fs-19{font-size: 19px;}.fs-20{font-size: 20px;}
.fw-100{font-weight: 100;}.fw-200{font-weight: 200;}.fw-300{font-weight: 300;}.fw-400{font-weight: 400;}.fw-500{font-weight: 500;}.fw-600{font-weight: 600;}.fw-700{font-weight: 700;}.fw-800{font-weight: 800;}.fw-900{font-weight: 900;}
.lh-1{line-height: 1;}.lh-2{line-height: 2;}.lh-3{line-height: 3;}.lh-4{line-height: 4;}.lh-5{line-height: 5;}.lh-6{line-height: 6;}.lh-7{line-height: 7;}.lh-8{line-height: 8;}.lh-9{line-height: 9;}.lh-10{line-height: 10;}
.opa-1{opacity: 0.1;}.opa-2{opacity: 0.2;}.opa-3{opacity: 0.3;}.opa-4{opacity: 0.4;}.opa-5{opacity: 0.5;}.opa-6{opacity: 0.6;}.opa-7{opacity: 0.7;}.opa-8{opacity: 0.8;}.opa-9{opacity: 0.9;}.opa-10{opacity: 1;}
.wd-1{width: 1px;}.wd-2{width: 2px;}.wd-3{width: 3px;}.wd-4{width: 4px;}.wd-5{width: 5px;}.wd-6{width: 6px;}.wd-7{width: 7px;}.wd-8{width: 8px;}.wd-9{width: 9px;}.wd-10{width: 10px;}.wd-11{width: 11px;}.wd-12{width: 12px;}.wd-13{width: 13px;}.wd-14{width: 14px;}.wd-15{width: 15px;}.wd-16{width: 16px;}.wd-17{width: 17px;}.wd-18{width: 18px;}.wd-19{width: 19px;}.wd-20{width: 20px;}.wd-21{width: 21px;}.wd-22{width: 22px;}.wd-23{width: 23px;}.wd-24{width: 24px;}.wd-25{width: 25px;}.wd-26{width: 26px;}.wd-27{width: 27px;}.wd-28{width: 28px;}.wd-29{width: 29px;}.wd-30{width: 30px;}.wd-31{width: 31px;}.wd-32{width: 32px;}.wd-33{width: 33px;}.wd-34{width: 34px;}.wd-35{width: 35px;}.wd-36{width: 36px;}.wd-37{width: 37px;}.wd-38{width: 38px;}.wd-39{width: 39px;}.wd-40{width: 40px;}
.ht-1{height: 1px;}.ht-2{height: 2px;}.ht-3{height: 3px;}.ht-4{height: 4px;}.ht-5{height: 5px;}.ht-6{height: 6px;}.ht-7{height: 7px;}.ht-8{height: 8px;}.ht-9{height: 9px;}.ht-10{height: 10px;}.ht-11{height: 11px;}.ht-12{height: 12px;}.ht-13{height: 13px;}.ht-14{height: 14px;}.ht-15{height: 15px;}.ht-16{height: 16px;}.ht-17{height: 17px;}.ht-18{height: 18px;}.ht-19{height: 19px;}.ht-20{height: 20px;}.ht-21{height: 21px;}.ht-22{height: 22px;}.ht-23{height: 23px;}.ht-24{height: 24px;}.ht-25{height: 25px;}.ht-26{height: 26px;}.ht-27{height: 27px;}.ht-28{height: 28px;}.ht-29{height: 29px;}.ht-30{height: 30px;}.ht-31{height: 31px;}.ht-32{height: 32px;}.ht-33{height: 33px;}.ht-34{height: 34px;}.ht-35{height: 35px;}.ht-36{height: 36px;}.ht-37{height: 37px;}.ht-38{height: 38px;}.ht-39{height: 39px;}.ht-40{height: 40px;}

/* ===== STYLES POUR LA GESTION DES ARTICLES ===== */

/* Formulaire d'article */
.article-form {
  max-height: 75vh;
  overflow-y: auto;
  padding: 1.5rem;
  background: #ffffff;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .form-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field.col-span-full {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .form-field.md\:col-span-2 {
    grid-column: span 2;
  }
}

/* Labels avec style amélioré */
.field-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.required-indicator {
  color: #ef4444;
  font-weight: 700;
  font-size: 1rem;
}

.calculated-badge {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Inputs avec design moderne */
.field-input,
.field-textarea,
.field-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.field-input:invalid,
.field-textarea:invalid,
.field-select:invalid {
  border-color: #ef4444;
}

.field-input:invalid:focus,
.field-textarea:invalid:focus,
.field-select:invalid:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.field-input[readonly],
.field-textarea[readonly],
.field-select[readonly] {
  background-color: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

.field-textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
}

/* Checkbox avec style personnalisé */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
  transition: all 0.2s ease;
}

.checkbox-wrapper:hover {
  border-color: #d1d5db;
}

.field-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: #3b82f6;
  cursor: pointer;
}

.checkbox-label {
  cursor: pointer;
  margin: 0;
  flex: 1;
}

/* File input */
.field-file {
  cursor: pointer;
  background: #ffffff;
}

.field-file::-webkit-file-upload-button {
  background: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  margin-right: 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
}

.field-file::-webkit-file-upload-button:hover {
  background: #2563eb;
}

.field-file::file-selector-button {
  background: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  margin-right: 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
}

.field-file::file-selector-button:hover {
  background: #2563eb;
}

.current-file {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #4b5563;
}

/* Aide contextuelle */
.field-help {
  margin-top: 0.375rem;
  color: #6b7280;
  font-style: italic;
}

/* Complex list fields avec style amélioré */
.complex-list-container {
  border: 2px solid #e5e7eb;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  overflow: hidden;
}

.complex-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #1f2937, #374151);
  color: white;
}

.list-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.complex-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.complex-list-item {
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.complex-list-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.list-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border-bottom: 1px solid #e5e7eb;
}

.list-item-header span {
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
}

.btn-remove-item {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  border: none;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.btn-remove-item:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.btn-add-list-item {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.btn-add-list-item:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.list-item-fields {
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

/* Section titre */
.section-title {
  color: #1f2937;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category-specific-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
}

/* Styles pour les boutons généraux */
.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
  box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #4b5563, #374151);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3);
}

/* Messages */
.loading-message {
  text-align: center;
  color: #6b7280;
  font-style: italic;
  padding: 3rem;
  font-size: 1.125rem;
}

.no-articles {
  text-align: center;
  color: #6b7280;
  padding: 4rem 2rem;
  font-size: 1.25rem;
  font-weight: 500;
}

/* Responsive amélioré */
@media (max-width: 768px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
  
  .list-item-fields {
    grid-template-columns: 1fr;
  }
  
  .article-actions {
    flex-direction: column;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .complex-list-header {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  
  .article-form {
    padding: 1rem;
  }
}

/* Animation pour les champs calculés */
@keyframes pulse-calculated {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.calculated-badge {
  animation: pulse-calculated 2s infinite;
}

/* Amélioration des focus states pour l'accessibilité */
.btn:focus-visible,
.field-input:focus-visible,
.field-textarea:focus-visible,
.field-select:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* ===== STYLES POUR LE DROPDOWN ACCOUNT ===== */

/* Photo de profil par défaut avec initiales */
#user-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Animation de la flèche du dropdown */
#dropdown-arrow {
  transition: transform 0.3s ease;
}

/* Menu dropdown avec animation */
#account-menu {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  overflow: hidden; /* Empêcher le débordement */
}

/* Effet hover sur les éléments du menu */
#account-menu a,
#account-menu button {
  transition: all 0.2s ease;
  border-radius: 0.375rem;
  margin: 0 0.25rem;
  position: relative; /* Pour contrôler le positionnement */
}

#account-menu a:hover,
#account-menu button:hover {
  background-color: #f1f5f9;
  /* Retirer le transform qui causait le décalage */
}

/* Style spécial pour le bouton de déconnexion */
#logout-btn:hover {
  background-color: #fef2f2;
  color: #dc2626; /* Rouge plus foncé au hover */
  /* Retirer le transform qui causait le décalage */
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  #account-dropdown {
    position: static;
  }
  
  #account-menu {
    position: fixed;
    right: 1rem;
    left: 1rem;
    width: auto;
    max-width: 280px;
    margin: 0 auto;
  }
  
  #account-button {
    padding: 0.5rem;
  }
  
  #account-button .flex {
    display: none;
  }
  
  #account-button::after {
    content: "\f007"; /* Font Awesome user icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.25rem;
  }
  
  /* Nom d'utilisateur plus compact sur mobile */
  #user-name {
    max-width: 20px !important;
  }
}

/* Animation d'entrée pour le menu */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#account-menu.show {
  animation: slideInDown 0.3s ease-out;
}

/* Style pour le nom d'utilisateur */
#user-name {
  max-width: 8rem; /* Largeur maximale par défaut */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== STYLES POUR LE CHATBOX ===== */

/* Button de toggle du chatbox */
#chatbox-toggle-btn {
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
  animation: pulse 2s infinite;
}

#chatbox-toggle-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(34, 197, 94, 0.4);
}

/* Container du chatbox */
#chatbox-container {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Messages du chatbox */
#chatbox-messages {
  scrollbar-width: thin;
  scrollbar-color: #e2e8f0 #f8fafc;
}

#chatbox-messages::-webkit-scrollbar {
  width: 4px;
}

#chatbox-messages::-webkit-scrollbar-track {
  background: #f8fafc;
}

#chatbox-messages::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 2px;
}

#chatbox-messages::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

/* Messages utilisateur et support */
.chatbox-message-user {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  word-wrap: break-word;
  max-width: 240px;
}

.chatbox-message-support {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  word-wrap: break-word;
  max-width: 240px;
}

/* Input du chatbox */
#chatbox-input:focus {
  box-shadow: 0 0 0 2px #22c55e;
  border-color: #22c55e;
  outline: none;
}

/* Styles pour les fichiers dans le chatbox */
.chatbox-file-item {
  transition: all 0.2s ease;
}

.chatbox-file-item:hover {
  background-color: #f9fafb;
}

/* Zone de prévisualisation des fichiers */
#chatbox-file-preview {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Boutons de fichiers */
#chatbox-file-btn:hover,
#chatbox-send-files:hover {
  transform: translateY(-1px);
}

/* Images dans le chatbox */
.chatbox-image {
  transition: transform 0.2s ease;
}

.chatbox-image:hover {
  transform: scale(1.02);
}

/* Animation du bouton */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Responsive pour mobile */
@media (max-width: 640px) {
  #chatbox-container {
    width: calc(100vw - 3rem);
    right: 1.5rem;
    bottom: 5rem;
  }
  
  #chatbox-toggle-btn {
    width: 3.5rem;
    height: 3.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
  }
}

/* ===== STYLES POUR LA GESTION DES CONVERSATIONS (ADMIN) ===== */

/* Conteneur principal des conversations */
#conversationsListContainer {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
}

/* Item de conversation */
.conversation-item {
  transition: all 0.2s ease-in-out;
  border-left: 4px solid transparent;
}

.conversation-item:hover {
  background-color: #f9fafb;
  border-left-color: #f97316;
  transform: translateX(2px);
}

/* Modal de conversation */
#conversation-modal {
  z-index: 9999;
  backdrop-filter: blur(4px);
}

/* Messages dans la modal admin */
#admin-conversation-messages {
  height: 400px;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 0.5rem;
}

/* Style des messages admin */
#admin-conversation-messages .message-admin {
  animation: slideInLeft 0.3s ease-out;
}

#admin-conversation-messages .message-user {
  animation: slideInRight 0.3s ease-out;
}

/* Zone de saisie admin */
#admin-conversation-input {
  resize: none;
  min-height: 2.5rem;
  max-height: 8rem;
  transition: border-color 0.2s ease-in-out;
}

#admin-conversation-input:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

/* Boutons d'action conversation */
.conversation-action-btn {
  transition: all 0.2s ease-in-out;
}

.conversation-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Prévisualisation des fichiers admin */
#admin-chatbox-file-preview {
  max-height: 200px;
  overflow-y: auto;
  border: 2px dashed #e5e7eb;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

#admin-chatbox-file-preview.dragover {
  border-color: #f97316;
  background-color: #fef7ed;
}

/* Statistiques conversations */
#statistics_conversations_container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

#statistics_conversations_container > div {
  transition: transform 0.2s ease-in-out;
}

#statistics_conversations_container > div:hover {
  transform: translateY(-2px);
}

/* Filtres conversations */
.conversations-filters {
  background: linear-gradient(135deg, #fef7ed 0%, #fed7aa 100%);
  border: 1px solid #f97316;
  border-radius: 0.5rem;
  padding: 1rem;
}

/* Badge de statut conversation */
.status-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Override pour les badges de statut des commandes - pas de majuscules */
.status-badge-container .status-badge {
  text-transform: none;
  letter-spacing: normal;
}

/* Animations pour les conversations */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive pour les conversations */
@media (max-width: 768px) {
  #conversation-modal .modal-content {
    width: 95%;
    max-width: none;
    margin: 1rem;
  }
  
  #admin-conversation-messages {
    height: 300px;
  }
  
  #statistics_conversations_container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  #statistics_conversations_container {
    grid-template-columns: 1fr;
  }
  
  .conversations-filters {
    padding: 0.75rem;
  }
}

/* ===== STYLES POUR LES CONVERSATIONS UTILISATEUR ===== */

/* Bouton conversations dans account.html */
#conversations-btn {
  transition: all 0.2s ease-in-out;
}

#conversations-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Item de conversation utilisateur */
.conversation-item {
  transition: all 0.2s ease-in-out;
  border-left: 4px solid transparent;
}

.conversation-item:hover {
  border-left-color: #f97316;
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Messages dans les conversations utilisateur */
#user-conversation-messages {
  scroll-behavior: smooth;
}

#user-conversation-messages::-webkit-scrollbar {
  width: 6px;
}

#user-conversation-messages::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

#user-conversation-messages::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

#user-conversation-messages::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animation des messages utilisateur */
.message-fade-in {
  animation: messageFadeIn 0.3s ease-out;
}

@keyframes messageFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive pour les conversations utilisateur */
@media (max-width: 768px) {
  .conversation-item {
    padding: 0.75rem;
  }
  
  #user-conversation-messages {
    padding: 0.75rem;
  }
}

/* Gradient pour les listes sélectionnées */
.wishlist-item-selected {
  background: linear-gradient(90deg, #eff6ff, #faf5ff, #f5f3ff) !important;
  border: 1px solid #dbeafe !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Animation du drapeau du Congo */
.flag-wave {
  animation: flagWave 2s ease-in-out infinite;
  transform-origin: left center;
}

@keyframes flagWave {
  0%, 100% {
    transform: rotate(0deg) scaleX(1);
  }
  25% {
    transform: rotate(1deg) scaleX(0.98);
  }
  50% {
    transform: rotate(0deg) scaleX(0.95);
  }
  75% {
    transform: rotate(-1deg) scaleX(0.98);
  }
}

/* Animation de flottement pour le container du drapeau */
.flag-container {
  animation: flagFloat 3s ease-in-out infinite;
}

@keyframes flagFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* Effet de survol sur le drapeau */
.flag-container:hover .flag-wave {
  animation: flagWaveIntense 1s ease-in-out infinite;
}

@keyframes flagWaveIntense {
  0%, 100% {
    transform: rotate(0deg) scaleX(1);
  }
  25% {
    transform: rotate(2deg) scaleX(0.95);
  }
  50% {
    transform: rotate(0deg) scaleX(0.9);
  }
  75% {
    transform: rotate(-2deg) scaleX(0.95);
  }
}

/* Barre de progression de scroll */
.scroll-progress-bar {
  position: fixed;
  top: 48px; /* Juste sous le header (min-h-12 = 48px) */
  left: 0;
  width: 100%;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 49; /* Juste en dessous du header (z-50) */
  backdrop-filter: blur(10px);
}

.scroll-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4285F4, #34A853, #FBBC04, #EA4335);
  width: 0%;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(66, 133, 244, 0.3);
}

@media (max-width: 768px) {
  .scroll-progress-bar {
    top: 104px; /* Sous le header + barre de recherche mobile (48px + 56px) */
  }
}