/**
 * Community Platform - Feedback Widget Styles
 * Ported from Tractatus project
 *
 * This file provides additional styling for the feedback widget
 * that complements the Tailwind classes in the component.
 */

/* ============================================================================
   Feedback FAB (Floating Action Button)
   ============================================================================ */

#feedback-fab {
  /* Ensure FAB is always visible and accessible */
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  z-index: 1000 !important;

  /* Smooth animations */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#feedback-fab:hover {
  transform: scale(1.1);
}

#feedback-fab:active {
  transform: scale(0.95);
}

/* Responsive FAB positioning */
@media (max-width: 768px) {
  #feedback-fab {
    bottom: 1rem !important;
    right: 1rem !important;
  }
}

/* ============================================================================
   Feedback Modal/Bottom Sheet
   ============================================================================ */

#feedback-modal {
  /* Ensure modal is above other content */
  z-index: 1001 !important;
}

#feedback-backdrop {
  /* Smooth backdrop transition */
  transition: opacity 0.3s ease-out;
}

#feedback-panel {
  /* Smooth panel transitions */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile bottom sheet style */
@media (max-width: 768px) {
  #feedback-panel {
    border-radius: 1rem 1rem 0 0;
  }
}

/* ============================================================================
   Feedback Type Buttons
   ============================================================================ */

.feedback-type-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.feedback-type-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.feedback-type-btn:active {
  transform: translateY(0);
}

/* ============================================================================
   Form Elements
   ============================================================================ */

#feedback-form textarea,
#feedback-form input {
  transition: all 0.2s ease-in-out;
}

#feedback-form textarea:focus,
#feedback-form input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

/* ============================================================================
   Animations
   ============================================================================ */

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide up animation */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Scale in animation */
@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Apply animations */
#feedback-modal:not(.hidden) #feedback-backdrop {
  animation: fadeIn 0.3s ease-out;
}

#feedback-modal:not(.hidden) #feedback-panel {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 769px) {
  #feedback-modal:not(.hidden) #feedback-panel {
    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ============================================================================
   Accessibility
   ============================================================================ */

/* Focus styles */
#feedback-fab:focus,
.feedback-type-btn:focus,
#feedback-form button:focus,
#feedback-form input:focus,
#feedback-form textarea:focus {
  outline: 2px solid var(--color-accent-500, #14b8a6);
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  #feedback-fab,
  #feedback-panel,
  #feedback-backdrop,
  .feedback-type-btn,
  #feedback-form textarea,
  #feedback-form input {
    transition: none !important;
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  #feedback-fab {
    border: 2px solid currentColor;
  }

  .feedback-type-btn {
    border-width: 3px;
  }
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
  #feedback-fab,
  #feedback-modal {
    display: none !important;
  }
}

/* ============================================================================
   Color Utilities (fallback for non-Tailwind setups)
   ============================================================================ */

/* Teal color classes (matching Community design system) */
.bg-teal-50 {
  background-color: #f0fdfa;
}

.bg-teal-600 {
  background-color: #0d9488;
}

.bg-cyan-600 {
  background-color: #0891b2;
}

.border-teal-200 {
  border-color: #99f6e4;
}

.border-teal-500 {
  border-color: #14b8a6;
}

.text-teal-600 {
  color: #0d9488;
}

.text-teal-700 {
  color: #0f766e;
}

.text-teal-900 {
  color: #134e4a;
}

.hover\:bg-teal-50:hover {
  background-color: #f0fdfa;
}

.hover\:bg-teal-700:hover {
  background-color: #0f766e;
}

.hover\:border-teal-500:hover {
  border-color: #14b8a6;
}

.focus\:ring-teal-500:focus {
  --tw-ring-color: #14b8a6;
}

.focus\:border-teal-500:focus {
  border-color: #14b8a6;
}

/* Gradient utilities */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-teal-600 {
  --tw-gradient-from: #0d9488;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(13, 148, 136, 0));
}

.to-cyan-600 {
  --tw-gradient-to: #0891b2;
}

.from-teal-50 {
  --tw-gradient-from: #f0fdfa;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240, 253, 250, 0));
}

.to-cyan-50 {
  --tw-gradient-to: #ecfeff;
}