/**
 * Mobile Editor Styles - WhatsApp-Inspired Interface
 * 
 * Provides a thumb-zone optimized, touch-friendly UI for the image editor.
 * Features: bottom toolbar, large touch targets, contextual thickness popup.
 */

/* ==========================================================================
   CSS Variables for Prompt Bar Height
   ========================================================================== */
:root {
  /* Default prompt bar height - adjust if needed */
  --editor-prompt-bar-height: 100px;
  --editor-prompt-bar-height-expanded: 140px;
}

/* ==========================================================================
   Mobile Editor Wrapper
   ========================================================================== */
.editor-mobile-wrapper {
  position: fixed;
  inset: 0;
  z-index: 3100;
  pointer-events: none;
}

/* ==========================================================================
   Bottom Toolbar - WhatsApp Style
   Positioned ABOVE the prompt bar (.input-section)
   ========================================================================== */
.editor-mobile-toolbar {
  position: fixed;
  /* Position above the prompt bar */
  bottom: calc(var(--editor-prompt-bar-height) + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  padding: 12px 16px;
  pointer-events: auto;
  z-index: 3100; /* Above input-section (2400) */
  transition: bottom 0.2s ease;
}

/* When input is focused, prompt bar expands - adjust toolbar position */
body:has(.input-section:focus-within) .editor-mobile-toolbar {
  bottom: calc(var(--editor-prompt-bar-height-expanded) + env(safe-area-inset-bottom, 0px));
}

.editor-mobile-toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 400px;
  margin: 0 auto;
  background: rgba(18, 18, 18, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 28px;
  padding: 8px 16px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Draggable cursor - consistent with Freeform */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Dragging state for toolbar */
.editor-mobile-toolbar.dragging {
  /* CRITICAL: Disable ALL transitions during drag for 1:1 movement */
  transition: none !important;
}

.editor-mobile-toolbar.dragging .editor-mobile-toolbar-inner {
  cursor: grabbing;
  box-shadow: 
    0 12px 48px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: scale(1.02);
}

/* Toolbar opacity transition for smooth fade during tool use */
.editor-mobile-toolbar {
  transition: opacity 0.25s ease, left 0.15s ease, top 0.15s ease, bottom 0.2s ease;
}

/* When not dragging, smooth snap-back for any position changes */
.editor-mobile-toolbar:not(.dragging) {
  transition: opacity 0.25s ease, left 0.15s ease, top 0.15s ease, bottom 0.2s ease;
}

.editor-mobile-thickness-popup {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

/* ==========================================================================
   Tool Buttons
   ========================================================================== */
.editor-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.editor-mobile-btn:active,
.editor-mobile-btn.pressed {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.1);
}

.editor-mobile-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.editor-mobile-icon {
  width: 28px;
  height: 28px;
  filter: brightness(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease;
}

.editor-mobile-btn:active .editor-mobile-icon {
  transform: scale(0.95);
}

/* ==========================================================================
   Center Tools Group
   ========================================================================== */
.editor-mobile-tools-group {
  display: flex;
  align-items: center;
  gap: 0px; /* Tighter spacing between the 4 center tools */
}

/* Active tool indicator ring */
.editor-mobile-tool {
  position: relative;
}

.editor-mobile-tool-indicator {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.25s ease;
  pointer-events: none;
}

.editor-mobile-tool.active .editor-mobile-tool-indicator {
  border-color: #ff4757;
  background: rgba(255, 71, 87, 0.15);
  box-shadow: 
    0 0 12px rgba(255, 71, 87, 0.4),
    inset 0 0 8px rgba(255, 71, 87, 0.2);
}

.editor-mobile-tool.active .editor-mobile-icon {
  filter: brightness(1.1) drop-shadow(0 0 4px rgba(255, 71, 87, 0.5));
}

/* ==========================================================================
   Thickness Popup - Slides Up from Toolbar
   ========================================================================== */
.editor-mobile-thickness-popup {
  position: fixed;
  /* Default position - will be overridden by JS when toolbar moves */
  bottom: calc(var(--editor-prompt-bar-height) + env(safe-area-inset-bottom, 0px) + 90px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 3101;
}

/* When input is focused, adjust popup position too (only when not manually positioned) */
body:has(.input-section:focus-within) .editor-mobile-thickness-popup:not(.visible) {
  bottom: calc(var(--editor-prompt-bar-height-expanded) + env(safe-area-inset-bottom, 0px) + 90px);
}

.editor-mobile-thickness-popup.visible {
  /* JS sets left/bottom/transform when visible */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.editor-mobile-thickness-content {
  background: rgba(18, 18, 18, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 280px;
}

/* Thickness Preview Circle */
.editor-mobile-thickness-preview {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  flex-shrink: 0;
}

.editor-mobile-thickness-circle {
  background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
  transition: all 0.15s ease;
  min-width: 4px;
  min-height: 4px;
  max-width: 56px;
  max-height: 56px;
}

/* Slider Wrap */
.editor-mobile-thickness-slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* Custom Range Slider */
.editor-mobile-thickness-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.editor-mobile-thickness-slider::-webkit-slider-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.editor-mobile-thickness-slider {
  --thumb-size: 28px; /* Default, updated by JS */
}

.editor-mobile-thickness-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-size, 28px);
  height: var(--thumb-size, 28px);
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.2);
  transition: width 0.15s ease, height 0.15s ease, transform 0.15s ease;
}

.editor-mobile-thickness-slider::-webkit-slider-thumb:active {
  transform: scale(1.15);
}

.editor-mobile-thickness-slider::-moz-range-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  border: none;
}

.editor-mobile-thickness-slider::-moz-range-thumb {
  width: var(--thumb-size, 28px);
  height: var(--thumb-size, 28px);
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(255, 255, 255, 0.2);
  transition: width 0.15s ease, height 0.15s ease;
}

/* Thickness Value Label */
.editor-mobile-thickness-value {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  min-width: 28px;
  text-align: right;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  opacity: 0.9;
}

/* Dismiss Area - Invisible touch target to close popup */
.editor-mobile-thickness-dismiss {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.editor-mobile-thickness-dismiss.visible {
  pointer-events: auto;
}

/* ==========================================================================
   Zoom Indicator - Shows current zoom level
   ========================================================================== */
.editor-mobile-zoom-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3200;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.editor-mobile-zoom-indicator.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.editor-mobile-zoom-indicator .zoom-value {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   Zoom-Safe UI - Toolbar stays fixed during pinch zoom
   ========================================================================== */
.editor-mobile-wrapper {
  /* Prevent wrapper from being affected by parent transforms */
  contain: layout style;
}

.editor-mobile-toolbar,
.editor-mobile-thickness-popup {
  /* Ensure fixed positioning works even with transformed parents */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Ensure close button and quality pill stay fixed during zoom */
body.editor-mobile-active .editor-close-btn,
body.editor-mobile-active .editor-quality-pill,
body.editor-mobile-active .editor-quality-dropdown {
  position: fixed !important;
  transform: translateZ(0);
}

body.editor-mobile-active {
  --editor-top-right-top: 71px;
  --editor-top-right-offset: 35px;
  --editor-close-btn-size: 36px;
  --editor-close-gap: 8px;
}

/* Close button must be above EVERYTHING including capsule panel */
body.editor-mobile-active .editor-close-btn {
  z-index: 9999 !important;
}

/* Keep close button aligned when capsule panel opens */
body.editor-mobile-active .main-content.generations-open .editor-close-btn {
  right: calc(var(--capsule-panel-width, 242px) + var(--editor-top-right-offset, 35px));
}

/* Quality pill positioning - below top bar */
body.editor-mobile-active .editor-quality-pill {
  top: calc(var(--editor-top-right-top, 71px) + env(safe-area-inset-top, 0px));
  right: calc(var(--editor-top-right-offset, 35px) + var(--editor-close-btn-size, 36px) + var(--editor-close-gap, 8px));
  transition: right 0.3s ease;
}

body.editor-mobile-active .editor-quality-dropdown {
  top: calc(var(--editor-top-right-top, 71px) + env(safe-area-inset-top, 0px) + 40px);
  right: calc(var(--editor-top-right-offset, 35px) + var(--editor-close-btn-size, 36px) + var(--editor-close-gap, 8px));
  transition: right 0.3s ease;
}

/* Push quality pill when capsule panel is open */
body.editor-mobile-active .main-content.generations-open .editor-quality-pill {
  right: calc(var(--capsule-panel-width, 242px) + var(--editor-top-right-offset, 35px) + var(--editor-close-btn-size, 36px) + var(--editor-close-gap, 8px));
}

body.editor-mobile-active .main-content.generations-open .editor-quality-dropdown {
  right: calc(var(--capsule-panel-width, 242px) + var(--editor-top-right-offset, 35px) + var(--editor-close-btn-size, 36px) + var(--editor-close-gap, 8px));
}

/* ==========================================================================
   Hide Desktop Toolbar (obsolete - desktop toolbar removed)
   ========================================================================== */
/* Hide desktop top toolbar */
body.editor-mobile-active .top-toolbar {
  display: none !important;
}

/* ==========================================================================
   CRITICAL FIX: Canvas area must account for BOTH top bar AND bottom toolbar/prompt bar
   Top bar height: ~60-70px (using CSS variable for consistency)
   Toolbar height: ~76px, positioned at bottom: 100px (above prompt bar)
   Total reserved space: prompt bar (100px) + toolbar (76px) + gap (12px) = ~188px
   
   BALANCED LAYOUT: The image should be centered in the available space between
   the top bar and the bottom toolbar/prompt bar. Adding padding-top helps achieve this.
   ========================================================================== */

/* Adjust editor container padding for top bar + bottom toolbar + prompt bar */
body.editor-mobile-active .editor-container {
  /* Add top padding to account for top bar and center the content better */
  padding-top: calc(var(--topbar-height, 60px) + 20px);
  padding-bottom: calc(var(--editor-prompt-bar-height, 100px) + 100px);
}

/* Ensure image wrapper has room for balanced vertical centering */
body.editor-mobile-active .editor-image-wrapper {
  /* Reduce max-height to account for both top and bottom reserved space */
  max-height: calc(100% - 280px) !important;
  /* Keep bottom margin for toolbar + prompt bar */
  margin-bottom: calc(var(--editor-prompt-bar-height, 100px) + 90px);
  /* Add slight top margin for breathing room from top bar */
  margin-top: 20px;
}

/* Ensure canvas and drawing layers also respect the bottom space */
body.editor-mobile-active .editor-mask-canvas,
body.editor-mobile-active .editor-images-layer,
body.editor-mobile-active .notes-layer {
  /* These are positioned absolute within the wrapper, so they follow automatically */
}

/* REMOVED: Don't change editor layout when input is focused
   The editor should remain static - only the toolbar needs to adjust.
   Previously this was pushing the editor content up when focusing the prompt bar.

body.editor-mobile-active:has(.input-section:focus-within) .editor-container {
  padding-bottom: calc(var(--editor-prompt-bar-height-expanded, 140px) + 100px);
}

body.editor-mobile-active:has(.input-section:focus-within) .editor-image-wrapper {
  margin-bottom: calc(var(--editor-prompt-bar-height-expanded, 140px) + 90px);
}
*/

/* ==========================================================================
   Toolbar Centering with Sidebars (Desktop)
   ========================================================================== */
/* When sidebar (left) is open - shift toolbar right */
.sidebar.open ~ .main-content .editor-mobile-toolbar,
body.editor-mobile-active .sidebar.open ~ .main-content .editor-mobile-toolbar {
  left: var(--sidebar-width, 330px);
}

/* When capsule panel (right) is open - shift toolbar left */
.main-content.generations-open .editor-mobile-toolbar,
body.editor-mobile-active .main-content.generations-open .editor-mobile-toolbar {
  right: var(--capsule-panel-width, 242px);
}

/* When both sidebars are open - adjust both sides */
.sidebar.open ~ .main-content.generations-open .editor-mobile-toolbar,
body.editor-mobile-active .sidebar.open ~ .main-content.generations-open .editor-mobile-toolbar {
  left: var(--sidebar-width, 330px);
  right: var(--capsule-panel-width, 242px);
}

/* Thickness popup positioning is now handled dynamically by JS
   to follow the toolbar when it's been dragged */

/* ==========================================================================
   Desktop-specific: Toolbar 15% smaller than mobile
   ========================================================================== */
@media (min-width: 769px) {
  .editor-mobile-toolbar-inner {
    max-width: 340px;  /* Was 400px, reduced by 15% */
    padding: 7px 14px; /* Was 8px 16px, reduced by ~15% */
    border-radius: 24px; /* Was 28px, reduced proportionally */
  }

  .editor-mobile-btn {
    width: 44px;  /* Was 52px, reduced by 15% */
    height: 44px;
  }

  .editor-mobile-icon {
    width: 24px;  /* Was 28px, reduced by 15% */
    height: 24px;
  }

  .editor-mobile-tools-group {
    gap: 0px;
  }

  .editor-mobile-thickness-content {
    padding: 14px 17px;  /* Was 16px 20px */
    min-width: 240px;    /* Was 280px */
    border-radius: 17px; /* Was 20px */
  }

  .editor-mobile-thickness-preview {
    width: 51px;  /* Was 60px */
    height: 51px;
    border-radius: 10px;
  }

  .editor-mobile-thickness-slider-wrap {
    gap: 10px; /* Was 12px */
  }
}

/* ==========================================================================
   Mobile-specific overrides (small screens)
   ========================================================================== */
@media (max-width: 768px) {
  /* Quality pill on small screens - still below top bar */
  body.editor-mobile-active {
    --editor-top-right-top: 70px;
    --editor-top-right-offset: 20px;
    --editor-close-btn-size: 34px;
    --editor-close-gap: 8px;
  }

  body.editor-mobile-active .editor-quality-pill {
    padding: 6px 12px;
    font-size: 10px;
  }

  body.editor-mobile-active .editor-quality-dropdown {
    top: calc(var(--editor-top-right-top, 70px) + env(safe-area-inset-top, 0px) + 35px);
  }

  /* On actual mobile, don't shift for sidebars (they overlay) */
  .sidebar.open ~ .main-content .editor-mobile-toolbar,
  .main-content.generations-open .editor-mobile-toolbar,
  .sidebar.open ~ .main-content.generations-open .editor-mobile-toolbar {
    left: 0;
    right: 0;
  }
}

/* ==========================================================================
   Landscape Mode Adjustments
   ========================================================================== */
@media (max-width: 768px) and (orientation: landscape) {
  :root {
    --editor-prompt-bar-height: 80px;
    --editor-prompt-bar-height-expanded: 100px;
  }
  
  .editor-mobile-toolbar {
    padding: 8px 16px;
  }
  
  .editor-mobile-thickness-popup {
    bottom: calc(var(--editor-prompt-bar-height) + env(safe-area-inset-bottom, 0px) + 70px);
  }

  .editor-mobile-toolbar-inner {
    padding: 6px 12px;
    border-radius: 24px;
  }

  .editor-mobile-btn {
    width: 44px;
    height: 44px;
  }

  .editor-mobile-icon {
    width: 24px;
    height: 24px;
  }

  .editor-mobile-thickness-content {
    padding: 12px 16px;
    min-width: 240px;
  }

  .editor-mobile-thickness-preview {
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   Very Small Screens (iPhone SE, etc.)
   ========================================================================== */
@media (max-width: 375px) {
  .editor-mobile-toolbar-inner {
    padding: 6px 12px;
    max-width: 320px;
  }

  .editor-mobile-btn {
    width: 46px;
    height: 46px;
  }

  .editor-mobile-icon {
    width: 24px;
    height: 24px;
  }

  .editor-mobile-thickness-content {
    min-width: 260px;
    padding: 14px 16px;
  }
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes editor-mobile-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 71, 87, 0);
  }
}

.editor-mobile-tool.active .editor-mobile-tool-indicator {
  animation: editor-mobile-pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Dark Mode Support (if needed in future)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .editor-mobile-toolbar-inner {
    background: rgba(18, 18, 18, 0.95);
  }
  
  .editor-mobile-thickness-content {
    background: rgba(18, 18, 18, 0.98);
  }
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .editor-mobile-thickness-popup {
    transition: opacity 0.15s ease;
  }
  
  .editor-mobile-tool.active .editor-mobile-tool-indicator {
    animation: none;
  }
  
  .editor-mobile-btn:active {
    transition: none;
  }
}