/* Mobile-Specific Enhancements */

/* iOS Safe Area Support */
@supports (padding: max(0px)) {
  body {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
  #app {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  header {
    padding-top: max(1rem, env(safe-area-inset-top));
  }

  .chat-input-container {
    padding-bottom: calc(env(safe-area-inset-bottom) + 24px) !important;
  }

  /* Interview avatar background mobile size */
  #interview-avatar-bg img {
    width: 400px !important;
    height: 400px !important;
  }

  /* Make background image go behind status bar - full screen */
  .bg-media-mobile {
    position: fixed;
    top: calc(0px - env(safe-area-inset-top)) !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)) !important;
    height: calc(100dvh + env(safe-area-inset-top) + env(safe-area-inset-bottom)) !important;
    min-height: -webkit-fill-available !important;
    object-fit: cover;
    z-index: -1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Override any background on body and html */
  body, html {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Prevent zoom on input focus (iOS) */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  font-size: 16px !important;
}

/* Better touch targets */
button,
a {
  min-height: 20px;
  min-width: 44px;
}

/* Prevent text selection on double-tap */
button,
.chat-avatar,
.cube-3d {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Smooth scrolling on iOS */
.chat-messages,
#memories-screen {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Avatar preview - prevent stretch on mobile */
#avatar-preview {
  object-fit: contain !important;
  width: auto !important;
  height: auto !important;
  max-width: 420px !important;
  max-height: 420px !important;
}

/* Fix iOS fixed positioning */
.fixed {
  position: -webkit-sticky;
  position: fixed;
}

/* Mobile-specific breakpoints - Only apply on touch devices */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  /* Header adjustments */
  header {
    z-index: 50 !important;
  }

  header img {
    height: 36px;
  }

  /* Reduce cube complexity on mobile */
  .cube-3d {
    opacity: 0.6;
  }

  /* Side menu full width on small screens */
  #side-menu {
    width: 85%;
    max-width: 320px;
  }

  /* Chat adjustments */
  .chat-avatar {
    width: 36px;
    height: 36px;
    border: 0;
  }

  .chat-bubble {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    max-width: 80%;
  }

  .chat-bubble.bot {
    max-width: 75%;
    margin-right: 8%;
  }

  .chat-bubble.user {
    max-width: 75%;
    margin-left: 8%;
  }

  /* Fix chat input bar on mobile - FORCE fixed position */
  body, html {
    overflow: hidden;
    width: 100%;
    height: 100vh;
    height: 100dvh;
  }

  #main-app {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  #interview-screen:not(.hidden),
  #feed-screen:not(.hidden),
  #memories-screen:not(.hidden),
  #profile-screen:not(.hidden),
  #avatar-screen:not(.hidden) {
    position: absolute !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    height: calc(100vh - 64px) !important;
    height: calc(100dvh - 64px) !important;
    -webkit-overflow-scrolling: touch;
    z-index: 10 !important;
  }

  #interview-screen:not(.hidden) {
    overflow: hidden !important;
  }

  #chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 140px !important;
    -webkit-overflow-scrolling: touch;
  }

  /* FORCE chat input fixed at bottom of screen */
  .chat-input-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 42rem !important;
    z-index: 9999 !important;
    padding: 16px !important;
    padding-bottom: 24px !important;
    background: transparent !important;
  }

  /* Card adjustments */
  .card {
    padding: 1rem;
  }

  /* Reduce memory images to 100x100px on mobile */
  #memories-screen .memory-card img,
  #memories-screen .memory-card .relative.flex-shrink-0 {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    object-fit: cover !important;
    object-position: center !important;
  }


  /* Keep desktop layout on mobile (align left like desktop) */
  #memories-screen .memory-card .flex.gap-4 {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Button adjustments */
  .btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.95rem;
  }

  /* Modal adjustments */
  #avatar-modal .card {
    padding: 1.5rem 1rem;
  }

  #avatar-preview {
    width: 160px;
    height: 160px;
  }

  /* Public feed mobile layout - full width like desktop */
  #feed-screen {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #feed-screen .public-memory-image-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 150px !important;
    max-height: 150px !important;
    min-width: 100% !important;
    min-height: 150px !important;
    overflow: hidden !important;
  }

  #feed-screen .public-memory-image-container img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Reduce memory title size by 20% on mobile and uniformize across all views */
  .memory-card h3,
  .export-slide-thumbnail h3,
  #enrichment-memory-card h3,
  #edit-title-modal h3,
  .export-item-title,
  .public-memory-card h3 {
    font-size: 0.9em !important;
    padding-right: 40px !important;
  }

  .public-memory-title {
    font-size: 0.9rem !important;
  }

  /* Auth screen mobile layout */
  #auth-screen:not(.hidden) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    padding: 0 20px !important;
  }

  /* Logo Rowhan - en haut, agrandi x2 et remonté */
  #auth-screen img.w-48 {
    width: 240px !important;
    margin: -50px auto 1.5rem auto !important;
    display: block !important;
  }

  /* Container du formulaire - centré */
  #auth-screen > div.max-w-md {
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Espacement des champs réduit */
  #auth-screen .space-y-4 {
    gap: 0.75rem !important;
  }

  /* Conditions - espace réduit */
  #auth-screen .max-w-md > div.mt-8 {
    margin-top: 1rem !important;
    padding-top: 0 !important;
  }

  /* Logo IA container - footer en bas de l'écran */
  #auth-screen #logo-ia-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 20px 20px 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #auth-screen #logo-ia-img {
    width: auto !important;
    max-width: 280px !important;
    height: auto !important;
    display: block !important;
  }

  /* Mobile adjustments for avatar selection page */
  #avatar-screen .w-full.max-w-md.flex-shrink-0 {
    bottom: 60px !important;
  }

  /* Export format icons smaller on mobile */
  .export-format-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .export-format-icon svg {
    width: 19px !important;
    height: 19px !important;
  }

  /* Export filter buttons - smaller on mobile to fit on one line */
  .export-format-filter {
    gap: 0.5rem !important;
  }

  .export-filter-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .export-filter-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Force avatar navigation arrows to stay on screen on mobile */
  #avatar-screen #prev-avatar {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 150 !important;
  }

  #avatar-screen #next-avatar {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 150 !important;
  }
}

@media (max-width: 480px) and (hover: none) and (pointer: coarse) {
  /* Even smaller adjustments for tiny screens */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  .tagline {
    font-size: 1.4rem !important;
  }

  #auth-screen img.w-48 {
    width: 200px !important;
    margin-top: -40px !important;
  }

  #auth-screen #logo-ia-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 20px 20px 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #auth-screen #logo-ia-img {
    width: auto !important;
    max-width: 240px !important;
    height: auto !important;
    display: block !important;
  }

  .chat-bubble {
    max-width: 90%;
  }

  .chat-bubble.bot {
    max-width: 85%;
    margin-right: 5%;
  }

  .chat-bubble.user {
    max-width: 85%;
    margin-left: 5%;
  }

  #side-menu {
    width: 90%;
  }
}

/* Landscape mode adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  .chat-messages {
    max-height: 60vh;
  }

  .cube-3d {
    opacity: 0.3;
    width: 200px;
    height: 200px;
  }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .chat-avatar,
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Dark mode support (if OS prefers dark) */
@media (prefers-color-scheme: dark) {
  /* Already dark by default, but can add adjustments here */
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .cube-3d {
    animation: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .btn-primary {
    border: 1px solid #fff;
  }

  .input-field {
    border-width: 1px;
  }
}

/* Exports Screen Responsive */
.export-item-layout {
  display: flex;
  gap: 1.25rem;
}

.export-item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.export-item-content {
  flex: 1;
  min-width: 0;
}

.export-item-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.export-item-info {
  flex: 1;
  min-width: 0;
  margin-right: 1rem;
}

.export-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.5rem;
}

.export-item-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.export-item-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  .export-item-layout {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1rem;
  }

  .export-item-image {
    width: 80px;
    height: 80px;
  }

  .export-item-content {
    width: 100%;
  }

  .export-item-header {
    flex-direction: row;
    align-items: start;
    gap: 1rem;
  }

  .export-item-info {
    width: 100%;
    margin-right: 0;
    text-align: left;
  }

  .export-item-title {
    white-space: normal;
    text-align: left;
  }

  .export-item-actions {
    flex-direction: row;
    width: 100%;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .export-item-actions button,
  .export-item-actions a {
    flex: 0 0 auto;
    min-width: auto;
    justify-content: flex-start;
  }
}

/* Premium Screen Responsive */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  #subscription-screen h2 {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }

  .premium-avatar-container {
    width: 100vw !important;
    height: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #premium-avatar,
  .premium-avatar-img {
    width: 90vw !important;
    height: auto !important;
    max-width: 90vw !important;
    object-fit: contain !important;
  }

  #subscription-screen > div[style*="position: absolute; bottom: 0"] {
    padding-bottom: 4rem !important;
  }

  #premium-popup .bg-black\/90 {
    max-width: 90% !important;
  }

  #premium-popup img {
    width: 80px !important;
    height: 80px !important;
  }

  #premium-popup h3 {
    font-size: 1.5rem !important;
  }
}

/* Profile stats grid - responsive */
@media (max-width: 767px) {
  .stats-grid-profile {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .stat-card {
    padding: 20px !important;
    min-width: 0 !important;
  }

  .stat-card h3 {
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stat-card svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
  }
}

/* Very small screens - 2 columns compact */
@media (max-width: 480px) {
  .stats-grid-profile {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .stat-card {
    padding: 16px !important;
  }

  .stat-card h3 {
    font-size: 12px !important;
  }

  .stat-card span[style*="font-size: 48px"] {
    font-size: 32px !important;
  }

  .stat-card span[style*="font-size: 18px"] {
    font-size: 14px !important;
  }
}

/* Print styles (for exports) */
@media print {
  body {
    background: white;
    color: black;
  }

  .cube-3d,
  header,
  #side-menu,
  button {
    display: none !important;
  }

  .card {
    border: 1px solid #000;
    background: white;
  }
}