:root{ --vh: 1vh; }
@supports (height: 100dvh) { .chat-panel{ height: 100dvh; } }
@supports not (height: 100dvh) { .chat-panel{ height: calc(var(--vh, 1vh) * 100); } }

/* Mobilde: chat panel kapalıyken gizle, sadece açılınca göster */
@media (max-width: 1024px) {
  .chat-panel { display: none; }
  .chat-panel.is-mobile-open { display: flex; }
}

.chat-panel.is-mobile-open{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
body.ai-sheet-open{
  overflow: hidden; /* iOS için basit çözüm */
}

/* === iOS Chat Panel Optimize === */
@media (max-width: 1023.98px) {
  .chat-panel.is-mobile-open {
    /* Bottom sheet yaklaşımı: ortalanmış genişlik, alta sabit */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    margin: 0 auto !important;
    width: min(95vw, 440px) !important;
    height: auto !important;
    max-height: 80vh !important; /* iOS için daha küçük */
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.6) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-bottom: none !important;
    transform: none !important;
    z-index: 9999 !important;
    will-change: auto !important; /* iOS için */
  }

  /* Chat header mobilde daha kompakt */
  .chat-panel.is-mobile-open .sticky {
    padding: 0.75rem 1rem !important;
  }

  /* Chat messages container */
  #chatMessages {
    padding: 0.75rem !important;
    /* iOS için daha küçük max-height */
    max-height: calc(80vh - 180px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Chat input area (alt bar) */
  .chat-panel.is-mobile-open .border-t {
    padding: 0.75rem 1rem !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  }

  /* Backdrop karartması */
  body.ai-sheet-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
  }

  /* Panel açıkken FAB çakışmasını önle */
  body.ai-sheet-open .fab-chat {
    display: none !important;
  }
}

/* Animasyonları tamamen kaldır - iOS için hafif */

/* === iOS Modal Fixes === */
#addProductModal,
#cartModal,
#inspectModal,
#variantModal {
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: contain;
}

/* Modal backdrop smooth touch */
#addProductModal::before,
#cartModal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Input fixes for iOS */
#addProductModal input[type="number"],
#productQtyInput {
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px !important; /* iOS zoom engel */
}

/* Button active states for iOS */
#addProductModal button,
#cartModal button,
#inspectModal button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

#addProductModal button:active,
#cartModal button:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* Prevent iOS double-tap zoom */
#addProductModal *,
#cartModal *,
#inspectModal * {
  touch-action: manipulation;
}

/* Safe area için padding (iPhone notch) */
@supports (padding: max(0px)) {
  #addProductModal > div,
  #cartModal > div {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Mobil ekranlarda modal tam genişlik */
@media (max-width: 640px) {
  #addProductModal > div {
    max-width: calc(100vw - 2rem);
    margin: 0 1rem;
  }
  
  #cartModal > div {
    max-width: calc(100vw - 2rem);
    width: 100%;
  }
}

/* Küçük ekranlar için scroll fix */
@media (max-height: 700px) {
  #addProductModal > div,
  #cartModal > div {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* === Sepet Widget Mobil Optimize === */
@media (max-width: 1023.98px) {
  /* Sepet modalı chat panelinin ÜZERİNDE */
  #cartModal {
    z-index: 10000 !important;
  }
}

/* FAB chat butonu mobilde */
@media (max-width: 1023.98px) {
  .fab-chat {
    bottom: 24px !important;
    right: 24px !important;
  }
}

/* === Brand Chips Mobil === */
@media (max-width: 640px) {
  #brandChips {
    padding: 0.75rem !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
  }

  .brand-chip {
    font-size: 11px !important;
    padding: 0.375rem 0.75rem !important;
    white-space: nowrap !important;
  }
}

/* === Iframe Container Mobil === */
@media (max-width: 640px) {
  /* Gerçek iframe id'si: brandFrame */
  #brandFrame, #catalogFrame {
    width: 100% !important;
    height: calc(100dvh - 60px) !important;
  }
}

/* === Product Cards Mobil === */
@media (max-width: 640px) {
  .product-card {
    padding: 0.75rem !important;
    font-size: 13px !important;
  }

  .product-card h5 {
    font-size: 13px !important;
  }

  .product-card p {
    font-size: 11px !important;
  }

  .product-card button {
    font-size: 11px !important;
    padding: 0.5rem !important;
  }
}

/* === iOS Specific Fixes === */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari */
  body {
    -webkit-user-select: none;
    user-select: none;
  }

  input, textarea, select {
    -webkit-user-select: auto;
    user-select: auto;
  }

  /* iOS scroll bounce disable */
  .chat-panel.is-mobile-open {
    position: fixed;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* iOS input zoom disable */
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* === Android Specific Fixes === */
@media (max-width: 640px) and (hover: none) {
  /* Touch devices */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  button, a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
}