@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'Inter', sans-serif;
}

.websocket-connected {
  @apply text-green-600;
}

.websocket-disconnected {
  @apply text-red-600;
}

.message-list {
  @apply max-h-96 overflow-y-auto border rounded p-4 bg-gray-50;
}

.message-item {
  @apply mb-2 p-2 bg-white rounded shadow-sm;
}

.message-input {
  @apply border border-gray-300 rounded px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.send-button {
  @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500;
}