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

body {
  @apply bg-gray-50;
}

.message-container {
  @apply p-4 rounded;
}

.messages-container {
  @apply p-5;
}

@layer components {
  .chat-search-bar .form-container {
    @apply flex flex-col w-full relative shadow-md rounded border border-gray-200 text-xs;
  }

  .chat-search-bar .text-area {
    @apply border-none focus:outline-none focus:ring-0 text-xs;
  }

  .chat-search-bar .button-icon {
    @apply flex items-center justify-center text-gray-500 hover:text-gray-700;
  }

  .chat-search-bar .submit-btn {
    @apply bg-white border border-gray-600 text-gray-900 py-2 px-4 rounded cursor-pointer hover:bg-gray-50;
  }
}

.ai-response {
  @apply text-gray-900 text-base space-y-6;
}

.ai-response ul {
  @apply list-disc pl-6 mb-4;
}

.ai-response table {
  @apply w-full text-left border-collapse;
}

.ai-response table thead tr {
  @apply bg-gray-200 text-gray-700;
}

.ai-response table thead th {
  @apply px-4 py-2;
}

.ai-response table tbody tr {
  @apply hover:bg-gray-100 border-b;
}

.ai-response table tbody td {
  @apply px-4 py-2;
}

/* Base Container Styles */
.page-container {
  @apply flex min-h-screen flex-col bg-gray-50 text-gray-900 p-4;
}

/* Navigation Styles */
.back-link {
  @apply flex items-center text-sm font-medium text-gray-600;
}

.back-icon {
  @apply mr-2 h-4 w-4;
}

/* Form Container Styles */
.form-wrapper {
  @apply flex-1 flex flex-col items-center justify-center;
}

.form-container {
  @apply w-full max-w-md space-y-8;
}

/* Header Styles */
.page-title {
  @apply text-3xl font-bold;
}

.page-subtitle {
  @apply mt-2 text-gray-500;
}

/* Input Styles */
.input-label {
  @apply block text-gray-700 font-medium;
}

.input-field {
  @apply w-full bg-white border-gray-200 rounded-md shadow-sm focus:ring-black focus:border-black;
}

/* Input Group Styles */
.input-group {
  @apply space-y-2;
}

.input-group-horizontal {
  @apply flex items-center justify-between;
}

/* Button Styles */
.submit-button {
  @apply w-full bg-gray-700 text-white px-6 py-2 rounded hover:bg-gray-600;
}

.submit-button:disabled {
  @apply bg-gray-400 text-gray-200 cursor-not-allowed opacity-50;
}

/* Link Styles */
.secondary-link {
  @apply text-sm text-gray-500 hover:text-black;
}

.signup-text {
  @apply text-sm text-gray-500;
}

.signup-link {
  @apply text-black hover:underline;
}

/* Status Message Styles */
.notice-message {
  @apply text-green-500;
}

.alert-message {
  @apply text-red-500;
}

.sidebar-container {
  @apply -translate-x-full md:translate-x-0;
  /* Hidden on mobile, visible on desktop */
}

.sidebar-link svg {
  @apply transition-transform duration-200 ease-in-out;
}

.sidebar-link:hover svg {
  @apply scale-110;
}

/* Conversations Specific Styles */
.conversations-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-6;
}

.conversation-card {
  @apply bg-white border border-gray-200 rounded-md p-4 hover:shadow-md transition-shadow;
}

.conversation-title {
  @apply block text-gray-800 truncate text-base font-medium hover:text-black;
}

.conversation-actions {
  @apply flex justify-end mt-4;
}

.delete-button {
  @apply text-red-600 hover:text-red-800 text-sm;
}

/* Table Styles */
.table-responsive {
  @apply overflow-x-auto;
}

.conversations-table {
  @apply w-full border border-gray-200 text-sm text-left;
}

.conversations-table thead tr {
  @apply bg-gray-100 text-gray-700;
}

.conversations-table thead th {
  @apply px-4 py-2 font-medium;
}

.conversations-table tbody tr {
  @apply border-b hover:bg-gray-50;
}

.conversations-table tbody td {
  @apply px-4 py-2;
}

.input-hint {
  @apply text-xs text-gray-500 mt-1;
}