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

@layer components {
  /* Sidebar typography utilities - matching menu size (14px) */
  /* Level 1: Accordion section titles - same as menu (14px / text-sm) */
  .sidebar-label {
    @apply text-sm font-medium text-stone-200;
  }
  
  /* Level 2: Options in the section - slightly smaller (13px) */
  .sidebar-input {
    @apply text-[13px] text-stone-200 font-normal;
  }
  
  .model-name {
    @apply text-[13px] text-stone-200 font-medium;
  }
  
  /* Level 3: Sub-options in the section - smaller (12px) */
  .sidebar-small-label {
    @apply text-xs text-stone-400 font-normal;
  }
  
  .sidebar-section-label {
    @apply text-xs uppercase tracking-wider text-stone-500 font-semibold;
  }
  
  .sidebar-tiny-label {
    @apply text-[9px] uppercase tracking-wider text-stone-500 font-semibold;
  }
  
  /* Level 4: Tags - smallest (11px) */
  .model-air {
    @apply inline-flex items-center px-2 py-0.5 rounded text-[11px] font-mono font-medium text-stone-300 bg-stone-800/60 border border-stone-700/70;
  }
  
  /* Generic tag class - base styling only, no background color */
  .model-tag {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 0.25rem !important; /* Rounded corners */
    font-size: 0.6875rem !important; /* 11px */
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
    font-weight: 500 !important;
    color: rgb(214 211 209) !important;
    border: 1px solid rgb(68 64 60 / 0.7) !important;
  }
  
  /* Ensure background utility classes work with !important */
  .model-tag.bg-stone-800\/60 {
    background-color: rgb(41 37 36 / 0.6) !important;
  }
  
  .model-tag.bg-indigo-500\/50 {
    background-color: rgb(99 102 241 / 0.5) !important;
  }
  
  .model-tag.bg-blue-500\/50 {
    background-color: rgb(59 130 246 / 0.5) !important;
  }
  
  .model-tag.bg-cyan-500\/50 {
    background-color: rgb(6 182 212 / 0.5) !important;
  }
  
  .model-tag.bg-emerald-500\/50 {
    background-color: rgb(16 185 129 / 0.5) !important;
  }
  
  .model-tag.bg-orange-500\/50 {
    background-color: rgb(249 115 22 / 0.5) !important;
  }
  
  .model-tag.bg-purple-500\/50 {
    background-color: rgb(168 85 247 / 0.5) !important;
  }
  
  .model-tag.bg-amber-500\/50 {
    background-color: rgb(245 158 11 / 0.5) !important;
  }
  
  .model-tag.bg-pink-500\/50 {
    background-color: rgb(236 72 153 / 0.5) !important;
  }
  
  /* Make all dimension buttons consistent */
  .aspect-ratio-btn,
  .num-images-btn,
  .resolution-btn {
    @apply text-[13px]; /* 13px - same as options */
  }
  
  /* Ensure aspect-ratio-btn content is bottom-aligned */
  .aspect-ratio-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
  }
  
  .model-option {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  }
  
  .model-option:hover {
    background-color: rgb(87 83 78) !important; /* stone-600 - much lighter than stone-900 */
    border-left: 2px solid rgb(251 191 36 / 0.3) !important; /* amber accent to match logo */
  }

  /* Content tile border for owned content - matches logo amber */
  article.relative.border-2.border-amber-400 {
    border-color: rgb(251 191 36) !important; /* amber-400 to match logo */
  }

  /* Active button borders - match amber background */
  .num-images-btn.bg-amber-400,
  .resolution-btn.bg-amber-400,
  .aspect-ratio-btn.bg-amber-400 {
    border-color: rgb(251 191 36) !important; /* amber-400 to match background */
  }

  /* User dropdown menu width */
  .user-dropdown-menu {
    width: 320px;
    min-width: 320px;
  }
  
  /* Keep dropdown visible when hovering over it or the group */
  .group:hover .user-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
  }
  
  /* Keep dropdown visible when directly hovering it - this ensures it stays visible when mouse moves to it */
  .user-dropdown-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
  }
  
  /* When dropdown becomes visible, ensure it can receive hover */
  .user-dropdown-menu[style*="visibility: visible"],
  .user-dropdown-menu:not([style*="visibility: hidden"]) {
    pointer-events: auto;
  }

  /* Create button responsive expansion */
  .create-button {
    width: 2rem !important; /* 32px - square on mobile */
    min-width: 2rem !important; /* Prevent squishing */
    max-width: 2rem !important; /* Prevent expansion below breakpoint */
    height: 2rem !important; /* Ensure square */
    flex-shrink: 0 !important; /* Prevent flex compression */
  }
  
  @media (min-width: 1024px) {
    .create-button {
      width: max-content !important;
      min-width: auto !important; /* Shrink to fit content */
      max-width: none !important;
      height: 2rem !important; /* Maintain same height as square version */
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
    
    .create-button span,
    .create-button-text {
      display: inline-block !important;
      visibility: visible !important;
      opacity: 1 !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      font-weight: 700 !important; /* Bold */
      font-size: 0.875rem !important; /* Slightly smaller than default (14px) */
      margin-left: 0.5rem !important; /* 0.5rem gap between icon and text */
    }
  }

  /* Mobile menu slide-overlay */
  #mobile-menu-panel {
    transition: transform 0.3s ease-in-out;
  }
  
  #mobile-menu-panel.translate-x-0 {
    transform: translateX(0);
  }
  
  #mobile-menu-panel.-translate-x-full {
    transform: translateX(-100%);
  }

  /* Ensure right section stays right-aligned at all breakpoints */
  .auth-buttons-container {
    margin-left: auto !important;
  }

  /* Ensure hamburger/B icon visibility at correct breakpoints */
  @media (min-width: 1024px) {
    .hamburger-toggle {
      display: none !important;
    }
    
    /* Ensure B icon shows on desktop */
    .logo-b-icon {
      display: flex !important;
    }
    
    /* Ensure tags container shows on desktop */
    .category-tags-container {
      display: flex !important;
    }
  }
  
  @media (max-width: 1023px) {
    .hamburger-toggle {
      display: flex !important;
    }
    
    /* Hide B icon on mobile */
    .logo-b-icon {
      display: none !important;
    }
    
    /* Hide tags container on mobile */
    .category-tags-container {
      display: none !important;
    }
  }

  /* Image generation animations */
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .animate-fade-in {
    animation: fade-in 0.3s ease-out;
  }

  /* Button text transition */
  .button-text-transition {
    transition: opacity 0.2s ease-in-out;
  }

  /* Loading spinner pulse */
  @keyframes spin-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  .animate-spin-pulse {
    animation: spin 1s linear infinite, spin-pulse 2s ease-in-out infinite;
  }

  /* Error overlay fade-in */
  @keyframes error-fade-in {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .error-overlay:not(.hidden) {
    animation: error-fade-in 0.3s ease-out;
  }

  /* Remove/retry button hover effects */
  .remove-btn:hover,
  .retry-btn:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out;
  }

  /* Custom dimension inputs - hide spinner and prevent scrollbar */
  input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield; /* Standard */
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Chrome, Safari, Edge */
    appearance: none; /* Standard */
    margin: 0;
  }

  /* Prevent overflow on number inputs */
  #custom_width_input,
  #custom_height_input {
    overflow: hidden;
  }

  /* Tiptap Editor - Content grows naturally, page scrolls */
  .tiptap-editor-container {
    /* Container expands to fit content - no fixed height */
  }

  /* Target the ProseMirror element that Tiptap creates */
  .ProseMirror {
    @apply outline-none;
    padding-bottom: 2rem; /* Extra space at bottom */
    min-height: 50vh; /* Minimum height for empty editor */
  }

  .ProseMirror:focus {
    @apply outline-none;
  }

  /* Smooth content transitions for Turbo Drive */
  main[data-turbo-temporary] {
    animation: fadeIn 0.2s ease-in;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Masonry gallery - Pinterest-style layout with variable heights */
  .masonry-gallery {
    position: relative;
    overflow: hidden;
    border-radius: 1rem; /* Rounded corners all around, doubled radius */
    margin: 0 auto; /* Center the gallery if it's narrower than parent */
  }
  
  /* All masonry tiles have straight corners (container clips them) */
  .masonry-gallery article {
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
  
  /* Show article once positioned by masonry controller */
  .masonry-gallery article.masonry-positioned {
    opacity: 1;
  }
}