/* ============================================
   MOBILE UX ENHANCEMENTS
   Optimizations for mobile and tablet screens
   ============================================ */

/* ========================================
   CRITICAL FIXES (Usability Impact)
   ======================================== */

/* Fix #1: Input dock padding reduction
   Remove 40px horizontal waste, increase usable width by ~10% */
@media (max-width: 480px) {
  .input-dock .container {
    padding: 6px 8px 8px 8px !important;
  }
  .chat-pod {
    margin: 0 !important;
    border-radius: 20px;
  }
}

/* Fix #2: Chat message margins removal
   Full-width messages on mobile for better readability */
@media (max-width: 480px) {
  .msg.user,
  .msg.bot {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100%;
  }
}

/* Fix #3: Settings indicator readability
   Increase font size and opacity for WCAG compliance */
@media (max-width: 480px) {
  .settings-indicator {
    font-size: 12px !important;
    opacity: 0.9 !important;
    padding: 4px 12px;
    line-height: 1.6;
  }
}

/* ========================================
   HIGH PRIORITY (Touch Targets & Spacing)
   ======================================== */

/* Fix #4: Card stack spacing optimization
   Remove vertical gaps between card rows, reduce padding */
@media (max-width: 480px) {
  .card-stacks {
    gap: 0 !important;
  }
  .hscroll {
    padding: 4px 8px !important;
  }
}

/* Fix #5: Slot caption input dimensions
   Increase min-height and font size for better touch target */
@media (max-width: 480px) {
  .slot-caption-input {
    font-size: 14px !important;
    padding: 8px 10px !important;
    min-height: 36px !important;
  }
}

/* Fix #6: Clarify button touch target
   Increase to 44px height with better padding */
@media (max-width: 480px) {
  .clarify-btn {
    padding: 10px 16px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }
}

/* Fix #7: History row touch target
   Increase vertical padding with 80px min-height */
@media (max-width: 480px) {
  .history-row {
    padding: 16px 14px !important;
    min-height: 80px;
  }
}

/* ========================================
   POLISH & FIXES
   ======================================== */

/* Fix #8: Hamburger menu z-index
   Fix stacking context to prevent content overlap on scroll */
.sidebar-toggle-btn {
  z-index: 1003 !important;
}

/* Fix #9: Topbar padding optimization
   Reduce left padding to save horizontal space */
@media (max-width: 480px) {
  .topbar {
    padding-left: 56px !important;
  }
  .sidebar-toggle-btn {
    left: 12px !important;
  }
}

/* Fix #10: Vision drop overlay
   Full-screen drop zone on mobile */
@media (max-width: 480px) {
  .vision-drop-overlay {
    margin: 0 !important;
    border-width: 5px !important;
  }
}

/* ========================================
   TABLET OPTIMIZATIONS (768px)
   ======================================== */

@media (max-width: 768px) and (min-width: 481px) {
  /* Moderate input dock padding reduction for tablet */
  .input-dock .container {
    padding: 6px 12px 8px 12px !important;
  }
  
  /* Better chat message width on tablet */
  .msg.user,
  .msg.bot {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
}

/* ========================================
   SMALL PHONES (360px and below)
   ======================================== */

@media (max-width: 360px) {
  /* Extra compact input dock for very small screens */
  .input-dock .container {
    padding: 4px 6px 6px 6px !important;
  }
  
  /* Tighter topbar on small phones */
  .topbar {
    padding-left: 50px !important;
  }
  .sidebar-toggle-btn {
    left: 8px !important;
  }
}

/* ========================================
   MOBILE DRAG-AND-DROP FIXES
   Prevent context menu on long-press
   ======================================== */

/* Disable context menu on draggable cards (all screen sizes) */
.card-draggable,
.card-draggable img {
  /* Prevent iOS/Safari context menu */
  -webkit-touch-callout: none;
  /* Prevent Android/Chrome context menu */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Prevent text selection cursor */
  cursor: move;
  /* Allow vertical scrolling, but prevent horizontal panning until drag starts */
  /* SortableJS will handle drag after delay/threshold */
  touch-action: pan-y;
}

/* Top row (#all) cards: allow horizontal scrolling for the deck */
/* NOTE: SortableJS needs touch-action: pan-y (not pan-x) to detect drag gestures */
/* Horizontal scrolling is handled by the #all container, not individual cards */
#all .card-draggable {
  touch-action: pan-y; /* Allow vertical scrolling, let SortableJS handle horizontal drag */
}
#all .card-draggable img {
  touch-action: pan-x pan-y; /* Images can scroll horizontally within the card */
}

/* Allow horizontal scroll on the container */
.hscroll {
  touch-action: pan-x pan-y;
}

/* Hide X button and UI elements during drag (on source and mirror) */
.draggable-source--is-dragging .card-remove-btn,
.draggable-source--is-dragging .slot-x,
.draggable--original .card-remove-btn,
.draggable--original .slot-x {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Keep schema labels visible and in place during drag */
.draggable-source--is-dragging .slot-caption,
.draggable-source--is-dragging .slot-caption-input {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
}

/* Keep clarify button visible in original */
.draggable-source--is-dragging .clarify-btn {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure hscroll-inner is positioned for absolute children */
#sel.hscroll .hscroll-inner {
  position: relative;
}

/* Original slot stays empty during drag */
.draggable-source--is-dragging .card-draggable {
  opacity: 0 !important; /* Completely hide the card */
}

.draggable-source--is-dragging .slot-caption {
  opacity: 1 !important; /* Keep schema visible */
}

.draggable-source--is-dragging .slot-empty {
  opacity: 1 !important; /* Show empty state */
  display: flex !important;
}

/* Re-enable text selection for card captions */
.slot-caption,
.slot-caption-input {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* ========================================
   ENHANCED DRAG-AND-DROP VISUAL FEEDBACK
   ======================================== */

/* SWAP MODE: Bright BLUE glow - only the image glows, not the card container */
#sel .card-draggable.swap-target {
  z-index: 5 !important;
  /* No glow/transform on card container itself */
}

/* Glow only on the image element */
#sel .card-draggable.swap-target img {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.6) !important;
  transform: scale(1.05) !important;
  filter: brightness(1.1) !important;
  transition: all 0.15s ease !important;
}

/* Ensure slot caption is not affected by card glow/transform */
#sel .hscroll-item.swap-hover .slot-caption,
#sel .hscroll-item.swap-hover .slot-caption-input {
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* INSERT MODE: Green glow is applied via inline styles in JavaScript
   boxShadow: '0 0 20px 4px rgba(16, 185, 129, 0.6)' - cards will reorder */