/* ==========================================================================
   YZG STUDIO - MÓVIL (≤ 768 px)
   Capa única para el teléfono. Va al final y no toca el escritorio.
   Objetivo: mismo estilo que PC, contenido centrado, nada fuera de pantalla.
   ========================================================================== */

@media (max-width: 768px) {

  /* 0. Nada se desplaza a los lados */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* 1. Área principal: quitar el espacio del menú de escritorio (100 px) */
  .main-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 2. Vistas: ocupan todo el ancho y empiezan debajo del encabezado */
  #view-chat,
  #view-gallery,
  #view-builder,
  #view-agent {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 108px 14px 96px !important; /* encabezado (52) + barra (48) arriba, dock abajo */
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 3. Contenido centrado en columna */
  #view-chat > *,
  #view-gallery > *,
  #view-builder > *,
  #view-agent > * {
    max-width: 100% !important;
  }
  .empty-state {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    margin: 0 auto !important;
    align-items: center !important;
    text-align: center !important;
  }
  .empty-state h2 { font-size: 22px !important; text-align: center !important; }
  .empty-state p { font-size: 14px !important; text-align: center !important; }

  /* 4. Barra de escribir: centrada y del ancho de la pantalla */
  .mega-input-wrapper,
  .state-chat .mega-input-wrapper,
  .state-build .mega-input-wrapper,
  .state-chat .agent-gh-bar,
  .state-build .agent-gh-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* 5. Barra de acciones (Crear app, Volver, Ajustes): fija debajo del encabezado móvil.
     Sin backdrop-filter: ese efecto convierte la barra en contenedor de los elementos fijos. */
  .top-bar {
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    z-index: 300 !important;
    background: var(--bg, #0b0b0e) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, .08)) !important;
  }
  /* El título ya está en el encabezado móvil, y el modo se ve en el chat */
  .top-bar .prompt-title,
  .top-bar .mode-badge { display: none !important; }
  .top-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    backdrop-filter: none !important;
  }
  .top-right .btn-create-app,
  .top-right .btn-back {
    height: 36px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  /* 6. Botones de Crear y "I'm feeling lucky": una sola línea */
  .agent-build-toggle,
  .agent-magic-btn {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* 7. Encabezado y dock: mismo estilo, centrados */
  .yzg-mobile-header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  .yzg-mobile-dock {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 38px) !important;
    max-width: 380px !important;
    bottom: 14px !important;
  }

  /* 8. Ventanas (Ajustes, modales): ocupan la pantalla sin salirse */
  .params-panel {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 20px) !important;
    max-width: 440px !important;
  }

  /* 9. Cajón del menú: debajo del encabezado y sobre el contenido */
  #main-sidebar.sidebar {
    top: 52px !important;
    z-index: 400 !important;
  }
}

/* 10. Crear (constructor): en móvil el panel de chat flotante y el área de trabajo
   vuelven a su lugar normal, dentro de la pantalla (en PC pueden quedar desplazados) */
@media (max-width: 768px) {
  #builder-workspace,
  #glass-chat,
  .glass-workspace,
  .glass-window,
  .glass-input-area,
  .glass-header {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #view-builder {
    overflow-x: hidden !important;
  }
}

/* ==========================================================================
   11. EFECTOS MÓVILES
   Cada efecto respeta su interruptor en Ajustes → Animaciones
   (clase yzg-no-anim-<nombre> en <html>) y "Movimiento reducido".
   ========================================================================== */
@keyframes yzgDockIn {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes yzgHeaderIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes yzgPopIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 768px) {

  /* A. Encabezado y dock entran al abrir la app */
  html:not(.yzg-no-anim-views) .yzg-mobile-header {
    animation: yzgHeaderIn .4s cubic-bezier(.2, .8, .2, 1) both;
  }
  html:not(.yzg-no-anim-views) .yzg-mobile-dock {
    animation: yzgDockIn .45s cubic-bezier(.2, .8, .2, 1) .1s both;
  }

  /* B. Botones responden al tocar (encogen un poco y vuelven) */
  html:not(.yzg-no-anim-press) .m-dock-btn,
  html:not(.yzg-no-anim-press) .m-icon-btn,
  html:not(.yzg-no-anim-press) .btn-create-app,
  html:not(.yzg-no-anim-press) .btn-back,
  html:not(.yzg-no-anim-press) .agent-build-toggle,
  html:not(.yzg-no-anim-press) .agent-magic-btn,
  html:not(.yzg-no-anim-press) .icon-btn {
    transition: transform .15s ease, background-color .2s ease, box-shadow .25s ease, color .2s ease;
  }
  html:not(.yzg-no-anim-press) .m-dock-btn:active,
  html:not(.yzg-no-anim-press) .m-icon-btn:active,
  html:not(.yzg-no-anim-press) .btn-create-app:active,
  html:not(.yzg-no-anim-press) .btn-back:active,
  html:not(.yzg-no-anim-press) .agent-build-toggle:active,
  html:not(.yzg-no-anim-press) .agent-magic-btn:active,
  html:not(.yzg-no-anim-press) .icon-btn:active {
    transform: scale(.9);
  }

  /* C. Menú lateral: se desliza suave al abrir y cerrar */
  html:not(.yzg-no-anim-sidebar) #main-sidebar.sidebar {
    transition: transform .32s cubic-bezier(.2, .8, .2, 1) !important;
  }

  /* D. Avisos: aparecen sobre el dock y no lo tapan */
  .yzg-toast {
    bottom: 96px !important;
    max-width: calc(100% - 32px) !important;
    text-align: center !important;
  }
  html:not(.yzg-no-anim-toasts) .yzg-toast {
    animation: yzgPopIn .25s cubic-bezier(.2, .8, .2, 1) both;
  }

  /* E. Tarjetas de Mis Apps: entrada escalonada (respeta "Entrada de tarjetas") */
  html:not(.yzg-no-anim-cards) #view-gallery .app-card,
  html:not(.yzg-no-anim-cards) #view-gallery .gallery-card,
  html:not(.yzg-no-anim-cards) #view-gallery .card-app {
    animation: yzgPopIn .35s cubic-bezier(.2, .8, .2, 1) both;
  }

  /* F. Movimiento reducido (Ajustes): sin ningún efecto de este bloque */
  html.yzg-reduce-motion .yzg-mobile-header,
  html.yzg-reduce-motion .yzg-mobile-dock,
  html.yzg-reduce-motion .yzg-toast,
  html.yzg-reduce-motion #view-gallery .app-card {
    animation: none !important;
  }
  html.yzg-reduce-motion .m-dock-btn:active,
  html.yzg-reduce-motion .m-icon-btn:active { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .yzg-mobile-header,
  .yzg-mobile-dock,
  .yzg-toast { animation: none !important; }
}

/* ==========================================================================
   12. BARRA INFERIOR MÓVIL = BARRA LATERAL DE PC
   Mismo contenedor, mismos iconos y mismo botón activo con resplandor.
   ========================================================================== */
@media (max-width: 768px) {
  .yzg-mobile-dock {
    display: flex !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    gap: 6px !important;
    height: auto !important;
    padding: 8px 10px !important;
    border-radius: 28px !important;
    background: rgba(18, 18, 23, 0.65) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid var(--border, rgba(255, 255, 255, .08)) !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, .4) !important;
    box-sizing: border-box !important;
  }
  .yzg-mobile-dock .m-dock-btn {
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--text-secondary, #9aa3b8) !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .yzg-mobile-dock .m-dock-btn .material-symbols-outlined {
    font-size: 22px !important;
  }
  /* Activo igual que el menú de PC: degradado indigo, borde y resplandor */
  .yzg-mobile-dock .m-dock-btn.active {
    background: linear-gradient(135deg, rgba(129, 140, 248, .25), rgba(168, 199, 250, .1)) !important;
    border: 1px solid rgba(129, 140, 248, .4) !important;
    box-shadow: var(--accent-glow, 0 0 20px rgba(99, 102, 241, .3)) !important;
    color: var(--accent-hover, #a5b4fc) !important;
  }
  html:not(.yzg-no-anim-press) .yzg-mobile-dock .m-dock-btn {
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s ease, box-shadow .25s ease, color .2s ease !important;
  }
}

/* 13. FONDOS Y BRILLOS IGUALES A PC (valores medidos en escritorio)
   - Chat: degradado radial de fondo (ultra-ui lo borra con !important; aquí se restaura).
   - Barra superior: desenfoque y fondo translúcido de PC. La barra es la que está fija,
     así que el backdrop-filter ya no atrapa a ningún hijo fijo. */
@media (max-width: 768px) {
  #view-chat {
    background-image: radial-gradient(circle at center top, rgb(21, 21, 34) 0%, rgb(9, 9, 11) 80%) !important;
  }
  /* Cajón del menú: mismo cristal que la barra lateral de PC */
  #main-sidebar.sidebar {
    background: rgba(18, 18, 23, .65) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
  }
  .top-bar {
    background: rgba(9, 9, 11, .8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
}

/* 14. BARRA SUPERIOR VACÍA (solo móvil)
   El icono de Ajustes ya está en la barra inferior, así que se quita de la franja.
   La franja solo se muestra si tiene algo que hacer: "Crear app" (galería) o "Volver" (constructor). */
@media (max-width: 768px) {
  .top-bar .icon-btn { display: none !important; }
  body:not(:has(#btn-create-app:not(.hidden))):not(:has(#btn-back:not(.hidden))) .top-bar {
    display: none !important;
  }
  body:not(:has(#btn-create-app:not(.hidden))):not(:has(#btn-back:not(.hidden))) #view-chat,
  body:not(:has(#btn-create-app:not(.hidden))):not(:has(#btn-back:not(.hidden))) #view-agent,
  body:not(:has(#btn-create-app:not(.hidden))):not(:has(#btn-back:not(.hidden))) #view-gallery,
  body:not(:has(#btn-create-app:not(.hidden))):not(:has(#btn-back:not(.hidden))) #view-builder {
    padding-top: 60px !important; /* solo encabezado (52) + margen */
  }
}

/* 15. CHAT (solo móvil): instrucciones del sistema más arriba y barra de escribir un poco más arriba.
   La barra queda encima del dock con un margen; la regla de ultra-ui usa bottom: 74px. */
@media (max-width: 768px) {
  #view-chat .workspace-container {
    padding-top: 6px !important;
  }
  #view-chat .input-box {
    bottom: 93px !important;
  }
}

/* 16. MY APPS (galería, solo móvil): mismo margen a ambos lados, título y tarjetas alineados a la izquierda,
   una columna de tarjetas y sin barra de desplazamiento visible. */
@media (max-width: 768px) {
  #view-gallery .gallery-container {
    padding: 20px 16px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none;
  }
  #view-gallery .gallery-container::-webkit-scrollbar { display: none; }
  /* Create App alineado con el borde del contenido (30 px a cada lado) */
  .top-bar { padding-left: 30px !important; padding-right: 30px !important; }
  #view-gallery .gallery-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }
  #view-gallery .gallery-title,
  #view-gallery .gallery-subtitle { width: 100% !important; text-align: left !important; }
  #view-gallery .apps-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 16px !important;
  }
}

/* 17. MY APPS (solo móvil)
   - Sin barra superior: "Crear app" se quita porque la tarjeta "Create new App" hace lo mismo.
   - "Importar app" se alinea a la derecha de "My Apps", con el mismo margen de 30 px a cada lado.
   - Efectos: entrada del encabezado y tarjetas escalonada, presión al tocar y resplandor en la tarjeta nueva.
     Respeta los interruptores de Ajustes. */
@media (max-width: 768px) {
  body:has(#view-gallery:not(.hidden)) .top-bar,
  body:has(#view-gallery:not(.hidden)) #btn-create-app { display: none !important; }
  body:has(#view-gallery:not(.hidden)) #view-gallery { padding-top: 60px !important; }

  #view-gallery .gallery-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  /* Título y botón en una fila; el subtítulo ocupa todo el ancho debajo */
  #view-gallery .gallery-header { flex-wrap: wrap !important; align-items: center !important; }
  #view-gallery .gallery-header > div:first-child { display: contents; }
  #view-gallery .gallery-title { order: 1; flex: 0 1 auto; width: auto !important; min-width: 0; margin: 0 !important; font-size: 28px !important; line-height: 1.15 !important; white-space: nowrap; }
  #view-gallery .gallery-actions { order: 2; }
  #view-gallery .gallery-subtitle { order: 3; flex: 0 0 100%; margin: 8px 0 0 !important; }
  #view-gallery .gallery-actions { flex: 0 0 auto; }
  #view-gallery .gallery-actions .btn-secondary { white-space: nowrap; padding: 8px 10px !important; font-size: 13px; }
  #view-gallery .gallery-title,
  #view-gallery .gallery-subtitle { width: auto !important; }
  #view-gallery .gallery-container { padding-top: 12px !important; }

  /* Entrada del encabezado (respeta "Entrada de vistas") */
  html:not(.yzg-no-anim-views) #view-gallery .gallery-header {
    animation: yzgPopIn .4s cubic-bezier(.2, .8, .2, 1) both;
  }
  /* Tarjetas escalonadas (respeta "Entrada de tarjetas") */
  html:not(.yzg-no-anim-cards) #view-gallery .apps-grid > .app-card:nth-child(2) { animation-delay: .06s; }
  html:not(.yzg-no-anim-cards) #view-gallery .apps-grid > .app-card:nth-child(3) { animation-delay: .12s; }
  html:not(.yzg-no-anim-cards) #view-gallery .apps-grid > .app-card:nth-child(4) { animation-delay: .18s; }
  html:not(.yzg-no-anim-cards) #view-gallery .apps-grid > .app-card:nth-child(n+5) { animation-delay: .24s; }

  /* Presión al tocar (respeta "Pulsación de botones") */
  html:not(.yzg-no-anim-press) #view-gallery .app-card:active,
  html:not(.yzg-no-anim-press) #view-gallery .gallery-header .btn-secondary:active {
    transform: scale(.97);
  }
  /* Tarjeta "Create new App": resplandor suave como la barra del chat */
  #view-gallery .app-card-new {
    box-shadow: var(--accent-glow, 0 0 20px rgba(99, 102, 241, .3));
    border-color: rgba(129, 140, 248, .35);
  }
  html.yzg-reduce-motion #view-gallery .gallery-header,
  html.yzg-reduce-motion #view-gallery .app-card { animation: none !important; }
}

/* 18. ENGINE (solo móvil, con el constructor abierto)
   Botón de cambio junto a "← My Apps": caja ↑ muestra la barra de la app; caja ↓ vuelve a la del engine.
   Mientras el engine está abierto, la barra de la app se oculta por defecto. */
@media (max-width: 768px) {
  .yzg-engine-top { display: none; }
  body:has(#view-builder:not(.hidden)) .yzg-engine-top {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 auto !important;
    border-radius: 12px !important;
    border: 1px solid var(--border, rgba(255, 255, 255, .08)) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: var(--text-secondary, #9aa3b8) !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  .yzg-engine-top .material-symbols-outlined { font-size: 20px; }
  .yzg-engine-top:active { transform: scale(.9); }
  body.yzg-engine-app-open .yzg-engine-top .material-symbols-outlined { transform: rotate(180deg); }

  /* Engine abierto: se oculta la barra de la app; con el botón se muestra */
  body:has(#view-builder:not(.hidden)) .yzg-mobile-dock { display: none !important; }
  body.yzg-engine-app-open:has(#view-builder:not(.hidden)) .yzg-mobile-dock { display: flex !important; }
}

/* ==========================================================================
   19. CONSTRUCTOR (ENGINE) EN MÓVIL — solo ≤768px, solo con el constructor abierto
   - Barra del engine: [consola][refrescar] | [chat][TV] | [guardar][descargar]
   - Ventanas: TV arriba y chat abajo. Al escribir, la TV se oculta y el chat sube hasta el teclado.
   - Archivos: hoja que sube y cubre el chat y la TV.
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Orden de la barra del engine (8 hijos: chat, TV, |, consola, refrescar, |, guardar, descargar) */
  #main-toolbar { max-width: calc(100% - 24px) !important; }
  #main-toolbar > :nth-child(1) { order: 4 !important; } /* chat */
  #main-toolbar > :nth-child(2) { order: 5 !important; } /* TV */
  #main-toolbar > :nth-child(3) { order: 3 !important; } /* | */
  #main-toolbar > :nth-child(4) { order: 1 !important; } /* consola */
  #main-toolbar > :nth-child(5) { order: 2 !important; } /* refrescar */
  #main-toolbar > :nth-child(6) { order: 6 !important; } /* | */
  #main-toolbar > :nth-child(7) { order: 7 !important; } /* guardar */
  #main-toolbar > :nth-child(8) { order: 8 !important; } /* descargar */

  /* 2. Paneles: se muestran según la barra (chat-open / tv-open) y se acomodan en pantalla */
  #view-builder:not(.chat-open) #glass-chat { display: none !important; }
  #view-builder:not(.tv-open) #glass-preview { display: none !important; }

  #view-builder #glass-chat,
  #view-builder #glass-preview {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    z-index: 20 !important;
  }
  /* TV arriba (debajo del encabezado y de la barra "Volver") */
  #view-builder.tv-open #glass-preview { top: 108px !important; height: 40vh !important; }
  /* Chat abajo; si la TV está abierta, empieza debajo de ella; deja libre la barra del engine */
  #view-builder.chat-open #glass-chat { top: 108px !important; bottom: 84px !important; }
  #view-builder.chat-open.tv-open #glass-chat { top: calc(108px + 40vh + 10px) !important; }

  /* 3. Escribiendo: la TV se oculta, el chat sube hasta el teclado y la barra del engine se oculta */
  body.yzg-kb-open #view-builder #glass-preview,
  body.yzg-kb-open #view-builder #main-toolbar { display: none !important; }
  body.yzg-kb-open #view-builder #glass-chat {
    top: 108px !important;
    bottom: calc(var(--yzg-kb, 0px) + 8px) !important;
  }

  /* 4. Archivos: hoja que sube desde abajo y cubre el chat y la TV (la barra de arriba queda visible) */
  #view-builder #code-console {
    position: fixed !important;
    top: 100px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    z-index: 35 !important;
    border-radius: 16px 16px 0 0 !important;
    border-top: 1px solid rgba(129, 140, 248, .4) !important;
  }
  #view-builder #code-console:not(.open) { transform: translateY(100%) !important; }
}