/* Core Utilities (unchanged) */
.absolute { position: absolute; }
.fixed { position: fixed; }
.flex { display: flex; }
.hidden { display: none; }

/* Positioning (unchanged) */
.bottom-4 { bottom: 1rem; }
.bottom-20 { bottom: 5rem; }
.right-0 { right: 0; }
.right-4 { right: 1rem; }
.z-\[9999\] { z-index: 9999; }

/* Sizing (unchanged) */
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-14 { width: 3.5rem; }
.h-14 { height: 3.5rem; }
.w-80 { width: 20rem; }
.w-full { width: 100%; }
.h-64 { height: 16rem; }
.max-w-xs { max-width: 20rem; }
.mr-2 { margin-right: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.pr-2 { padding-right: 0.5rem; }

/* Layout (unchanged) */
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }

/* Borders & Rounds (enhanced for bubbles) */
.border { border-width: 1px; border-style: solid; }
.border-none { border: none; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-gray-600 { border-color: #4b5563; }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-tl-xl { border-top-left-radius: 0.75rem; }
.rounded-tr-xl { border-top-right-radius: 0.75rem; }
.rounded-bl-xl { border-bottom-left-radius: 0.75rem; }
.rounded-br-xl { border-bottom-right-radius: 0.75rem; }

/* Colors & Backgrounds (fixed for light default, green button) */
.bg-blue-600 { background-color: #116d15; }
.bg-green-100 { background-color: #d1fae5; }
.bg-white { background-color: #ffffff; }
.bg-gray-200 { background-color: #e5e7eb; } /* Light grey for bot bubbles */
.bg-gray-300 { background-color: #d1d5db; } /* Medium grey for user bubbles */
.bg-green-600 { background-color: #16a34a; } /* Green for equipment button */
.text-white { color: #ffffff; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; } /* Added for message text */
.font-semibold { font-weight: 600; }
.cursor-pointer { cursor: pointer; }

/* Dark Mode (optional, softer overrides) */
.dark\:bg-gray-900.dark { background-color: #111827; }
.dark\:bg-gray-800.dark { background-color: #1f2937; }
.dark\:bg-green-800.dark { background-color: #065f46; }
.dark\:border-gray-700.dark { border-color: #374151; }
.dark\:border-gray-600.dark { border-color: #4b5563; }
.dark\:text-gray-200.dark { color: #e5e7eb; }
.dark\:text-gray-300.dark { color: #d1d5db; }
.dark\:text-gray-400.dark { color: #9ca3af; }
.dark\:text-white.dark { color: #ffffff; }
.dark\:hover\:text-gray-300.dark:hover { color: #d1d5db; }

/* Transitions & Animations (unchanged) */
.transition { transition-property: all; }
.transition-all { transition-property: all; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.ease-in-out { transition-timing-function: ease-in-out; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:text-gray-700:hover { color: #374151; }
.focus\:outline-none:focus { outline: none; }
.focus\:border-transparent:focus { border-color: transparent; }
.focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 3px #3b82f6; }
.dark\:focus\:ring-blue-400.dark:focus { box-shadow: 0 0 0 3px #60a5fa; }

/* Shadows & Overflow (unchanged) */
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.overflow-y-auto { overflow-y: auto; }
.object-cover { object-fit: cover; }

/* Scrollbars (unchanged) */
.scrollbar-thin { scrollbar-width: thin; }
.scrollbar-thumb-gray-300 { scrollbar-color: #d1d5db transparent; }
.scrollbar-track-gray-100 { scrollbar-color: transparent #f3f4f6; }
.dark\:scrollbar-thumb-gray-600.dark { scrollbar-color: #4b5563 transparent; }
.dark\:scrollbar-track-gray-800.dark { scrollbar-color: transparent #1f2937; }

/* Animations (unchanged) */
@keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.5s ease-in-out; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Responsiveness (unchanged) */
@media (min-width: 640px) { .sm\:w-96 { width: 24rem; } }
@media (min-width: 1024px) { .lg\:w-\[28rem\] { width: 28rem; } }

/* New: Add for avatar upscale at sm: */
@media (min-width: 640px) {
  .sm\:w-12 { width: 3rem; }
  .sm\:h-12 { height: 3rem; }
}

/* Container Queries (unchanged) */
@container (min-width: 20rem) { .\@container { /* padding adjustments if needed */ } }

/* New: Bubble Enhancements (with tails for modern look) */
.bubble-user { position: relative; }
.bubble-user::after { content: ''; position: absolute; bottom: 0; right: -10px; width: 0; height: 0; border: 10px solid transparent; border-left-color: #d1d5db; border-right: 0; border-bottom: 0; margin-bottom: -10px; }
.bubble-bot { position: relative; }
.bubble-bot::after { content: ''; position: absolute; bottom: 0; left: -10px; width: 0; height: 0; border: 10px solid transparent; border-right-color: #e5e7eb; border-left: 0; border-bottom: 0; margin-bottom: -10px; }

@keyframes typing {
  0%, 20% { content: 'Typing'; }
  21%, 40% { content: 'Typing.'; }
  41%, 60% { content: 'Typing..'; }
  61%, 80% { content: 'Typing...'; }
  81%, 100% { content: 'Typing'; }
}
.typing-ellipsis::before {
  content: 'Typing';
  animation: typing 1.5s steps(4) infinite;
}

/* Dropdown Enhancements */
.relative { position: relative; }
.inline-block { display: inline-block; }
.bg-white { background-color: #ffffff; } /* Already there, but ensure */
.border-gray-200 { border-color: #e5e7eb; } /* Already there */
.rounded-md { border-radius: 0.375rem; }
.z-10 { z-index: 10; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.transition-opacity { transition-property: opacity; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

.border-grey-green { border-color: #8b9b8b; } /* Greyish green: Muted grey with subtle green tint for natural feel */
.focus\:ring-green-400:focus { box-shadow: 0 0 0 3px #737771; } /* Matching muted green ring for focus */