/* Keystone Workspace Mobile Optimization Pass
   Date: 2026-01-25
   Scope: Mobile-only rules (max-width: 768px / 480px)
   Desktop layout remains unchanged.
*/

/* =============================================================
   MOBILE BREAKPOINT: max-width 768px
   ============================================================= */
@media screen and (max-width: 768px) {

  /* Safe Area Padding for iOS Notch/Home Indicator */
  html, body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Prevent Horizontal Scroll */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Dynamic Viewport Height for iOS */
  .keystone-workspace-root {
    height: 100dvh;
    height: 100dvh; /* Fallback */
  }

  /* Header: Increased height and padding for mobile readability */
  .workspace-canvas-header {
    padding: 0 16px;
    gap: 10px;
    height: 60px;
    min-height: 60px;
  }

  /* Title: Larger for mobile readability */
  .workspace-canvas-header h1 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
  }

  /* Header Nav: Tighter spacing */
  .kw-header-nav {
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .kw-header-nav::-webkit-scrollbar {
    display: none;
  }

  /* Header Icons: 44px minimum tap target (Apple HIG) */
  .kw-header-icon {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  /* SVG icons: Slightly larger on mobile for visibility */
  .kw-icon-svg {
    width: 22px;
    height: 22px;
  }

  /* Role Toggle: Larger tap targets */
  .keystone-role-toggle button {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 12px;
  }

  /* Tooltip: Disable hover tooltips on touch (handled by tap) */
  .kw-header-icon:hover .kw-icon-tooltip {
    opacity: 0;
    visibility: hidden;
  }

  /* Show tooltip on focus for accessibility */
  .kw-header-icon:focus .kw-icon-tooltip,
  .kw-header-icon.tooltip-visible .kw-icon-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: -36px;
  }

  /* Workspace Canvas Body: Use dynamic viewport height */
  .workspace-canvas-body {
    height: calc(100dvh - 60px);
    height: calc(100dvh - 60px); /* Fallback */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Iframe: Match parent height */
  #workspace-frame,
  .workspace-app-frame {
    height: calc(100dvh - 60px);
    height: calc(100dvh - 60px); /* Fallback */
  }

  /* Header Divider: Smaller on mobile */
  .kw-header-divider {
    height: 20px;
    margin: 0 4px;
  }

  /* Prevent body scroll when modal/panel is open */
  body.modal-open,
  body.panel-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* Hotspot Panel: Full width on mobile */
  .khs-panel {
    width: 100%;
    max-width: 100%;
  }

  /* Reduce animation for performance on mobile */
  @media (prefers-reduced-motion: reduce) {
    .kw-header-icon,
    .action-card,
    .hero-zone,
    .stat-card {
      transition: none;
    }
  }
}

/* =============================================================
   SMALL MOBILE BREAKPOINT: max-width 480px
   ============================================================= */
@media screen and (max-width: 480px) {

  /* Header: Compact but readable on very small screens */
  .workspace-canvas-header {
    padding: 0 12px;
    gap: 6px;
    height: 56px;
    min-height: 56px;
  }

  /* Title: Smaller but visible on small screens */
  .workspace-canvas-header h1 {
    font-size: 14px;
    display: block;
  }

  /* Header Icons: Still 44px but tighter gap */
  .kw-header-nav {
    gap: 2px;
    justify-content: flex-start;
    padding-left: 4px;
  }

  /* Role Toggle: More compact */
  .keystone-role-toggle button {
    padding: 6px 8px;
    font-size: 11px;
    min-width: 40px;
  }

  /* Hero Showcase: Adjust for small screens */
  .hero-showcase {
    margin-bottom: 16px;
  }

  .hero-zones {
    display: none; /* Hide overlay zones on very small screens */
  }

  /* Quick Actions: Single column */
  .quick-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Stats: 2 columns max */
  .quick-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Action Cards: Larger tap targets */
  .action-card {
    min-height: 60px;
    padding: 16px;
  }

  /* Stat Cards: More compact */
  .stat-card {
    padding: 12px;
  }

  .stat-value {
    font-size: 20px;
  }

  .stat-label {
    font-size: 11px;
  }
}

/* =============================================================
   INPUT FOCUS HELPER: Ensure inputs aren't covered by keyboard
   ============================================================= */
@media screen and (max-width: 768px) {
  input:focus,
  textarea:focus,
  select:focus {
    scroll-margin-bottom: 200px;
  }

  /* Ensure form fields have readable size */
  input, textarea, select {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

/* =============================================================
   REDUCED MOTION: Performance optimization for mobile
   ============================================================= */
@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================
   TOUCH-SPECIFIC ENHANCEMENTS
   ============================================================= */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects that don't work on touch */
  .kw-header-icon:hover {
    transform: none;
  }

  /* Increase tap area with invisible padding */
  .kw-header-icon::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
  }

  /* Ensure all tappable elements have adequate size */
  a, button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent accidental double-tap zoom */
  button, a, .action-card, .hero-zone {
    touch-action: manipulation;
  }
}

/* =============================================================
   MOBILE OVERFLOW FIX: Prevent horizontal scroll
   ============================================================= */
@media screen and (max-width: 768px) {
  /* Force all containers to respect viewport width */
  .keystone-workspace-root,
  .workspace-frame,
  .workspace-canvas,
  .workspace-canvas-body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Ensure iframe respects container bounds */
  #workspace-frame,
  .workspace-app-frame,
  iframe {
    max-width: 100%;
    width: 100%;
  }

  /* Header nav scrollable but contained */
  .kw-header-nav {
    max-width: calc(100vw - 100px);
    flex-wrap: nowrap;
  }
}

/* =============================================================
   MANUSCRIPT EDITOR MOBILE FIXES
   ============================================================= */
@media screen and (max-width: 768px) {
  /* Editor header: stack on mobile */
  .me-header {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
    gap: 12px;
  }

  /* Tabs: scrollable on small screens */
  .me-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    width: 100%;
  }

  .me-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Form rows: stack vertically */
  .form-row {
    flex-direction: column;
    gap: 12px;
  }

  .form-group {
    min-width: 100%;
  }

  /* Editor toolbar: wrap and ensure tap targets */
  .editor-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0;
  }

  .toolbar-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    font-size: 13px;
    /* Ensure buttons are tappable - high z-index */
    position: relative;
    z-index: 10;
  }

  /* Word count: full width on mobile */
  .word-count {
    width: 100%;
    text-align: right;
    margin-top: 8px;
    margin-left: 0;
  }

  /* Tab content: proper mobile height */
  .tab-content {
    padding: 16px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Editor section: flexible height */
  .editor-section {
    min-height: auto;
    max-height: none;
  }

  /* CRITICAL FIX: Editor textarea on iOS keyboard focus */
  .editor-textarea {
    min-height: 200px;
    max-height: none;
    height: auto;
    /* Prevent iOS zoom on focus */
    font-size: 16px;
    /* Allow container to scroll, not textarea itself */
    overflow-y: visible;
    /* Ensure visibility during keyboard animation */
    position: relative;
    z-index: 1;
  }

  /* When virtual keyboard is open, adjust layout */
  .editor-textarea:focus {
    /* Keep textarea visible above keyboard */
    scroll-margin-bottom: 300px;
    /* Prevent white screen by ensuring visibility */
    opacity: 1 !important;
    visibility: visible !important;
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  /* Documents/Templates grids: single column */
  .documents-grid,
  .templates-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Section header: stack on mobile */
  .section-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}

/* =============================================================
   iOS VIRTUAL KEYBOARD FIX
   ============================================================= */
@supports (-webkit-touch-callout: none) {
  /* iOS-specific fixes */
  @media screen and (max-width: 768px) {
    /* Use visual viewport height on iOS */
    .me-body {
      height: auto;
      min-height: 50vh;
      overflow: visible;
    }

    /* Editor container adapts to keyboard */
    .editor-section {
      height: auto;
      overflow: visible;
    }

    /* Textarea stays visible during keyboard animation */
    .editor-textarea {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    .editor-textarea:focus {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
}

/* =============================================================
   BUTTON TAP TARGET FIXES (AI Assist and all toolbar buttons)
   ============================================================= */
@media (hover: none) and (pointer: coarse) {
  .toolbar-btn {
    /* Ensure no overlays block button taps */
    position: relative;
    z-index: 100;
    /* Larger touch target */
    min-height: 48px;
    min-width: 48px;
    /* Prevent stuck hover state on touch */
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
  }

  /* Ensure buttons have no pointer-blocking overlays */
  .toolbar-btn::after {
    content: none;
  }

  /* Active state for touch feedback */
  .toolbar-btn:active {
    background: #3a3a3a;
    transform: scale(0.97);
  }

  .toolbar-btn.primary:active {
    background: #c49f30;
  }
}

/* MOBILE STABILITY RULES */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  height: 100dvh;
}

* {
  box-sizing: border-box;
}

input, textarea, select {
  font-size: 16px !important;
}

.grid, .container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}