/* ============================================
   MOBILE PANELS - Реальні функціональні панелі
   Архітектура Mobile-Only Layout (стабільна робота)

   Ключові принципи:
   1. Панелі на рівні body (НЕ вкладені в DOM)
   2. position: fixed для панелей
   3. Body padding для простору під панелі
   4. Viewport locked (100vh, overflow: hidden)
   5. Контент між панелями має внутрішній scroll

   Виправляє проблему: панелі НЕ підстрибують від клавіатури
   ============================================ */

:root {
  --mobile-head-h: 82px;   /* Висота header: padding(18+16) + button(44) = 78px + 2px buffer */
  --mobile-foot-h:82px;    /* Висота footer (тільки nav кнопки) */
}

/* Приховано за замовчуванням - показуємо тільки на мобільних */
.mobile-step-head,
.mobile-step-foot {
  display: none;
}

/* ============================================
   МОБІЛЬНІ СТИЛІ (max-width: 1023px)
   ============================================ */
@media (max-width: 1023px) {
  /* Показати head панель на step-1, step-2, step-3 та step-4 */
  body[data-current-step="1"] .mobile-step-head,
  body[data-current-step="2"] .mobile-step-head,
  body[data-current-step="3"] .mobile-step-head,
  body[data-current-step="4"] .mobile-step-head {
    display: flex !important;
  }

  /* Показати foot панель ТІЛЬКИ на step-4 */
  body[data-current-step="4"] .mobile-step-foot {
    display: flex !important;
  }

  /* ВАЖЛИВО: Приховати панелі з [hidden] атрибутом
     Специфічність має бути ВИЩА за body[data-current-step] селектори вище */
  body[data-current-step="1"] .mobile-step-head[hidden],
  body[data-current-step="2"] .mobile-step-head[hidden],
  body[data-current-step="3"] .mobile-step-head[hidden],
  body[data-current-step="4"] .mobile-step-head[hidden],
  body[data-current-step="4"] .mobile-step-foot[hidden] {
    display: none !important;
  }

  /* ============================================
     КРИТИЧНІ СТИЛІ - Lock viewport
     Як у test/step_greeting.html
     ============================================ */
  html,
  body.constructor-page[data-current-step="1"],
  body.constructor-page[data-current-step="2"],
  body.constructor-page[data-current-step="3"],
  body.constructor-page[data-current-step="4"] {
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* Body БЕЗ padding - використовуємо margin на .constructor-app */
  body.constructor-page[data-current-step="1"],
  body.constructor-page[data-current-step="2"],
  body.constructor-page[data-current-step="3"],
  body.constructor-page[data-current-step="4"] {
    padding: 0 !important;
  }

  /* ============================================
     ВЕРХНЯ ПАНЕЛЬ - Fixed header з прогресом
     ============================================ */
  .mobile-step-head {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1100;
    background: rgba(244, 243, 255, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 18px 20px 16px 20px; /* Симетричний padding зліва і справа */
    border-bottom: none; /* Прогрес-бар буде нижнім краєм */
    box-shadow: 0 4px 16px rgba(33, 26, 83, 0.12);
    flex-shrink: 0;
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
    overflow: visible;
    touch-action: pan-x pinch-zoom;
    overscroll-behavior: none;
  }

  .mobile-head-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%; /* Займає всю ширину панелі */
  }

  /* ============================================
     NEW HEADER LAYOUT (Phase 1: Unified Header)
     Back [←] | Center (Title + Counter) | Next [→]
     ============================================ */

  /* Back button - Circle matching panel background */
  .mobile-head-back {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #f4f3ff; /* Same as panel background */
    border: 1.5px solid rgba(31, 34, 56, 0.25); /* Dark border */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2238; /* Dark arrow color */
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    flex-shrink: 0;
  }

  .mobile-head-back:active {
    background: #efeeff;
    transform: scale(0.95);
    border-color: rgba(31, 34, 56, 0.35);
  }

  .mobile-head-back:disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  .mobile-head-back svg {
    width: 24px;
    height: 24px;
  }

  /* Title + Counter - Left aligned after back button */
  .mobile-head-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0px;
  }

  /* Next button - Purple pill */
  .mobile-head-next {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #333333, #333333);
    color: white;
    border: none;
    border-radius: 24px;
    font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    flex-shrink: 0;
  }

  .mobile-head-next:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.25);
  }

  .mobile-head-next:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .mobile-head-next svg {
    width: 24px;
    height: 24px;
  }

  /* Hidden state for Next button */
  .mobile-head-next[hidden] {
    display: none !important;
  }

  /* Publish button - Green pill (shown on step-4 instead of Next) */
  .mobile-head-publish {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #22c55e, #0b915c);
    color: white;
    border: none;
    border-radius: 24px;
    font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    flex-shrink: 0;
  }

  .mobile-head-publish:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
  }

  .mobile-head-publish:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .mobile-head-publish svg {
    width: 24px;
    height: 24px;
  }

  /* Hidden state for Publish button */
  .mobile-head-publish[hidden] {
    display: none !important;
  }

  /* LEGACY: .mobile-head-left (kept for backwards compatibility) */
  .mobile-head-left {
    flex: 0 0 50%; /* Займає 50% ширини header панелі */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
  }

  /* Header Preview button - Стиль як у floating button */
  .btn-header-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    flex-shrink: 0;
    margin-left: auto; /* Притискає кнопку до правого краю */
    border-radius: 24px;
    border: none; /* Без border для градієнтних кнопок */
    /* Рожево-фіолетовий градієнт для Preview */
    background: linear-gradient(135deg, #f472b6, #a855f7, #7c3aed);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);

    /* Текст */
    font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;

    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
  }

  /* Білий background для Gift options mode (step-2, Edit state) */
  .btn-header-preview.state-gift-options {
    background: #ffffff !important;
    border: 2px solid #1f2238 !important; /* Чорний бордер */
    padding: 10px 18px !important; /* Зменшений padding компенсує border (12-2=10, 20-2=18) */
    color: #1f2238 !important; /* Чорний текст */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  /* Чорна іконка для Gift options mode */
  .btn-header-preview.state-gift-options svg {
    color: #1f2238 !important;
  }

  .btn-header-preview svg {
    flex-shrink: 0;
    color: #fff; /* Білий колір іконки (за замовчуванням) */
    transition: color 0.2s ease;
  }

  .btn-header-preview:active {
    transform: scale(0.95);
  }

  .btn-header-preview:has(.text-gift-options:not([style*="display: none"])):active {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  }

  .btn-header-preview:has(.icon-gift-ideas:not([style*="display: none"])):active {
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.2);
  }

  .mobile-step-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #1f2238;
    line-height: 1.3;
  }

  .mobile-step-counter {
    font-size: 12px;
    font-weight: 600;
    color: #7c7c8a;
    white-space: nowrap;
    margin-top: 0px; /* Мінімальний відступ від заголовку */
  }

  .mobile-progress {
    /* Позиціонування на всю ширину внизу панелі (компенсуємо padding панелі) */
    position: absolute;
    bottom: 0;
    left: -20px; /* Компенсує padding-left панелі */
    right: -20px; /* Компенсує padding-right панелі */
    width: calc(100% + 40px); /* Повна ширина екрану (20px + 20px) */
    margin: 0;
  }

  .mobile-progress__track {
    width: 100%;
    height: 4px; /* Тонший бар для edge-to-edge */
    background: rgba(236, 236, 246, 0.65);
    border-radius: 0; /* Без заокруглення - на всю ширину */
    position: relative;
    overflow: hidden;
  }

  .mobile-progress__fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 0; /* Без заокруглення */
    background: linear-gradient(90deg, #5716c4, #d600a9);
    box-shadow: 0 2px 8px rgba(87, 22, 196, 0.24);
    transition: width 0.3s ease;
  }

  /* ============================================
     НИЖНЯ ПАНЕЛЬ - Fixed footer з кнопками
     ============================================ */
  .mobile-step-foot {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1100;
    background: rgba(244, 243, 255, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 16px 20px;
    border-top: 1px solid rgba(74, 63, 246, 0.08);
    box-shadow: 0 -4px 16px rgba(33, 26, 83, 0.32);
    flex-shrink: 0;
    display: flex;
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
    overflow: hidden;
    touch-action: pan-x pinch-zoom;
    overscroll-behavior: none;
  }

  /* ============================================
     Navigation buttons container
     ============================================ */
  .mobile-nav-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  /* Mobile navigation buttons */
  .btn-mobile-nav {
    flex: 1;
    min-height: 48px;
    padding: 12px 20px;
    font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    border: 2px solid rgba(74, 63, 246, 0.12);
    background: #fff;
    color: #1f2238;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    position: relative;
  }

  .btn-mobile-nav:active {
    transform: scale(0.98);
  }

  .btn-mobile-nav.primary {
    background: #333;
    border-color: #333;
    color: #fff;
    box-shadow: none;
  }

  .btn-mobile-nav.primary:active {
    background: #222;
  }

  .btn-mobile-nav.success {
    background: linear-gradient(135deg, #22c55e, #0b915c);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
  }

  .btn-mobile-nav.success:active {
    background: linear-gradient(135deg, #1eb854, #087a4e);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
  }

  .btn-mobile-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Hidden states for foot panel buttons */
  .btn-mobile-nav[hidden],
  .btn-mobile-nav-preview[hidden] {
    display: none !important;
  }

  /* Preview button for step-4 (full width) */
  .btn-mobile-nav-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #333333, #333333);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
  }

  .btn-mobile-nav-preview:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.25);
  }

  .btn-mobile-nav-preview svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* ============================================
     КОНТЕНТ МІЖ ПАНЕЛЯМИ
     Body padding створює відступ від fixed панелей
     Calc обмежує загальну висоту з урахуванням панелей
     ============================================ */
  .constructor-app {
    /* FIX: Remove margin - body already has padding for panels */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  /* Steps 1-3: тільки header, без footer */
  body[data-current-step="1"] .constructor-app,
  body[data-current-step="2"] .constructor-app,
  body[data-current-step="3"] .constructor-app {
    height: calc(100vh - var(--header-height, var(--mobile-head-h))) !important;
  }

  /* Step-4: header + footer */
  body[data-current-step="4"] .constructor-app {
    height: calc(100vh - var(--header-height, var(--mobile-head-h)) - var(--footer-height, var(--mobile-foot-h))) !important;
  }

  /* Panel form має flex layout */
  .panel.form {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .panel.form .panel-head {
    flex-shrink: 0;
  }

  .panel.form .panel-body {
    flex: 1;
    /* overflow: hidden щоб обмежити висоту для nested scroll */
    overflow: hidden !important;
  }

  /* ============================================
     FIX: Desktop scroll containers блокують mobile scroll
     Layout.css встановлює height: auto на mobile
     Потрібно override для роботи nested scroll
     ВАЖЛИВО: Селектор має бути специфічнішим ніж в layout.css
     ============================================ */
  body.constructor-page .panel.form .panel-body[data-custom-scroll] .scroll-container {
    height: 100% !important;
    overflow: hidden !important;
  }

  body.constructor-page .panel.form .panel-body[data-custom-scroll] .scroll-content {
    height: 100% !important;
    overflow: visible !important;
  }

  /* ============================================
     FIX: Передача висоти через step containers
     Без цього висота не дійде до .mobile-step-wrapper
     EXCEPTION: step-3 needs auto height to prevent content overflow
     ============================================ */
  body.constructor-page .step-pages {
    height: 100% !important; /* Замість min-height */
  }

  body.constructor-page .step-page {
    height: 100% !important; /* Додаємо height */
  }

  /* Exceptions: step-1 and step-3 need auto height for proper content flow */
  body.constructor-page #step-1,
  body.constructor-page #step-3 {
    height: auto !important;
    min-height: 0 !important;
  }

  .panel.form .panel-foot {
    flex-shrink: 0;
  }

  /* Приховати desktop footer на мобільних */
  body[data-current-step="1"] .panel.form .panel-foot,
  body[data-current-step="2"] .panel.form .panel-foot,
  body[data-current-step="3"] .panel.form .panel-foot,
  body[data-current-step="4"] .panel.form .panel-foot {
    display: none !important;
  }

  /* ============================================
     SCROLL CONTAINER - .mobile-step-content
     Це СПРАВЖНІЙ scroll контейнер на мобільних
     ============================================ */
  .mobile-step-content {
    /* overflow-y: auto вже є в mobile.css */
    /* Запобігти браузеру скролити контент під фіксовані панелі */
    scroll-padding-top: 80px !important; /* Більше ніж висота top панелі (68px) */
    scroll-padding-bottom: 100px !important; /* Більше ніж висота bottom панелі (80px) */
  }
}

/* ============================================
   АДАПТАЦІЯ ДЛЯ МАЛЕНЬКИХ ЕКРАНІВ
   ============================================ */
@media (max-width: 640px) {
  :root {
    --mobile-head-h: 82px;   /* Висота header: padding(18+16) + button(44) = 78px + 2px buffer */
    --mobile-foot-h: 76px;   /* Реальна висота footer (тільки nav кнопки) */
  }

  .mobile-step-title {
    font-size: 18px;
  }

  .mobile-step-counter {
    font-size: 12px;
  }

  .btn-mobile-nav {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 15px;
  }

  .mobile-logo {
    width: 48px;
    height: 48px;
  }
}

/* ============================================
   DESKTOP - Приховати мобільні панелі
   ============================================ */
@media (min-width: 1024px) {
  .mobile-step-head,
  .mobile-step-foot {
    display: none !important;
  }
}

/* ============================================
   MOBILE-ONLY LAYOUT
   Простий контейнер для mobile, замінює складну desktop структуру
   ============================================ */

/* Mobile-only елементи приховані за замовчуванням */
.mobile-only {
  display: none;
}

/* Desktop-only елементи НЕ змінюють свій display за замовчуванням
   (щоб не перезаписати flex, grid, і т.д. з інших CSS файлів) */

@media (max-width: 1023px) {
  /* На mobile показуємо тільки mobile-layout */
  body.constructor-page[data-current-step="1"] .desktop-only,
  body.constructor-page[data-current-step="2"] .desktop-only,
  body.constructor-page[data-current-step="3"] .desktop-only,
  body.constructor-page[data-current-step="4"] .desktop-only {
    display: none !important;
  }

  body.constructor-page[data-current-step="1"] .mobile-only,
  body.constructor-page[data-current-step="2"] .mobile-only,
  body.constructor-page[data-current-step="3"] .mobile-only,
  body.constructor-page[data-current-step="4"] .mobile-only {
    display: block !important;
  }

  /* Body padding - NOT NEEDED with position fixed layout */
  body.constructor-page[data-current-step="1"],
  body.constructor-page[data-current-step="2"],
  body.constructor-page[data-current-step="3"],
  body.constructor-page[data-current-step="4"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Mobile layout структура - FIXED POSITION (як gift-market) */
  .mobile-layout {
    /* FIX: Use position fixed instead of calc(100vh) to prevent keyboard-induced shifts */
    position: fixed;
    top: var(--header-height, var(--mobile-head-h));
    left: 0;
    right: 0;
    overflow: hidden;
    background: transparent;
    z-index: 1000;
  }

  /* Steps 1-3: без footer */
  body[data-current-step="1"] .mobile-layout,
  body[data-current-step="2"] .mobile-layout,
  body[data-current-step="3"] .mobile-layout {
    bottom: 0;
  }

  /* Step-4: з footer */
  body[data-current-step="4"] .mobile-layout {
    bottom: var(--footer-height, var(--mobile-foot-h));
  }

  .mobile-scroll-area {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    background: transparent;
    /* FIX #3: Disable Chrome scroll anchoring (prevents auto-scroll on DOM changes) */
    overflow-anchor: none;
  }

  /* Scroll padding для auto-scroll при focus input */
  .mobile-scroll-area {
    scroll-padding-top: calc(var(--header-height, var(--mobile-head-h)) + 60px) !important;
  }

  /* Steps 1-3: без footer scroll padding */
  body[data-current-step="1"] .mobile-scroll-area,
  body[data-current-step="2"] .mobile-scroll-area,
  body[data-current-step="3"] .mobile-scroll-area {
    scroll-padding-bottom: 80px !important;
  }

  /* Step-4: з footer scroll padding */
  body[data-current-step="4"] .mobile-scroll-area {
    scroll-padding-bottom: calc(var(--footer-height, var(--mobile-foot-h)) + 80px) !important;
  }

  /* ============================================
     MOBILE GIFT CATALOG HOST - Scrollable catalog on step-2
     ============================================ */
  #mobileGiftCatalogHost {
    position: fixed;
    top: var(--header-height, var(--mobile-head-h));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1140;
    background: var(--bg-base, #fff);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
    padding: 0;
    /* Safe area padding handled in step-2/mobile.css */
  }

  #mobileGiftCatalogHost.hidden {
    display: none !important;
  }

  /* ============================================
     MOBILE PREVIEW PANEL - Preview iframe на рівні body
     Display controlled via [hidden] attribute by JavaScript
     Розташовується між header та footer панелями
     ============================================ */
  #mobilePreviewPanel {
    position: fixed !important;
    /* Between header and footer */
    top: calc(var(--header-height, var(--mobile-head-h)) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1090 !important;
    background: var(--bg-base, #fff) !important;
    /* Override ALL .panel styles - remove any spacing */
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Steps 1-3: preview до низу екрану (без footer) */
  body[data-current-step="1"] #mobilePreviewPanel,
  body[data-current-step="2"] #mobilePreviewPanel,
  body[data-current-step="3"] #mobilePreviewPanel {
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Step-4: preview з місцем для footer */
  body[data-current-step="4"] #mobilePreviewPanel {
    bottom: calc(var(--footer-height, var(--mobile-foot-h)) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* FULLSCREEN PREVIEW - Коли панелі приховані */
  body[data-current-step="1"] .mobile-step-head[hidden] ~ * #mobilePreviewPanel:not([hidden]),
  body[data-current-step="2"] .mobile-step-head[hidden] ~ * #mobilePreviewPanel:not([hidden]),
  body[data-current-step="3"] .mobile-step-head[hidden] ~ * #mobilePreviewPanel:not([hidden]),
  body[data-current-step="4"] .mobile-step-head[hidden] ~ * #mobilePreviewPanel:not([hidden]),
  body[data-current-step="1"]:has(.mobile-step-head[hidden]) #mobilePreviewPanel:not([hidden]),
  body[data-current-step="2"]:has(.mobile-step-head[hidden]) #mobilePreviewPanel:not([hidden]),
  body[data-current-step="3"]:has(.mobile-step-head[hidden]) #mobilePreviewPanel:not([hidden]),
  body[data-current-step="4"]:has(.mobile-step-head[hidden]) #mobilePreviewPanel:not([hidden]) {
    /* FULLSCREEN - від краю до краю екрана */
    top: env(safe-area-inset-top, 0px) !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Control visibility via [hidden] attribute */
  #mobilePreviewPanel[hidden] {
    display: none !important;
  }

  #mobilePreviewPanel:not([hidden]) {
    display: block !important;
  }

  #mobilePreviewPanel::before {
    /* Remove .panel::before overlay */
    display: none !important;
  }

  #mobilePreviewPanel .panel-body {
    width: 100%;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    /* Override min/max-height обмеження з panels.css */
    min-height: 0 !important;  /* Critical for flexbox scroll behavior */
    max-height: none !important;
    /* Disable scrolling on panel-body - iframe handles it internally */
    overflow: hidden !important;
    /* Flexbox для правильної роботи scroll в iframe */
    display: flex !important;
    flex-direction: column !important;
  }

  #mobilePreviewPanel iframe {
    width: 100%;
    flex: 1 !important;  /* Flex child для заповнення простору */
    min-height: 0 !important;  /* Critical for flexbox scroll */
    border: none;
    border-radius: 0;
    box-shadow: none !important;
    display: block;
    /* Smooth transition for loading state */
    transition: opacity 0.15s ease-out;
  }

  /* ============================================
     LOADING STATE - Hide iframe during src switch
     Prevents visual glitch when switching between
     preview-greeting.html and preview-gift.html
     ============================================ */
  #mobilePreviewPanel iframe.is-loading {
    opacity: 0 !important;
    pointer-events: none;
  }

  /* Panel background ensures smooth transition (no white flash) */
  #mobilePreviewPanel .panel-body {
    background: var(--bg-base, #f4f3ff) !important;
    position: relative; /* For preloader positioning */
  }

  /* ============================================
     PRELOADER OVERLAY - Shown during step transitions
     Guarantees clean transition regardless of iframe state
     ============================================ */
  .preview-preloader {
    position: absolute;
    inset: 0;
    background: var(--bg-base, #f4f3ff);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
  }

  .preview-preloader.is-active {
    opacity: 1;
    visibility: visible;
  }

  .preview-preloader__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: preloader-spin 0.8s linear infinite;
  }

  @keyframes preloader-spin {
    to { transform: rotate(360deg); }
  }

  /* ============================================
     STEP-3 SPECIFIC: Preview styling
     Step-3 (gift card) preview - no scrolling allowed
     Note: Main fix is in preview-gift.html inline CSS
     ============================================ */
  body[data-current-step="3"] #mobilePreviewPanel .panel-body {
    overflow: hidden !important;
  }

  body[data-current-step="3"] #mobilePreviewPanel iframe {
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  /* ============================================
     STEP-4 SPECIFIC: Preview styling
     Step-4 (wrap) preview shows full flow in iframe
     ============================================ */
  body[data-current-step="4"] #mobilePreviewPanel .panel-body {
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-current-step="4"] #mobilePreviewPanel iframe {
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
  }


  /* ============================================
     FLOATING EDIT BUTTON - Показується тільки в Preview режимі
     Плаває поверх превью, дозволяє повернутись до редагування
     ============================================ */
  .btn-floating-edit {
    display: none !important; /* Прихована за замовчуванням скрізь */
  }

  /* Показувати тільки коли НЕ має [hidden] атрибут */
  .btn-floating-edit:not([hidden]) {
    display: flex !important;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 20px);
    right: 12px; /* Така сама відстань як padding справа в header */
    z-index: 2000; /* Вище за всі панелі */

    /* Кнопка */
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px; /* Зменшений padding компенсує border (12-2=10, 20-2=18) */

    /* Білий background з чорним бордером (як Gift options) */
    background: #ffffff;
    border: 2px solid #1f2238; /* Чорний бордер */
    border-radius: 24px;

    /* Тінь (як Gift options) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Текст */
    font-family: 'Gilroy', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1f2238; /* Чорний текст */

    /* Анімація */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    will-change: transform, box-shadow;

    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;

    /* Анімація появи */
    animation: fadeInScale 0.2s ease-out;
  }

  .btn-floating-edit:not([hidden]) svg {
    flex-shrink: 0;
    color: #1f2238;
  }

  .btn-floating-edit:not([hidden]):active {
    transform: scale(0.95);
    background: #f5f5f5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); /* Lighter shadow on press */
  }

  /* Анімація появи/зникнення */
  @keyframes fadeInScale {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}