/*
 * iOS Experience v10.2
 * Corrección AISLADA para iPhone/iPad. Android no entra en ninguna regla de este archivo.
 *
 * Principio: Safari no debe desplazar ni reescalar el documento para enfocar el comentario.
 * Antes de abrir el teclado bloqueamos el layout y dejamos que solo el compositor se mueva.
 */

@media (max-width: 860px), (pointer: coarse) {
  .is-ios body.ios-comment-focus {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--app-height) !important;
    min-height: var(--app-height) !important;
    max-height: var(--app-height) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: pan-y !important;
    transform: none !important;
  }

  .is-ios body.ios-comment-focus .app-shell,
  .is-ios body.ios-comment-focus .phone-frame {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    transform: none !important;
    zoom: 1 !important;
  }

  /* Safari puede intentar desplazar la phone-frame con visualViewport.offsetTop/Left.
     Durante comentarios lo neutralizamos: el único movimiento permitido es el dock. */
  .is-ios body.ios-comment-focus .phone-frame,
  .is-ios body.ios-comment-focus .profile-editor-modal {
    right: auto !important;
    left: 0 !important;
    transform: none !important;
  }

  .is-ios.is-standalone body.ios-comment-focus {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }

  .is-ios body.ios-comment-focus .mobile-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Al escribir no necesitamos navegación inferior. Quitándola desde el primer frame
     evitamos que Safari intente mantener visibles dos barras inferiores a la vez. */
  .is-ios body.ios-comment-focus .bottom-nav,
  .is-ios body.ios-comment-focus .mobile-menu-fab,
  .is-ios body.ios-comment-focus .mobile-quick-menu {
    display: none !important;
  }

  /*
   * El compositor sigue dentro de phone-frame. Se ancla al borde inferior visible
   * calculado por VisualViewport, sin modificar el ancho del feed.
   */
  .is-ios body.ios-comment-focus .community-comment-dock,
  .is-ios body.ios-comment-focus .football-comment-dock {
    position: absolute !important;
    right: 0 !important;
    bottom: var(--ios-comment-bottom, 0px) !important;
    left: 0 !important;
    z-index: 90 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding:
      0.4rem
      calc(0.5rem + env(safe-area-inset-right))
      0.44rem
      calc(0.5rem + env(safe-area-inset-left)) !important;
    border-radius: 0 !important;
    transform: none !important;
    contain: inline-size paint !important;
    box-sizing: border-box !important;
  }

  .is-ios body.ios-comment-focus .community-comment-dock *,
  .is-ios body.ios-comment-focus .football-comment-dock * {
    box-sizing: border-box !important;
  }

  /* Flex evita el desbordamiento de grid/auto que WebKit puede provocar al mostrar Publicar. */
  .is-ios body.ios-comment-focus .community-comment-dock__row,
  .is-ios body.ios-comment-focus .football-comment-dock__row {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
    gap: 0.34rem !important;
    overflow: hidden !important;
  }

  .is-ios body.ios-comment-focus .community-comment-dock__avatar,
  .is-ios body.ios-comment-focus .football-comment-dock__avatar {
    flex: 0 0 2.05rem !important;
    width: 2.05rem !important;
    min-width: 2.05rem !important;
    height: 2.05rem !important;
  }

  /* 16px COMPUTADOS antes del foco: impide el autozoom de Safari. */
  .is-ios .community-comment-dock textarea,
  .is-ios .football-comment-dock textarea,
  .is-ios .community-comment-dock input[type="text"],
  .is-ios .football-comment-dock input[type="text"],
  .is-ios body.ios-comment-focus .community-comment-dock textarea,
  .is-ios body.ios-comment-focus .football-comment-dock textarea,
  .is-ios body.ios-comment-focus .community-comment-dock__form textarea,
  .is-ios body.ios-comment-focus .football-comment-dock .post-comment-form textarea {
    font-size: 16px !important;
    line-height: 1.32 !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  .is-ios body.ios-comment-focus .community-comment-dock textarea,
  .is-ios body.ios-comment-focus .football-comment-dock textarea,
  .is-ios body.ios-comment-focus .community-comment-dock__form textarea,
  .is-ios body.ios-comment-focus .football-comment-dock .post-comment-form textarea {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    zoom: 1 !important;
  }

  /* El focus ring se dibuja dentro del campo, nunca fuera de su caja. */
  .is-ios body.ios-comment-focus .community-comment-dock textarea:focus,
  .is-ios body.ios-comment-focus .community-comment-dock textarea:focus-visible,
  .is-ios body.ios-comment-focus .football-comment-dock textarea:focus,
  .is-ios body.ios-comment-focus .football-comment-dock textarea:focus-visible {
    outline: 0 !important;
    border-color: rgba(201, 138, 36, 0.5) !important;
    box-shadow: inset 0 0 0 1px rgba(201, 138, 36, 0.16) !important;
  }

  .is-ios body.ios-comment-focus .community-comment-dock__image,
  .is-ios body.ios-comment-focus .football-comment-dock .comment-image-input,
  .is-ios body.ios-comment-focus .football-comment-dock .community-comment-dock__image {
    flex: 0 0 2.2rem !important;
    width: 2.2rem !important;
    min-width: 2.2rem !important;
    height: 2.2rem !important;
  }

  .is-ios body.ios-comment-focus .community-comment-dock__submit,
  .is-ios body.ios-comment-focus .football-comment-dock button[type="submit"] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 4.15rem !important;
    overflow: hidden !important;
    padding-inline: 0.08rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .is-ios body.ios-comment-focus .community-comment-dock__submit:disabled,
  .is-ios body.ios-comment-focus .football-comment-dock button[type="submit"]:disabled {
    display: none !important;
  }

  /* Reserva inferior consistente con la posición real del teclado + compositor. */
  .is-ios body.ios-comment-focus.community-detail-with-dock .mobile-content,
  .is-ios body.ios-comment-focus.football-detail-with-comment-dock .mobile-content {
    padding-bottom: calc(var(--ios-comment-bottom, 0px) + var(--mobile-composer-height) + 0.8rem) !important;
    scroll-padding-bottom: calc(var(--ios-comment-bottom, 0px) + var(--mobile-composer-height) + 0.9rem) !important;
  }

  /* Anula cualquier regla heredada basada en keyboard-open que vuelva a mover la app. */
  .is-ios body.ios-comment-focus.keyboard-open .community-comment-dock,
  .is-ios body.ios-comment-focus.ios-keyboard-open .community-comment-dock,
  .is-ios body.ios-comment-focus.keyboard-open .football-comment-dock,
  .is-ios body.ios-comment-focus.ios-keyboard-open .football-comment-dock {
    bottom: var(--ios-comment-bottom, 0px) !important;
    transform: none !important;
  }

  @media (max-width: 390px) {
    .is-ios body.ios-comment-focus .community-comment-dock,
    .is-ios body.ios-comment-focus .football-comment-dock {
      padding-right: calc(0.42rem + env(safe-area-inset-right)) !important;
      padding-left: calc(0.42rem + env(safe-area-inset-left)) !important;
    }

    .is-ios body.ios-comment-focus .community-comment-dock__row,
    .is-ios body.ios-comment-focus .football-comment-dock__row {
      gap: 0.28rem !important;
    }

    .is-ios body.ios-comment-focus .community-comment-dock__avatar,
    .is-ios body.ios-comment-focus .football-comment-dock__avatar {
      flex-basis: 1.95rem !important;
      width: 1.95rem !important;
      min-width: 1.95rem !important;
      height: 1.95rem !important;
    }

    .is-ios body.ios-comment-focus .community-comment-dock__image,
    .is-ios body.ios-comment-focus .football-comment-dock .comment-image-input,
    .is-ios body.ios-comment-focus .football-comment-dock .community-comment-dock__image {
      flex-basis: 2.08rem !important;
      width: 2.08rem !important;
      min-width: 2.08rem !important;
      height: 2.08rem !important;
    }
  }
}