/* chat-styles.css */

/* Classes Tailwind nécessaires */
/* === Layout === */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-x-1 > * + * { margin-left: 0.25rem; }
.gap-4 { gap: 1rem; }

/* === Sizing === */
.w-full { width: 100%; }
.max-w-xl { max-width: 36rem; }
.h-2 { height: 0.5rem; }
.h-screen { height: 100vh; }
.h-full { height: 100%; }
.max-h-screen { max-height: 100vh; }
.min-h-8 { min-height: 2rem; }
.min-h-24 { min-height: 6rem; }
.max-h-56 { max-height: 14rem; }
.max-w-3\/4 { max-width: 75%; }

/* === Overflow === */
.overflow-y-auto { overflow-y: auto; }

/* === Padding & Margins === */
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }

/* === Borders & Radius === */
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }
.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-zinc-700 { border-color: rgb(63, 63, 70); }
.border-indigo-400 { border-color: rgb(129, 140, 248); }
.border-gray-200 { border-color: rgb(229, 231, 235); }

/* === Background Colors === */
.bg-gray-100 { background-color: rgb(243, 244, 246); }
.bg-gray-300 { background-color: rgb(209, 213, 219); }
.bg-gray-400 { background-color: rgb(156, 163, 175); }
.bg-blue-500 { background-color: rgb(59, 130, 246); }
.bg-zinc-900 { background-color: rgb(24, 24, 27); }
.bg-zinc-800 { background-color: rgb(39, 39, 42); }
.bg-indigo-500 { background-color: rgb(99, 102, 241); }

/* === Text Colors === */
.text-white { color: rgb(255, 255, 255); }
.text-gray-100 { color: rgb(243, 244, 246); }
.text-gray-800 { color: rgb(31, 41, 55); }
.text-zinc-400 { color: rgb(161, 161, 170); }
.text-red-500 { color: rgb(239, 68, 68); }

/* === Typography === */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-bold { font-weight: 700; }
.font-light { font-weight: 300; }
.text-left { text-align: left; }
.text-center { text-align: center; }

/* === Effects & Transitions === */
.shadow-xl { box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05); }
.transition-all { transition: all 0.3s ease-in-out; }
.transition-colors { transition: background-color 0.2s ease-in-out; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.ease-out { transition-timing-function: ease-out; }

/* === Hover Effects === */
.hover\:bg-indigo-500:hover { background-color: rgb(99, 102, 241); }
.hover\:border-indigo-400:hover { border-color: rgb(129, 140, 248); }

/* === Misc === */
.resize-none { resize: none; }
.cursor-not-allowed { cursor: not-allowed; }

/* Animations */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.delay-150 {
  animation-delay: 150ms;
}

.delay-300 {
  animation-delay: 300ms;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

/* Classes pour button hover */
.hover\:bg-blue-600:hover {
  background-color: rgb(37, 99, 235);
}

/* Ajustements spécifiques pour l'intégration */
#react-chat-container2 {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Évite les débordements */
    padding-bottom: 0; /* Enlève le padding ici */
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

#react-chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 0px 10px 0px 10px;
    scrollbar-width: none;
}