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

@layer components {
  .btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
  }
  
  .btn-primary {
    @apply bg-blue-600 dark:bg-blue-500 text-white hover:bg-blue-700 dark:hover:bg-blue-600 focus:ring-blue-500 dark:focus:ring-blue-400;
  }
  
  .btn-secondary {
    @apply bg-gray-600 dark:bg-gray-700 text-white hover:bg-gray-700 dark:hover:bg-gray-600 focus:ring-gray-500 dark:focus:ring-gray-400 border border-transparent dark:border-gray-600;
  }
  
  .btn-outline {
    @apply bg-transparent text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 focus:ring-gray-500 dark:focus:ring-gray-400;
  }
  
  .form-select {
    @apply px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500;
  }
  
  .toggle-switch {
    @apply w-11 h-6 bg-gray-200 rounded-full dark:bg-gray-700 transition-colors;
  }
}

/* Toggle switch styles */
.toggle-switch {
  position: relative;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 9999px;
  transition: transform 150ms;
}

.peer:checked ~ .toggle-switch {
  background-color: #2563eb;
}

.peer:checked ~ .toggle-switch::after {
  transform: translateX(20px);
}

.peer:focus ~ .toggle-switch {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* Suggestion animations */
.suggestion-container {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.suggestion-appear {
  opacity: 1;
  transform: translateY(0);
}

.suggestion-accepted {
  background-color: rgba(0, 255, 0, 0.1);
  transition: background-color 0.3s ease;
}

.dark .suggestion-accepted {
  background-color: rgba(34, 197, 94, 0.15);
}

.suggestion-rejected {
  background-color: rgba(255, 0, 0, 0.1);
  opacity: 0.6;
  transform: translateY(10px);
  transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.dark .suggestion-rejected {
  background-color: rgba(239, 68, 68, 0.15);
}

/* Sidebar selected conversation */
.dark .bg-blue-800 {
  background-color: rgb(30 64 175 / 0.3);
}

/* Translation tooltip styles */
.translation-badge {
  position: relative;
}

/* Translation toggle animation */
@keyframes translation-toggle {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.translation-badge:active {
  animation: translation-toggle 0.2s ease-out;
}

/* Message translation states */
.showing-original .message-content {
  font-style: italic;
  opacity: 0.9;
}

/* Flash animations */
.flash-notice {
  animation: flash-appear 0.3s ease-in-out;
}

@keyframes flash-appear {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* Pulsing border animation for the message being processed */
.pulse-border {
  animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* Toggle switch styles */
.toggle-switch {
  @apply w-11 h-6 bg-gray-200 rounded-full peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600;
}

/* Translation tooltip styles */
.translation-tooltip {
  @apply absolute bg-gray-900 text-white text-xs rounded-lg px-3 py-2 z-50 shadow-lg;
  white-space: nowrap;
}

.translation-tooltip::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgb(17 24 39);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */