/*
 * SEHL MAIL
 * iPhone Composer Overflow Fix V1
 *
 * Objetivo:
 * - cero overflow horizontal
 * - composer contenido dentro del viewport
 * - Cc/Bcc jamás fuera de pantalla
 * - toolbars móviles fluidos
 * - ProseMirror limitado al ancho real
 * - no alterar la lógica VisualViewport existente
 */

@media (max-width: 768px) {

  /*
   * ==========================================================
   * DOCUMENTO
   * ==========================================================
   */

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow-x: hidden !important;
    overscroll-behavior-x: none;
  }


  /*
   * ==========================================================
   * ROOT REAL DEL COMPOSER
   * ==========================================================
   */

  #cw {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left:
      max(
        var(--sehl-composer-safe-left, 0px),
        env(safe-area-inset-left, 0px)
      ) !important;

    padding-right:
      max(
        var(--sehl-composer-safe-right, 0px),
        env(safe-area-inset-right, 0px)
      ) !important;

    overflow-x: hidden !important;
  }


  /*
   * Absolutamente ningún hijo puede imponer ancho al composer.
   */

  #cw *,
  #cw *::before,
  #cw *::after {
    box-sizing: border-box !important;
    min-width: 0;
  }


  /*
   * ==========================================================
   * SCROLL CONTAINER
   * ==========================================================
   */

  #cw .cw-body {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow-x: hidden !important;
    overscroll-behavior-x: none;

    -webkit-overflow-scrolling: touch;
  }


  #cw .cw-body > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /*
   * ==========================================================
   * FILAS / HEADER / FOOTER / ACCIONES
   * ==========================================================
   */

  #cw .cw-head,
  #cw .cw-foot,
  #cw .cw-foot .right,
  #cw [class*="action" i],
  #cw [class*="toolbar" i],
  #cw [class*="tools" i] {
    box-sizing: border-box !important;

    max-width: 100% !important;
    min-width: 0 !important;

    overflow-x: hidden !important;
  }


  /*
   * Si alguno de estos contenedores ya es flex,
   * se permite wrap sin cambiar su naturaleza.
   */

  #cw .cw-head,
  #cw .cw-foot,
  #cw .cw-foot .right,
  #cw [class*="action" i],
  #cw [class*="toolbar" i],
  #cw [class*="tools" i] {
    flex-wrap: wrap !important;
  }


  /*
   * ==========================================================
   * TO / CC / BCC / SUBJECT
   * ==========================================================
   */

  #cTo,
  #cCc,
  #cBcc,
  #cSubj {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;

    font-size: max(16px, 1em) !important;
  }


  /*
   * Safari no puede agrandar el layout por texto largo.
   */

  #cTo,
  #cCc,
  #cBcc,
  #cSubj,
  #cw input,
  #cw textarea,
  #cw select {
    overflow-wrap: anywhere;
    word-break: break-word;
  }


  /*
   * ==========================================================
   * BOTÓN CC/BCC
   * ==========================================================
   *
   * Este es uno de los candidatos principales al control
   * que actualmente se ve cortado a la derecha.
   */

  #cToggleCc {
    box-sizing: border-box !important;

    max-width: 100% !important;
    min-width: 0 !important;

    right: auto !important;

    transform: none !important;

    flex-shrink: 0 !important;
  }


  /*
   * Evita que posicionamiento heredado saque Cc/Bcc
   * físicamente fuera del viewport.
   */

  #cw #cToggleCc {
    translate: none !important;
  }


  /*
   * ==========================================================
   * TOOLS V3
   * ==========================================================
   */

  #v3ComposerTools {
    box-sizing: border-box !important;

    display: flex !important;
    flex-wrap: wrap !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 8px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow-x: hidden !important;
  }


  #v3ComposerTools > button,
  #v3ComposerTools .btn {
    box-sizing: border-box !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    flex: 0 1 auto !important;

    white-space: nowrap;
  }


  /*
   * ==========================================================
   * BOTONES DEL COMPOSER
   * ==========================================================
   */

  #cw button {
    box-sizing: border-box !important;

    max-width: 100% !important;
    min-width: 0 !important;
  }


  /*
   * ==========================================================
   * EDITOR HOST
   * ==========================================================
   */

  #cBody,
  #cBody.sehl-editor-host {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0;
    padding-right: 0;

    transform: none !important;

    overflow-x: hidden !important;
  }


  /*
   * ==========================================================
   * PROSEMIRROR
   * ==========================================================
   */

  #cBody .sehl-prosemirror {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;

    overflow-x: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;

    font-size: 16px !important;
  }


  #cBody .sehl-prosemirror > * {
    max-width: 100% !important;
  }


  #cBody .sehl-prosemirror img,
  #cBody .sehl-prosemirror video,
  #cBody .sehl-prosemirror iframe,
  #cBody .sehl-prosemirror table {
    max-width: 100% !important;
  }


  /*
   * ==========================================================
   * FORMAT BAR
   * ==========================================================
   */

  #fmtBar {
    box-sizing: border-box !important;

    max-width: 100% !important;
    min-width: 0 !important;

    overflow-x: auto !important;
    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;
  }


  /*
   * ==========================================================
   * AUTOCOMPLETE / RECIPIENT LISTS
   * ==========================================================
   */

  #cw [role="listbox"],
  #cw [class*="suggest" i],
  #cw [id*="suggest" i],
  #cw [class*="autocomplete" i],
  #cw [id*="autocomplete" i],
  #cw [class*="people" i][class*="list" i],
  #cw [class*="recipient" i][class*="list" i] {
    box-sizing: border-box !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }


  /*
   * ==========================================================
   * PROTECCIÓN CONTRA 100vw HEREDADO
   * ==========================================================
   *
   * No cambiamos la geometría vertical del contrato V3.
   * Solo impedimos que hijos internos excedan el root.
   */

  #cw [style*="100vw"],
  #cw [style*="100dvw"],
  #cw [style*="100svw"] {
    max-width: 100% !important;
  }

}