/* Solo2 Layout: Mobile Slide & Flow */

@media (max-width: 767px) {
  body {
    overflow: hidden; /* Evitar scroll vertical global */
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation; /* Prevenir double-tap zoom */
    -webkit-text-size-adjust: 100%; /* Prevenir ajuste automático de fuente iOS */
  }

  .app-viewport {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
  }

  .app-main-container {
    display: flex;
    width: 200vw;
    height: 100%;
    will-change: transform;
  }

  /* Estado: Mostrar Chat — SIN transición, cambio instantáneo */
  .app-main-container.show-chat {
    transform: translateX(-100vw);
  }

  /* Paneles ocultados cuando están fuera de vista para evitar
     que capturen eventos o interfieran con el panel visible.
     Delay visibility:hidden para que coincida con la transición CSS */
  .app-main-container.show-chat .panel-list {
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 250ms;
  }
  .app-main-container:not(.show-chat) .panel-chat {
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 250ms;
  }
  /* Al entrar, visibility inmediata (sin delay) */
  .app-main-container.show-chat .panel-chat,
  .app-main-container:not(.show-chat) .panel-list {
    visibility: visible;
    transition: visibility 0s linear 0s;
  }

  .panel-list, .panel-chat {
    width: 100vw;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }

  /* Animación sutil de entrada para el chat */
  .panel-chat {
    background: var(--color-bg);
    box-shadow: -10px 0 30px rgba(0,0,0,0.3);
  }

  /* ================================================================
     SAFE AREA INSETS (notch / home bar iPhone)
     ================================================================ */
  @supports(padding: env(safe-area-inset-top)) {
    .panel-list {
      padding-top: env(safe-area-inset-top);
    }

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

    #chat-form {
      padding-bottom: env(safe-area-inset-bottom);
    }

    #wallet-section {
      padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
    }

    .toast-container {
      top: calc(1rem + env(safe-area-inset-top));
    }
  }

  /* ================================================================
     iOS AUTO-ZOOM FIX (inputs < 16px trigger zoom)
     ================================================================ */
  #chat-input,
  #sb-tunnel-finder,
  #chat-search-input {
    font-size: 16px;
  }

  /* ================================================================
     TOUCH TARGETS (min 44px — iOS HIG)
     ================================================================ */
  /* Botones del chat form (adjuntar, voz, geo, enviar) */
  #chat-form label,
  #chat-form button {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Botones del chat header (back, menu) */
  #btn-deselect-tunnel,
  #tunnel-menu-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Sidebar tool buttons */
  .sidebar-tool-btn {
    min-height: 44px;
  }

  /* ================================================================
     VOICE RECORDING TOUCH TARGETS (min 44px — iOS HIG)
     ================================================================ */
  #voice-cancel-btn,
  #voice-stop-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ================================================================
     SCROLL PROTECTION — contenedores internos con scroll
     ================================================================ */
  #sidebar > .flex-1,
  #messages-container {
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ================================================================
   LANDSCAPE GUARD — mensaje "usa modo vertical" en móvil apaisado
   ================================================================ */
@media (max-width: 767px) and (orientation: landscape) {
  .app-viewport::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--color-bg, #0a0e1a);
    z-index: 99999;
  }
  .app-viewport::after {
    content: '↻ Solo2 funciona mejor en vertical';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-muted, #94a3b8);
    font-size: 0.875rem;
    text-align: center;
    z-index: 100000;
    white-space: nowrap;
  }
}