/* safari.css - Neutralización de contradicciones y scroller exclusivo para Safari en iPhone */
:root {
  --composer-min-h: 44px;
}

/* 1. Neutralización de viewport y eliminación de body-scroll/pantalla negra */
html, body {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  -webkit-text-size-adjust: 100% !important;
  background-color: var(--bg-app) !important;
}

.app-layout {
  position: absolute !important;
  top: var(--alma-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--alma-vh, 100dvh) !important;
  max-height: var(--alma-vh, 100dvh) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

@media (min-width: 769px) {
  .app-layout {
    position: relative !important;
    top: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    flex-direction: row !important;
  }
}

.main-wrapper {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* 2. Área de vistas: scroller estándar para Home/Review/Agenda */
.content-area {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 768px) {
  .content-area {
    padding: 12px 14px 16px 14px !important;
  }
}

/* 3. Contenedor de Chat: flex vertical estricto (no scrollea globalmente) */
body[data-active-view="chat"] .content-area,
.content-area:has(#view-chat.active) {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#view-chat.active {
  flex: 1 1 0% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  gap: 0 !important;
  position: relative !important;
}

/* 4. Cabecera fija fuera del scroller: fondo opaco sin filtraciones de texto */
#chat-header {
  flex-shrink: 0 !important;
  position: static !important;
  margin: 0 !important;
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  z-index: 15 !important;
}

#chat-pending-banner {
  flex-shrink: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

/* 5. ÚNICO SCROLLER: contiene EXCLUSIVAMENTE los mensajes */
#chat-thread {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: transparent !important;
}

.messages-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 12px 14px !important;
}

/* 6. Herramientas y botón flotante Ir al último */
.chat-tools {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 14px !important;
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border-color) !important;
}

body.keyboard-open .chat-tools {
  display: none !important;
}

.btn-scroll-bottom {
  position: absolute !important;
  bottom: 70px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 25 !important;
}

/* 7. Composer anclado al viewport visible sin fixed invasivo */
.composer-form {
  flex-shrink: 0 !important;
  position: static !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--border-color) !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background: var(--bg-surface) !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
}

.composer-form::after {
  display: none !important;
}

/* 8. Prevención de autozoom en iOS Safari (fuente >= 16px) */
.composer-textarea,
input, textarea, select {
  font-size: 16px !important;
}

/* 9. Navegación móvil integrada fuera del espacio del teclado */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    position: static !important;
    flex-shrink: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    width: 100% !important;
    background: var(--bg-surface) !important;
    border-top: 1px solid var(--border-color) !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 30 !important;
  }
  body.keyboard-open .mobile-bottom-nav {
    display: none !important;
  }
}

/* 10. Accesibilidad táctil 44px y adaptación a 360px */
button, .btn-primary, .btn-secondary, .btn-chip, .nav-item, .bottom-item,
.composer-submit, .btn-toggle-compact, .btn-history-toggle {
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
}

@media (max-width: 360px) {
  .chat-header {
    padding: 6px 8px !important;
  }
  .chat-header-info {
    max-width: 110px !important;
  }
  .btn-history-toggle span {
    display: none !important;
  }
  .composer-textarea {
    padding: 8px 10px !important;
  }
}