/* =============================================
   MODO INMERSIVO - immersive.css

   Son dos capas independientes que el mismo control activa a la vez:

   1) App-shell (html.immersive)
      El documento raíz deja de scrollear y el scroll pasa a .main-content.
      El navegador móvil solo revela/oculta su barra de direcciones cuando
      scrollea el root, así que con esto deja de aparecer con cada gesto
      hacia arriba. overscroll-behavior-y: contain corta el scroll chaining,
      que es lo que obligaba a llegar al fondo y seguir empujando.

   2) Fullscreen real (Fullscreen API)
      Lo dispara immersive.js con el tap del usuario (la API exige un gesto).
      Oculta de verdad barra de direcciones, botones y barra de estado.
      Si el navegador no lo soporta (iOS Safari), queda solo la capa 1.

   Instalada como PWA no hace falta ninguna de las dos: no hay barra.
   ============================================= */

/* ─────────────────────────────────────────────
   Capa 1: App-shell
   ───────────────────────────────────────────── */

html.immersive,
html.immersive body {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* dvh descuenta la barra del navegador; vh no. */
@supports (height: 100dvh) {

    html.immersive,
    html.immersive body {
        height: 100dvh;
        max-height: 100dvh;
    }
}

/* El body es flex column con min-height: 100vh. En modo shell esa altura
   mínima lo haría más alto que el html y el contenido quedaría cortado. */
html.immersive body {
    min-height: 0;
}

/* Los módulos con shell propio (body.no-header: ambientsound, audionodes)
   ya son position: fixed a pantalla completa; no se les toca el layout. */
html.immersive body:not(.no-header) .main-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* El footer es solo el copyright: en inmersivo estorba, y pinnearlo al fondo
   del shell comería pantalla justo en el modo que existe para ganarla. */
html.immersive .footer {
    display: none;
}

/* ─────────────────────────────────────────────
   Capa 2: Safe areas en fullscreen real y PWA instalada
   ───────────────────────────────────────────── */

html.immersive-fs .header {
    height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
}

html.immersive-fs #synapse-trigger {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

html.immersive-fs #core-fab {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}

html.immersive-fs #debugToggle {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (display-mode: standalone),
(display-mode: fullscreen) {
    .header {
        height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }

    #synapse-trigger {
        bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #core-fab {
        bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #debugToggle {
        bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ─────────────────────────────────────────────
   La cápsula

   Estas son las reglas base; hoy SIEMPRE se pintan junto con la variante
   --docked de más abajo, que sobreescribe posición y tamaño. Fue una pestaña
   colgante del borde superior, y se retiró porque arriba al centro es donde la
   mayoría de los móviles tienen el agujero de la cámara frontal.
   ───────────────────────────────────────────── */

.immersive-capsule {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 50%;
    z-index: 10002;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 56px;
    height: 26px;
    padding: 0 0 4px;
    margin: 0;

    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 13px 13px;
    background: rgba(var(--color-surface-rgb), 0.75);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--color-text-secondary);
    cursor: pointer;

    /* touch-action: none para poder leer el swipe vertical sin que el
       navegador se lleve el gesto como scroll. */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;

    opacity: 0.35;
    transform: translate(-50%, -45%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* La parte visible en reposo son ~14px: muy poco para el dedo. Este pseudo
   extiende el área táctil hacia abajo sin cambiar el aspecto de la pastilla. */
.immersive-capsule::before {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: 0;
    bottom: -24px;
}

.immersive-capsule svg {
    display: block;
    transition: transform 0.25s ease;
}

/* Chevron arriba = "ocultar la barra". Abajo = "traerla de vuelta".
   Se guía por .immersive-will-exit y NO por .immersive, que es la preferencia
   guardada: al salir de fullscreen con Esc la preferencia sigue activa, y con
   ella la flecha seguía diciendo "salir" mientras el siguiente tap volvía a
   entrar. La clase la calcula syncControls() en immersive.js. */
html.immersive-will-exit .immersive-capsule svg {
    transform: rotate(180deg);
}

html.immersive .immersive-capsule {
    color: var(--color-primary);
    border-color: rgba(var(--color-primary-rgb), 0.4);
}

/* Instalada como PWA no hay barra que ocultar: el control sobra. La clase la
   pone immersive.js; NO usar una media query de display-mode aquí, porque
   `display-mode: fullscreen` también matchea durante el fullscreen de la API y
   escondería el control justo cuando es la única forma de salir. */
html.pwa-installed .immersive-capsule {
    display: none;
}

/* Se aparta cuando el asistente está abierto, igual que los otros flotantes.
   Acoplada no: ahí es parte de la barra y no estorba a nadie. */
body.synapse-active .immersive-capsule:not(.immersive-capsule--docked) {
    opacity: 0 !important;
    pointer-events: none;
}

/* ─────────────────────────────────────────────
   La cápsula, acoplada a la barra de la vista

   Cuando la vista declara `data-immersive-dock`, immersive.js mueve la cápsula
   dentro de ese elemento y le pone esta clase. Deja de colgar del borde
   superior y pasa a ser un botón normal de la barra, que es lo que evita que
   tape el contenido: en el visor de cámara la pastilla flotante caía encima
   del vídeo justo en móvil.

   El aspecto concreto (colores) lo pone la vista, porque su barra puede tener
   su propia paleta y no la del tema de la app.
   ───────────────────────────────────────────── */

.immersive-capsule--docked {
    position: static;
    top: auto;
    left: auto;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;

    border: 1px solid var(--color-border);
    border-radius: 10px;

    /* Ya no es una pestaña semioculta: dentro de la barra se ve entera. */
    opacity: 1;
    transform: none;

    /* Sin swipe que leer, el navegador puede quedarse el gesto. */
    touch-action: manipulation;
}

.immersive-capsule--docked:hover,
.immersive-capsule--docked:focus-visible,
.immersive-capsule--docked.is-active,
html.immersive-fs .immersive-capsule--docked {
    opacity: 1;
    transform: none;
}

/* El pseudo que ampliaba el área táctil sobra con 34px, y aquí sería dañino:
   se solaparía con los controles vecinos de la barra. */
.immersive-capsule--docked::before {
    content: none;
}

/* ─────────────────────────────────────────────
   Entradas de menú (dropdown de usuario, sidebar móvil, FAB core)
   ───────────────────────────────────────────── */

.immersive-menu-state {
    margin-left: auto;
    padding-left: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

html.immersive .immersive-menu-state {
    color: var(--color-primary);
}

/* Reset para usar <button> dentro de listas pensadas para <a> */
button.immersive-menu-item {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}