/**
 * Photo Sphere Studio 3D - Universal Orbital Engine
 * responsive.css: Media Queries, Touch Ergonomics & Safe-Area Insets
 *
 * Tres formas de pantalla:
 *  - Escritorio / tablet (>= 768px y alto normal): panel flotante a la derecha.
 *  - Móvil vertical (< 768px): panel inferior tipo bottom-sheet.
 *  - Móvil horizontal (alto <= 560px): panel lateral de alto completo, con scroll interno.
 */

/* Safe Area Insets for Modern Mobile Notches & Dynamic Islands */
.safe-top { padding-top: max(0.75rem, env(safe-area-inset-top)); }
.safe-bottom { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
.safe-left { padding-left: max(0.75rem, env(safe-area-inset-left)); }
.safe-right { padding-right: max(0.75rem, env(safe-area-inset-right)); }

/* Sin rebote de scroll ni zoom por doble toque en toda la app */
html, body {
  overscroll-behavior: none;
  touch-action: manipulation;
}

#main-drawer { overscroll-behavior: contain; }
#main-drawer > .overflow-y-auto { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ---------- Dispositivos táctiles: dianas más grandes y sin zoom automático de iOS ---------- */
@media (pointer: coarse) {
  #main-drawer input[type="text"],
  #main-drawer input[type="number"],
  #main-drawer select,
  #universe-modal input[type="text"] {
    font-size: 16px;
  }

  #main-drawer button,
  #main-drawer select,
  #main-drawer .nav-tab {
    min-height: 40px;
  }

  input[type="range"] { height: 8px; }
  input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }

  .num-field-btn { width: 30px; height: 30px; font-size: 10px; }
  .num-field-input { width: 4.6rem; padding: 4px 6px; }
}

/* ---------- Móvil vertical / pantallas estrechas ---------- */
@media (max-width: 767px) {
  html, body {
    height: 100dvh;
    width: 100%;
  }

  /* Cabecera compacta: se oculta el título para dejar sitio al selector */
  #main-header h1,
  #main-header .relative.flex.items-center.justify-center {
    display: none;
  }

  #main-header > div { justify-content: center; }

  #universe-chip { max-width: 38vw; }
  #header-sphere-select { max-width: 40vw; }

  #celestial-pills-bar {
    top: calc(env(safe-area-inset-top) + 3.6rem);
  }

  /* FAB vertical con scroll en el lateral derecho: no tapa la barra inferior */
  #quick-action-bar {
    flex-direction: column;
    top: calc(env(safe-area-inset-top) + 6.5rem);
    bottom: calc(env(safe-area-inset-bottom) + 6rem);
    right: 0.6rem;
    gap: 0.5rem;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: none;
  }
  #quick-action-bar::-webkit-scrollbar { display: none; }

  #quick-action-bar button {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
  }

  #bottom-photo-bar {
    left: 0.75rem;
    right: 4.1rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    padding-bottom: 0;
  }
  #bottom-photo-bar > div { max-width: none; }

  #btn-exit-clean-mode {
    top: calc(env(safe-area-inset-top) + 0.75rem);
    right: 0.75rem;
  }

  /* Bottom-sheet: ocupa hasta ~80% de la altura y el contenido hace scroll dentro */
  #main-drawer {
    max-height: 80dvh;
    border-top-left-radius: 1.75rem;
    border-top-right-radius: 1.75rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  #main-drawer > .overflow-y-auto { padding: 0.75rem; }

  /* Zona de agarre amplia para arrastrar el panel hacia abajo y cerrarlo */
  #drawer-handle {
    padding: 0.6rem 0 0.5rem;
    margin: -0.4rem 0 0;
    touch-action: none;
    cursor: grab;
  }
  #drawer-handle > span {
    display: block;
    width: 3rem;
    height: 0.3rem;
    border-radius: 9999px;
    background: rgb(100 116 139);
    margin: 0 auto;
  }

  /* Modales como hoja inferior con scroll propio */
  #universe-modal > div,
  #photos-modal > div {
    max-height: 90dvh;
    overflow-y: auto;
  }

  #lightbox-modal img {
    max-height: 62dvh;
    object-fit: contain;
  }

  #zen-sphere-list { max-height: 55dvh; }
}

/* ---------- Móvil horizontal (cualquier ancho, alto <= 560px) ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  #main-header { padding-top: max(0.4rem, env(safe-area-inset-top)); }
  #main-header h1 { font-size: 0.9rem; }
  #main-header p { display: none; }
  #celestial-pills-bar { display: none; }

  /* Columna de acciones: una sola columna con scroll, nunca se sale de pantalla */
  #quick-action-bar {
    flex-direction: column;
    justify-content: flex-start;
    top: calc(max(0.4rem, env(safe-area-inset-top)) + 3.2rem);
    bottom: 0.5rem;
    right: max(0.5rem, env(safe-area-inset-right));
    gap: 0.4rem;
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: none;
  }
  #quick-action-bar::-webkit-scrollbar { display: none; }
  #quick-action-bar button {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
  }

  #bottom-photo-bar {
    left: max(0.5rem, env(safe-area-inset-left));
    right: auto;
    bottom: 0.5rem;
    max-width: calc(100vw - 4.5rem);
    padding-bottom: 0;
  }

  #btn-exit-clean-mode {
    top: max(0.5rem, env(safe-area-inset-top));
    right: max(0.5rem, env(safe-area-inset-right));
  }

  /* Panel lateral de alto completo: junto a la columna de acciones, con scroll interno */
  #main-drawer {
    left: auto;
    right: calc(3.4rem + env(safe-area-inset-right));
    top: max(0.4rem, env(safe-area-inset-top));
    bottom: 0.4rem;
    width: min(400px, 54vw);
    max-height: none;
    padding-bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.25rem;
  }
  #main-drawer > .overflow-y-auto { padding: 0.75rem; }
  #drawer-handle { display: none; }

  /* Con el panel abierto, el selector de cabecera quedaría tapado: se oculta */
  body.drawer-open #main-header > div > div:last-child { display: none; }

  #universe-modal,
  #photos-modal {
    align-items: center;
    padding: 0.5rem;
  }
  #universe-modal > div,
  #photos-modal > div {
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    border-radius: 1.25rem;
    padding: 1rem;
  }

  /* Visor con controles compactos */
  #lightbox-modal { padding: 0.5rem; }
  #lightbox-modal > div { max-width: 100%; padding: 0.6rem; }
  #lightbox-modal img { max-height: calc(100dvh - 8.5rem); object-fit: contain; }

  #zen-sphere-list { max-height: calc(100dvh - 5rem); }
  #toast-notify { top: max(0.5rem, env(safe-area-inset-top)); }
}

/* ---------- Escritorio y tablets ---------- */
@media (min-width: 768px) and (min-height: 561px) {
  #main-drawer {
    width: 420px;
    top: 4.75rem;
    right: 1.25rem;
    border-radius: 1.75rem;
    max-height: calc(100dvh - 6rem);
  }

  #quick-action-bar {
    top: 4.75rem;
    right: 1.25rem;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    scrollbar-width: none;
  }
  #quick-action-bar::-webkit-scrollbar { display: none; }

  /* El panel deja visible la botonera lateral (como en móvil) */
  #main-drawer { right: 5.25rem; }

  /* El selector de la cabecera es redundante con las píldoras y el selector del panel */
  #header-sphere-nav { display: none; }
  #celestial-pills-bar {
    top: 0.85rem;
    left: 19rem;
    right: 5rem;
    padding: 0;
    justify-content: flex-start;
  }
}

/* Dock de Vista Limpia: nunca sobrepasa la pantalla */
#zen-side-panel { max-height: calc(100dvh - 1rem); overflow-y: auto; scrollbar-width: none; }