#mobile-overlay, #mobile-bottom-nav {
    display: none !important;
}

/* Use a broader media query to ensure it catches more devices */
@media (max-width: 850px) {
    /* 1. Reset layout for mobile */
    .editor-main-layout {
        flex-direction: column !important;
        height: calc(100vh - 52px - 64px) !important;
        overflow: hidden;
    }

    /* 2. Minimap as Left Drawer */
    .editor-minimap {
        position: fixed !important;
        top: 0;
        left: -280px; /* Hidden state */
        width: 280px !important;
        height: calc(100vh - 64px - env(safe-area-inset-bottom)) !important;
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        background: var(--bg);
        z-index: 5000;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 10px 0 30px rgba(0,0,0,0.5);
        border-right: 1px solid var(--border);
        flex: none !important;
    }

    /* Completely hide minimap on mobile (user requested full removal) */
    .editor-minimap {
        display: none !important;
    }

    /* Hide present / undo / redo buttons and zoom controls on mobile (desktop unchanged) */
    #btn-undo, #btn-redo, #btn-present, #btn-zoom-in, #btn-zoom-out, #canvas-zoom-display {
        display: none !important;
    }

    .editor-minimap.open {
        transform: translateX(280px);
    }

    /* 3. Tools Panel: HIDDEN on mobile (no editing tools UI) */
    .editor-tools-panel {
        display: none !important;
    }

    /* Hide floating add-elements toolbar on mobile (read-only canvas) */
    #floating-toolbar,
    .tools-add-elements {
        display: none !important;
    }

    /* 4. Preview Stage Occupies 100% width */
    .preview-stage {
        width: 100% !important;
        flex: 1 !important;
        margin-top: 52px !important;
        margin-bottom: 64px !important;
        padding: 0 !important;
        touch-action: none; /* Disable ALL browser touch gestures to let bridge handle drag/resize */
    }

    .preview-wrapper-scrollable {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden !important; /* Managed by JS bridge for drag */
    }

    /* Transparent overlay that captures ALL touch events on the slide area.
       Lives in the parent document so touches never cross the iframe boundary.
       Must fill the wrapper exactly so it covers the iframe at any zoom level. */
    .preview-wrapper {
        position: relative;
    }

    #touch-capture-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        touch-action: none;
        /* transparent – no background */
    }

    /* 5. Mobile UI Elements */
    #mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: var(--bg);
        border-top: 1px solid var(--border);
        z-index: 5001;
        align-items: center;
        justify-content: space-around;
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .mobile-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: transparent;
        border: none;
        color: var(--muted);
        font-size: 10px;
        gap: 4px;
    }

    /* Prev / Next slide buttons — slightly larger hit target, no label */
    .mobile-prev-btn,
    .mobile-next-btn {
        min-width: 44px;
        height: 44px;
        justify-content: center;
    }

    .mobile-nav-btn.active {
        color: var(--accent);
    }

    /* Minimap drawer: allow native touch-pan so users can scroll through slides */
    .editor-minimap.open {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        /* JS manages translateY on the list; keep container scrollable as fallback */
        touch-action: pan-y;
    }

    /* Minimap list: allow overflow so JS touch-scroll clamp works correctly */
    .editor-minimap .minimap-list {
        overflow: visible;
    }

    #mobile-overlay {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6) !important; /* Dim only, no blur */
        backdrop-filter: none !important;
        z-index: 4999;
        visibility: hidden;
        opacity: 0;
        transition: all 0.3s ease;
    }

    /* Ensure panels are never blurred */
    .editor-minimap, .editor-tools-panel {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-font-smoothing: antialiased;
    }

    #mobile-overlay.visible {
        visibility: visible;
        opacity: 1;
    }

    /* Header: left/right are flex items, center is absolutely centred */
    .preview-unified-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        padding-top: env(safe-area-inset-top);
        padding-left: calc(0.5rem + env(safe-area-inset-left));
        padding-right: calc(0.5rem + env(safe-area-inset-right));
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        grid-template-areas: none !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 0 !important;
        gap: 0.45rem !important;
        height: 52px !important;
        min-height: 52px !important;
        background: var(--bg) !important;
        z-index: 4998;
    }

    .preview-unified-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

    .preview-unified-left .preview-topic-input {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.86rem !important;
        padding: 0.15rem 0.35rem !important;
    }

    /* Hide dots block from header on mobile — they live in the bottom nav now */
    .preview-unified-center {
        display: none !important;
    }

    /* Bottom nav: dots center slot */
    .mobile-dots-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        overflow: visible;
        padding: 0 2px;
        min-width: 0;
    }

    .mobile-slide-dots {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        align-items: center;
        padding: 4px 0; /* room for scale(1.4) without clipping */
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: transform;
    }

    /* reuse desktop dot styles */
    .mobile-slide-dots .slide-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--surface2);
        border: none;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .mobile-slide-dots .slide-dot.active {
        background: var(--accent);
        transform: scale(1.4);
        box-shadow: 0 0 8px rgba(255,255,255,0.3);
    }

    .mobile-slide-label {
        font-family: monospace;
        font-size: 0.75rem;
        color: var(--muted);
        opacity: 0.7;
        white-space: nowrap;
        letter-spacing: 0.05em;
    }

    .preview-unified-right {
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        min-width: max-content !important;
        gap: 0.6rem !important;
    }

    .preview-unified-right .action-btn {
        padding: 6px !important;
        min-width: 36px !important;
        height: 36px !important;
        gap: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        color: var(--muted) !important;
    }

    .preview-unified-right .action-btn span {
        display: none !important; /* Hide text labels */
    }

    .preview-unified-right #canvas-zoom-display,
    .preview-unified-right #btn-zoom-in,
    .preview-unified-right #btn-zoom-out {
        font-size: 0.8rem !important;
        padding: 0 2px !important;
        background: transparent !important;
        color: var(--muted) !important;
    }

    .header-v-separator {
        display: none !important;
    }

    #finalize-btn, #preview-reset-btn {
        background: transparent !important;
        border: none !important;
        color: var(--muted) !important;
    }

    /* Fix centering for complex buttons with wrappers */
    #finalize-btn .btn-content-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 6. Centrado del nuevo hero en móvil */
    #chat-screen {
        padding: 2rem 1.5rem !important;
        padding-top: 5.9rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .top-control-bar {
        height: auto !important;
        min-height: 52px !important;
        padding: 0.32rem 0 !important;
    }

    .chat-container {
        width: 100% !important;
        max-width: 560px !important;
        gap: 1.1rem !important;
    }

    .top-control-panel {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.55rem !important;
    }

    .top-brand {
        justify-content: center !important;
    }

    .top-controls {
        width: auto !important;
        justify-content: flex-end !important;
        gap: 0.45rem !important;
    }

    .control-pill {
        min-width: 150px !important;
        justify-content: space-between !important;
        padding: 0.34rem 0.5rem !important;
    }

    .control-pill.control-pill-icon {
        min-width: 36px !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .theme-toggle-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        flex: 0 0 auto !important;
    }

    .app-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0 !important;
    }

    .hero-title {
        font-size: 2rem !important;
        line-height: 1.04 !important;
        max-width: 15ch !important;
    }

    body .app-microcopy {
        margin-top: 0.45rem !important;
        text-align: center !important;
        font-size: 0.78rem !important;
    }

    .starter-label {
        text-align: center !important;
        padding-left: 0 !important;
        margin-bottom: 0.6rem !important;
    }

    .starter-carousel {
        mask-image: none !important;
        -webkit-mask-image: none !important;
        overflow-x: hidden !important;
    }

    .starter-track {
        gap: 0.5rem !important;
    }

    .starter-card {
        min-height: 108px !important;
        flex: 0 0 216px !important;
        padding: 0.72rem !important;
        border-radius: 8px !important;
    }

    /* Mobile: make starter cards visually transparent to match page background
       and avoid distinct gradient blocks that clash with the surrounding BG. */
    .starter-card {
        background: transparent !important;
        border: 1px solid var(--border) !important;
        box-shadow: none !important;
        min-height: 108px !important;
        flex: 0 0 216px !important;
        padding: 0.72rem !important;
        border-radius: 8px !important;
    }

    .starter-card:hover,
    .starter-card.is-hovered {
        background: transparent !important;
        border-color: var(--border) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
    }

    .starter-card-text {
        color: var(--text) !important;
    }

    .starter-card-text {
        font-size: 0.82rem !important;
        line-height: 1.28 !important;
    }

    .starter-card-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .chat-input-wrapper {
        min-height: auto !important;
        padding: 0.75rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .chat-input-container {
        width: 100% !important;
    }

    .chat-input {
        min-height: 64px !important;
        font-size: 1rem !important;
        padding: 0.5rem !important;
    }

    .chat-actions {
        display: grid !important;
        grid-template-columns: 60px minmax(0, 1fr) !important;
        gap: 0.6rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .btn-debug-last-generated {
        display: none !important;
    }

    .btn-mode-toggle {
        grid-column: 1 !important;
        position: relative !important;
        height: 44px !important;
        width: 60px !important;
        min-width: 60px !important;
        border-radius: 12px !important;
        padding: 0 0.6rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.2rem !important;
    }

    .btn-mode-label {
        display: none !important;
    }

    .btn-mode-chevron {
        display: flex !important;
        opacity: 0.6;
    }

    /* Ocultar el select nativo — ahora usamos dropdown custom */
    .mode-select-mobile {
        display: none !important;
    }

    .btn-mode-toggle:disabled {
        opacity: 0.65 !important;
        cursor: not-allowed !important;
        background: var(--surface2) !important;
        color: var(--muted) !important;
        border-color: var(--border) !important;
        filter: brightness(0.85) saturate(0.75) !important;
    }

    .btn-mode-toggle:disabled:hover {
        background: var(--surface2) !important;
        border-color: var(--border) !important;
    }

    /* ── Custom Mode Dropdown ── */
    .mode-dropdown-custom {
        position: fixed;
        z-index: 99999;
        min-width: 210px;
        background: var(--surface2, #1a1a1a);
        border: 1px solid var(--border, rgba(255,255,255,0.12));
        border-radius: 14px;
        padding: 6px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
        display: flex;
        flex-direction: column;
        gap: 2px;
        opacity: 0;
        transform: translateY(-4px) scale(0.96);
        transform-origin: top left;
        transition: opacity 0.18s cubic-bezier(0.16,1,0.3,1),
                    transform 0.18s cubic-bezier(0.16,1,0.3,1);
        pointer-events: none;
    }

    .mode-dropdown-custom.is-open {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .mode-dropdown-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border-radius: 10px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--text, #f0f0f0);
        font-family: var(--font-body, sans-serif);
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        text-align: left;
        width: 100%;
        transition: background 0.14s ease, border-color 0.14s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mode-dropdown-option:hover {
        background: rgba(255,255,255,0.07);
        border-color: rgba(255,255,255,0.08);
    }

    .mode-dropdown-option:active {
        background: rgba(255,255,255,0.11) !important;
    }

    :root[data-theme="light"] .mode-dropdown-option:hover {
        background: rgba(0,0,0,0.08);
        border-color: rgba(0,0,0,0.1);
    }

    :root[data-theme="light"] .mode-dropdown-option:active {
        background: rgba(0,0,0,0.14) !important;
    }

    .mode-dropdown-option.is-selected {
        background: rgba(0, 102, 255, 0.12);
        border-color: rgba(0, 102, 255, 0.3);
        color: #5c9fff;
    }

    .mode-dropdown-option.is-selected .mode-dropdown-option-label {
        color: #5c9fff;
    }

    .mode-dropdown-option.is-selected .mode-dropdown-option-sub {
        color: rgba(92, 159, 255, 0.7);
    }

    .mode-dropdown-option.is-selected .mode-dropdown-option-icon,
    .mode-dropdown-option.is-selected .mode-dropdown-check {
        color: #5c9fff;
    }

    .mode-dropdown-option-icon {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        color: var(--muted, rgba(255,255,255,0.5));
    }

    .mode-dropdown-option.is-selected .mode-dropdown-option-icon {
        color: var(--text, #f0f0f0);
    }

    .mode-dropdown-option-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .mode-dropdown-option-label {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--text, #f0f0f0);
        white-space: nowrap;
    }

    .mode-dropdown-option-sub {
        font-size: 0.72rem;
        color: var(--muted, rgba(255,255,255,0.5));
        font-weight: 400;
    }

    .mode-dropdown-check {
        margin-left: auto;
        flex-shrink: 0;
        color: var(--text, #f0f0f0);
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .mode-dropdown-option.is-selected .mode-dropdown-check {
        opacity: 1;
    }

    /* Light theme */
    :root[data-theme="light"] .mode-dropdown-custom {
        background: #FFFFFF;
        border-color: #D1D5DB;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    }

    :root[data-theme="light"] .mode-dropdown-option {
        color: #111827;
    }

    :root[data-theme="light"] .mode-dropdown-option.is-selected {
        background: #EFF6FF;
        border-color: #BFDBFE;
        color: #1E40AF;
    }

    :root[data-theme="light"] .mode-dropdown-option.is-selected .mode-dropdown-option-label {
        color: #1E40AF;
    }

    :root[data-theme="light"] .mode-dropdown-option.is-selected .mode-dropdown-option-sub {
        color: #60A5FA;
    }

    :root[data-theme="light"] .mode-dropdown-option.is-selected .mode-dropdown-option-icon,
    :root[data-theme="light"] .mode-dropdown-option.is-selected .mode-dropdown-check {
        color: #2563EB;
    }

    :root[data-theme="light"] .mode-dropdown-option-label {
        color: #111827;
    }

    :root[data-theme="light"] .mode-dropdown-option-sub {
        color: #4B5563;
    }

    :root[data-theme="light"] .mode-dropdown-option-icon,
    :root[data-theme="light"] .mode-dropdown-check {
        color: #1F2937;
    }

    .btn-generate-chat {
        grid-column: 2 !important;
        height: 44px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 14px !important;
        font-size: 0.9rem !important;
        padding: 0 0.75rem !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
}

/* Base styles for new components (hidden by default) */
#mobile-bottom-nav, #mobile-overlay {
    display: none;
}

/* ============================================================
   MOBILE PERFORMANCE: kill expensive animations & effects
   that destroy frame rate on low-power GPUs
   ============================================================ */
@media (max-width: 850px) {
    /* 1. The neon border spin uses @property + conic-gradient repainted 60fps.
          The ::before drop-shadow triples the cost. Kill both. */
    .chat-input-wrapper::before {
        animation: none !important;
        filter: none !important;
        background: rgba(0, 102, 255, 0.15) !important;
        -webkit-mask: none !important;
        mask: none !important;
        border-radius: 19px !important;
        inset: -1px !important;
        padding: 0 !important;
        opacity: 0.6 !important;
    }

    /* 2. The input box pulsing box-shadow animation — triggers composite + repaint */
    .chat-input-wrapper {
        animation: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(12, 12, 12, 0.95) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 102, 255, 0.2) !important;
    }

    /* 3. Hero title glow animation */
    .hero-title {
        animation: none !important;
    }

    /* 4. Logo shimmer (background-position animated 60fps) */
    .logo-brand {
        animation: none !important;
        background: none !important;
        -webkit-text-fill-color: var(--text) !important;
        color: var(--text) !important;
        filter: none !important;
    }

    /* 5. Dot pulse */
    .app-logo .dot {
        animation: none !important;
    }

    /* 6. Top control bar backdrop-filter */
    .top-control-panel {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ---- Input box: sin azul, borde gris, fondo oscuro 80% ---- */
    /* Dark mode (por defecto) */
    .chat-input-wrapper {
        background: rgba(18, 18, 18, 0.8) !important;
        border: none !important; /* use box-shadow ring to avoid clipping */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
        background-clip: padding-box !important;
        -webkit-background-clip: padding-box !important;
        overflow: visible !important;
        animation: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition: box-shadow 0.18s ease !important;
        border-radius: 18px !important;
    }

    .chat-input-wrapper:focus-within {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.38) !important;
    }

    .chat-input-wrapper::before {
        display: none !important;
    }

    /* Light mode */
    :root[data-theme="light"] .chat-input-wrapper {
        background: rgba(255, 255, 255, 0.8) !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.18) !important;
        background-clip: padding-box !important;
        -webkit-background-clip: padding-box !important;
        overflow: visible !important;
        border-radius: 18px !important;
    }

    :root[data-theme="light"] .chat-input-wrapper:focus-within {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.35) !important;
    }

    /* ============================================================
       DYNAMIC VIEWPORT HEIGHT (dvh) Support
       For devices where address bar hides/shows dynamically
       ============================================================ */
    @supports (height: 100dvh) {
        .editor-main-layout {
            height: calc(100dvh - 52px - 64px) !important;
        }

        .editor-minimap {
            height: calc(100dvh - 64px - env(safe-area-inset-bottom)) !important;
        }

        .preview-stage {
            margin-top: max(52px, calc(52px + env(safe-area-inset-top))) !important;
            margin-bottom: max(64px, calc(64px + env(safe-area-inset-bottom))) !important;
        }
    }

    /* ============================================================
       TOUCH FEEDBACK & FOCUS STATES
       Improve accessibility and user feedback
       ============================================================ */
    .mobile-nav-btn:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .mobile-nav-btn:active {
        transform: scale(0.95);
        transition: transform 0.1s ease-out;
    }

    /* Streaming must use the full viewport on mobile (no reserved header/nav space). */
    #preview-container.is-generating .editor-main-layout {
        height: 100vh !important;
        height: 100dvh !important;
    }

    #preview-container.is-generating .preview-stage {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    #preview-container.is-generating .preview-unified-header,
    #preview-container.is-generating #mobile-bottom-nav {
        display: none !important;
    }
}