@layer components {
  .chat-widget-container[data-theme='dark'] {
    @apply fixed bottom-6 right-6 z-50;
  }

  .chat-widget-container[data-theme='dark'] .chat-toggle-button {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full shadow-lg text-sm font-medium;
  }

  .chat-widget-container[data-theme='dark'] .chat-window {
    @apply hidden w-80 sm:w-96 bg-gray-900 border border-gray-700 rounded-xl shadow-xl flex flex-col;
  }

  .chat-widget-container[data-theme='dark'] .chat-window-header {
    @apply bg-gray-800 px-4 py-3 flex items-center justify-between rounded-t-xl border-b border-gray-700 text-white text-sm font-semibold;
  }

  .chat-widget-container[data-theme='dark'] .close-btn {
    @apply text-gray-400 hover:text-white text-lg;
  }

  .chat-widget-container[data-theme='dark'] .chat-window-body {
    @apply flex-1 overflow-y-auto max-h-96 px-4 py-3 space-y-2 text-sm flex flex-col;
  }

  .chat-widget-container[data-theme='dark'] .chat-message {
    @apply w-full rounded p-2 shadow-sm;
  }

  .chat-widget-container[data-theme='dark'] .chat-message.bot {
    @apply bg-gray-100 text-black;
  }

  .chat-widget-container[data-theme='dark'] .chat-message.user {
    @apply bg-blue-600 text-white self-end;
  }

  .chat-widget-container[data-theme='dark'] .chat-option-btn {
    @apply w-full bg-gray-100 hover:bg-gray-200 text-black border border-gray-400 rounded px-3 py-2 text-left text-sm shadow-sm;
  }

  .chat-widget-container[data-theme='dark'] .chat-window-footer {
    @apply px-4 py-3 bg-gray-800 border-t border-gray-700 flex gap-2 items-center rounded-b-xl;
  }

  .chat-widget-container[data-theme='dark'] #chatInput {
    @apply flex-1 bg-gray-100 text-black px-3 py-2 rounded-md text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500;
  }

  .chat-widget-container[data-theme='dark'] #sendMsgBtn {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium;
  }
}