/* Tailwind CSS CDN */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Core animations and effects */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.topic-button:hover {
  transform: translateY(-1px);
}

.note-content-display {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Notification animations */
.share-success-popup,
.share-url-popup {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Typography and content styling */
.prose {
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.prose h1 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1f2937;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
  margin-top: 0;
}

.prose h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #374151;
}

.prose h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #4b5563;
}

.prose p {
  margin-bottom: 1rem;
  color: #374151;
}

.prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.prose li {
  margin-bottom: 0.5rem;
  color: #374151;
}

.prose strong {
  font-weight: 600;
  color: #1f2937;
}

.prose code {
  background-color: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  color: #1f2937;
}

.prose pre {
  background-color: #f9fafb;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid #e5e7eb;
}

/* Shared content popup styling */
.fixed.inset-0 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Shared popup specific styles */
.fixed.inset-0 {
  backdrop-filter: blur(2px);
}

.fixed.inset-0 .bg-white {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Accessibility and interactions */
.note-content-header button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.note-content-header button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.note-content-header button:active {
  transform: translateY(0);
}

/* Layout overflow prevention */
.note-viewer-section {
  max-width: 100%;
  overflow-x: hidden;
}

.note-viewer-controls,
.note-topics-buttons,
.note-content-display {
  max-width: 100%;
  overflow-x: hidden;
}

/* Print styles */
@media print {
  .fixed {
    position: static !important;
    background: white !important;
  }
  
  .bg-black {
    background: white !important;
  }
  
  .border-t, .border-b {
    display: none !important;
  }
  
  button {
    display: none !important;
  }
  
  .sticky {
    position: static !important;
  }
}

/* Add these mobile-specific fixes */

/* Fix mobile search input zoom and overflow */
@media (max-width: 640px) {
  /* Prevent zoom on input focus */
  input[type="text"], 
  input[type="search"], 
  input[type="email"], 
  input[type="number"], 
  input[type="tel"], 
  input[type="url"], 
  input[type="password"], 
  textarea, 
  select {
    font-size: 16px !important;
    transform: none !important;
  }
  
  /* Prevent viewport changes */
  .note-viewer-controls input,
  .note-viewer-controls select {
    font-size: 16px;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  /* Fix button layout overflow */
  .action-buttons-container {
    width: 100%;
    overflow: hidden;
  }
  
  .action-buttons-container .flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .action-buttons-container button {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    overflow: hidden;
  }
  
  .action-buttons-container button span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Ensure search container doesn't expand */
  .note-viewer-controls {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  .note-viewer-controls > div {
    width: 100%;
    max-width: 100%;
  }
  
  /* Fix input container overflow */
  .note-viewer-controls .flex-1 {
    min-width: 0;
    width: 100%;
  }
  
  /* Responsive button grid */
  @media (max-width: 480px) {
    .action-buttons-container .flex {
      flex-direction: column;
    }
    
    .action-buttons-container button {
      flex: none;
      width: 100%;
    }
  }
}

/* Fix shared popup buttons on mobile */
@media (max-width: 640px) {
  .action-buttons-container button {
    min-height: 44px; /* Minimum touch target */
    justify-content: center;
  }
  
  .action-buttons-container svg {
    flex-shrink: 0;
  }
}

/* Line clamp utilities for text truncation */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}