/* ============================================================
   DEBREATHER — Fluid Responsive Adaptation
   
   Принцип: ничего не скрывается (кроме nav-links → toggle),
   всё сжимается / переносится / стекается.
   Подключается ПОСЛЕ main.css
   ============================================================ */

/* ── Запрет авто-масштабирования шрифта при повороте на мобилах ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Глобальные fluid-ограничения ── */
img, video, canvas, svg { max-width: 100%; height: auto; }
body { overflow-x: hidden; }

/* ═══ FIX: разрешаем waveform-канвам расширяться при зуме ═══ */
#waveformCanvas,
#previewCanvas {
    max-width: none;
    height: auto;
}

/* Плавный тач-скролл для обёрток waveform (iOS) */
.waveform-scroll-wrap,
.preview-wave-wrap {
    -webkit-overflow-scrolling: touch;
}

/* Allow pinch-to-zoom gesture on waveform on touch devices.
   pan-x  → horizontal scroll still works with one finger
   pinch-zoom is intercepted by our JS handler (passive:false) */
.waveform-scroll-wrap {
  touch-action: pan-x;
}

/* ════════════════════════════════════════════════════════════
   HAMBURGER BUTTON (создаётся через JS, скрыта на десктопе)
   ════════════════════════════════════════════════════════════ */
.nav-burger {
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.nav-burger:hover { background: #f9fafb; }
.nav-burger span {
  display: block; width: 18px; height: 2px;
  background: #374151; border-radius: 1px;
  position: relative; transition: .2s;
}
.nav-burger span::before,
.nav-burger span::after {
  content: ''; position: absolute; left: 0;
  width: 100%; height: 2px; background: #374151;
  border-radius: 1px; transition: .2s;
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after  { top:  6px; }
.nav-burger.open span { background: transparent; }
.nav-burger.open span::before { top: 0; transform: rotate(45deg); }
.nav-burger.open span::after  { top: 0; transform: rotate(-45deg); }

/* ════════════════════════════════════════════════════════════
   ≤ 1060px — Compact desktop / landscape tablet
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1060px) {
  .nav-links { gap: 0; }
  .nav-links a { font-size: 13px; padding: 8px 10px; }
  .nav-cta { font-size: 13px; padding: 7px 14px; }

  /* Modules: stack vertically */
  .modules.visible {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════
   ≤ 768px — Tablet / large phone (NAV breakpoint)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV: OVERRIDE main.css display:none ── */
  .nav-burger { display: flex !important; }

  .nav-links {
    /* Override main.css display:none — показываем как dropdown */
    display: none !important;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    padding: 12px 24px 16px;
    gap: 2px;
    border-bottom: 1px solid #e5e7eb;
    z-index: 999;
  }
  .nav-links.open { display: flex !important; }
  .nav-links a {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid #f3f4f6;
  }

  /* nav-cta: show it (override main.css hiding) */
  .nav-cta { display: inline-flex !important; font-size: 12px; padding: 6px 12px; }

  /* NAV inner: reduce padding */
  .nav-inner { padding: 0 16px; }

  /* ── HERO ── */
  .hero { padding: 80px 16px 24px; }
  .hero-sub { font-size: 15px; padding: 0 8px; }
  .hero h1 br { display: none; } /* Remove forced line break on narrow */

  /* ── UPLOAD ── */
  .upload-zone { padding: 0; }
  .upload-body { padding: 24px 16px; }
  .upload-title { font-size: 16px; }
  .upload-btn { font-size: 14px; padding: 11px 24px; }

  /* ── EDITOR ── */
  .editor-wrap { padding: 0 12px 24px; }

  /* ── WAVE CARD HEAD ── */
  /* Keep title + zoom controls on ONE row, never wrap */
  .wave-card-head { flex-wrap: nowrap; gap: 6px; padding: 10px 12px; }
  .wave-card-title { font-size: 13px; white-space: nowrap; flex-shrink: 0; }

  /* Zoom controls: single row, no wrap */
  .zoom-controls { flex-wrap: nowrap; gap: 5px; align-items: center; }
  .zoom-label { display: none; }

  /* Fix: DO NOT use min-height on range input — it bloats the native iOS slider */
  /* Instead wrap it in a tall touch zone via padding on the thumb only          */
  #zoomSlider {
    width: 90px !important;
    min-height: unset !important;
    height: 4px !important;
    /* Enlarge touch area via transparent padding trick (no visual change) */
    padding: 14px 0;
    box-sizing: content-box;
    background-clip: content-box;
  }

  /* ── TRANSPORT: 2-row layout on mobile ── */
  /* Row 1: Play · Stop · Timer                                       */
  /* Row 2: IN · trimStart · trimEnd · OUT · Reset                    */
  /* Trick: ::after pseudo-element acts as a zero-height flex row-break*/
  .transport {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 12px 12px 16px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Row 1 elements */
  #btnPlay      { order: 1; }
  #btnStop      { order: 2; }
  .time-display { order: 3; width: auto; text-align: center; margin: 0; }

  /* Invisible full-width divider — forces row 2 to start */
  .transport::after {
    content: '';
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    order: 4;
  }

  /* Row 2 elements */
  #btnSetStart  { order: 5; }
  #trimStart    { order: 6; width: 60px !important; font-size: 11px !important; }
  #trimEnd      { order: 7; width: 60px !important; font-size: 11px !important; }
  #btnSetEnd    { order: 8; }
  #btnResetTrim { order: 9; }

  /* ── PREVIEW HEADER: 2-row layout on mobile ──
     Row 1: [APPLY CHANGES]  [▶ PREVIEW]  [0:00.00]
     Row 2:                  [0:00.00 total]              */
  .preview-hdr {
    flex-wrap: wrap !important;
    gap: 6px 8px;
    justify-content: center;
    align-items: center;
    position: static !important;
    padding: 10px 12px;
  }
  /* Un-absolute the centred PREVIEW+time div → inline in row 1 */
  .preview-hdr > div[style*="position:absolute"] {
    position: static !important;
    left: auto !important;
    transform: none !important;
    display: inline-flex !important;
    width: auto !important;
    justify-content: center;
  }
  /* Row 1: l-block (Apply) and centre block side-by-side, auto width */
  .preview-hdr-l {
    width: auto !important;
    justify-content: center;
    text-align: center;
  }
  /* preview-title sits inside hdr-l — keep it hidden on mobile (no space) */
  .preview-title { display: none; }
  /* Row 2: duration gets full width → pushed to new line, centred */
  .preview-hdr-r {
    flex: 0 0 100% !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* ── FEATURES subtitle nowrap override ── */
  .sec-hdr p[style*="white-space:nowrap"],
  p[style*="white-space:nowrap"] {
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* ── FOOTER ── */
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* ════════ ALL MODALS: fullscreen ════════ */
  .tr-modal, .hp-modal, .pv-modal, .rf-modal,
  .ct-modal, .pr-modal {
    max-width: 100% !important;
    height: auto !important;
    max-height: 92vh !important;
    max-height: 92dvh !important; /* iOS Safari: dvh = реальная видимая высота */
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    touch-action: auto;
    overscroll-behavior: contain;
  }

  /* pv/rf: задаём определённую высоту, чтобы flex-цепочка правильно
     ограничивала .pv-content/.rf-content — это включает скролл.
     height:auto + max-height вычисляет layout по естественной высоте
     (все секции видимы = ~1500px), flex-children получают полную
     высоту контента, overflow-y:auto не срабатывает. */
  .pv-modal, .rf-modal {
    height: 92vh !important;
    height: 92dvh !important;
  }

  /* AUTH modal: bottom sheet on mobile (not fullscreen) */
  .auth-modal {
    overscroll-behavior: contain;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;           /* grows with content */
    max-height: 92vh !important;       /* never taller than viewport */
    max-height: 92dvh !important;      /* iOS Safari: dvh = реальная видимая высота */
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    touch-action: auto;
    animation: slideUpAuth .3s ease !important;
  }
  @keyframes slideUpAuth {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* Modal overlays: no padding */
  .tr-overlay, .hp-overlay, .pv-overlay, .rf-overlay,
  .ct-overlay, .pr-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    overscroll-behavior: contain;
    touch-action: none;
  }

  /* AUTH overlay: bottom-aligned for bottom-sheet modal */
  .auth-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    overscroll-behavior: contain;
    touch-action: none;
  }

  /* ════════ MODAL SIDEBARS → horizontal scroll strip ════════ */
  /* Override main.css display:none at 580-600px */
  .tr-cats, .hp-cats, .pv-toc, .rf-toc {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 8px 12px !important;
    gap: 4px !important;
    flex-shrink: 0;
  }

  .tr-cat, .hp-cat, .pv-toc-btn, .rf-toc-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 7px 14px !important;
    border-left: none !important;
    border-radius: 8px !important;
  }
  .tr-cat.active, .hp-cat.active,
  .pv-toc-btn.active, .rf-toc-btn.active {
    border-left: none !important;
    border-radius: 8px !important;
  }

  /* Hide scrollbar on sidebar strips */
  .tr-cats::-webkit-scrollbar,
  .hp-cats::-webkit-scrollbar,
  .pv-toc::-webkit-scrollbar,
  .rf-toc::-webkit-scrollbar { height: 0; display: none; }

  /* MODAL BODY: sidebar + content → stack vertically */
  .tr-body, .hp-body, .pv-body, .rf-body {
    flex-direction: column !important;
  }

  /* MODAL CONTENT: fill width */
  .tr-content, .hp-content, .pv-content, .rf-content {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  /* TUTORIAL: two-column rows → stack */
  .tr-row {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* MODAL HERO: reduce padding */
  .tr-hero, .hp-hero, .pv-hero, .rf-hero {
    padding: 20px 16px 16px !important;
    flex-wrap: wrap;
  }
  .tr-hero h2, .hp-hero h2, .pv-hero h2, .rf-hero h2 {
    font-size: 20px !important;
  }

  /* MODAL SEARCH: full width */
  .tr-search-wrap, .hp-search-wrap,
  .pv-search-wrap, .rf-search-wrap {
    width: 100% !important;
    margin-right: 0 !important;
    margin-top: 10px;
  }

  /* PRICING: stack cards */
  .pr-cards {
    grid-template-columns: 1fr !important;
  }
  .pr-head { padding: 20px 20px 16px; }
  .pr-head h2 { font-size: 22px; }
  .pr-body { padding: 12px 16px 16px; }

  /* CONTACT modal */
  .ct-head { padding: 20px 20px 16px; }
  .ct-head h3 { font-size: 20px; }
  .ct-panel { padding: 16px 20px 24px; }
  .ct-topics { gap: 6px; }
  .ct-topic { font-size: 11px; padding: 6px 12px; }

  /* AUTH modal */
  .auth-panel.active {
    padding: 52px 20px 28px; /* 52px top = clears absolute-positioned close button */
  }

  /* HP-CTA in modals */
  .hp-cta {
    flex-direction: column !important;
    gap: 10px;
    text-align: center;
    padding: 16px !important;
  }
    /* ═══ MOBILE: Show all modal sections at once (no sidebar nav) ═══ */

  /* Hide sidebar/category navigation — all sections displayed inline */
  .tr-cats, .hp-cats, .pv-toc, .rf-toc {
    display: none !important;
  }

  /* Fix: scrollbar above sticky section title headers in modals on mobile */
  .hp-section-title,
  .pv-section-title,
  .rf-section-title,
  .tr-ch-head {
    position: static !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Show ALL sections simultaneously (override display:none on non-active) */
  .tr-ch,
  .hp-section,
  .pv-section,
  .rf-section {
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
    overflow: visible !important;
    min-height: auto !important;
  }

  /* Disable individual section scrolling — whole content area scrolls */
  .tr-ch-body,
  .hp-items-scroll,
  .pv-text,
  .rf-text {
    overflow: visible !important;
    flex: none !important;
  }

  /* Content wrapper scrolls through all sections */
  .tr-content, .hp-content, .pv-content, .rf-content {
    overflow-y: auto !important;
  }

  /* Visual separator between sections */
  .tr-ch + .tr-ch,
  .hp-section + .hp-section,
  .pv-section + .pv-section,
  .rf-section + .rf-section {
    border-top: 2px solid #e5e7eb;
  }
  /* ═══ Prevent body scroll behind open modals on mobile ═══ */
  /* NOTE: applied directly via JS lockScroll()/unlockScroll() — position:fixed + top:-scrollY */
  body.modal-scroll-lock {
    position: fixed !important;
    overflow-y: scroll !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════════════
   ≤ 480px — Small phones
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* NAV */
  .nav-logo-icon svg { width: 36px; height: 30px; }
  .nav-logo-icon { width: 36px; height: 30px; }
  .nav-logo-text { font-size: 17px; }
  .nav-login { font-size: 12px; padding: 5px 8px; }
  .nav-login svg { width: 13px; height: 13px; }
  .nav-cta { font-size: 11px !important; padding: 5px 8px !important; }
  .nav-cta-badge { font-size: 10px; padding: 2px 8px; }

  /* HERO */
  .hero h1 { font-size: clamp(24px, 7vw, 36px); }
  .hero-sub { font-size: 14px; }
  .hero-badge { font-size: 11px; padding: 5px 10px; }

  /* UPLOAD */
  .upload-title { font-size: 14px; }
  .upload-hint { font-size: 12px; }
  .upload-formats { font-size: 12px; }

  /* WAVE CARD */
  .wave-card-title { font-size: 13px; }
  #zoomSlider { width: 80px !important; min-height: unset !important; }
  .zoom-val { font-size: 11px; min-width: 36px; }

  /* TRANSPORT */
  .btn-sm { font-size: 10px; padding: 6px 10px; }
  #trimStart, #trimEnd {
    width: 48px !important;
    font-size: 10px !important;
  }
  #btnSetStart, #btnSetEnd { min-width: 48px; font-size: 10px; }

  /* MODULES */
  .module-hdr { padding: 12px 12px; }
  .module-hdr-title { font-size: 13px; }
  .module-body { padding: 12px; }
  .ctrl-label { font-size: 12px; width: 80px; }
  .ctrl-val { font-size: 11px; min-width: 48px; }

  /* BREATH TOOLBAR */
  .breath-toolbar { gap: 6px; }
  .toolbar-top-row { gap: 6px; }
  .toolbar-bottom-row { gap: 6px; }
  .btn-analyze, .btn-analyze.sil {
    font-size: 13px;
    padding: 12px 20px;
    width: 100%;
    justify-content: center;
  }
  .btn-add-segm, .btn-add-segm.sil {
    font-size: 12px;
    padding: 9px 14px;
  }

  /* PREVIEW */
  .btn-pv-apply { font-size: 10px; padding: 5px 10px; height: 26px; }
  .btn-preview-play { font-size: 10px; padding: 5px 12px; }
  #btnPreviewPlay { height: 26px; }
  #btnPreviewStop { min-width: unset; width: 26px; height: 26px; padding: 0; }
  .preview-time { font-size: 11px; margin-left: 8px; }
  .preview-dur { font-size: 11px; }
  .preview-dur-label { font-size: 11px; }

  /* EXPORT */
  #moduleExport .module-body > div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .btn-export {
    width: 100% !important;
    justify-content: center;
  }

  /* FEATURES */
  .features { padding: 48px 16px; }
  .sec-hdr { margin-bottom: 32px; }
  .sec-hdr h2 { font-size: clamp(22px, 5vw, 30px); }
  .sec-hdr p { font-size: 14px; }
  .feat-card { padding: 18px; }
  .feat-card h3 { font-size: 15px; }
  .feat-card p { font-size: 12px; }

  /* HOW IT WORKS */
  .how { padding: 48px 16px; }
  .how-step { padding: 24px 18px; }
  .how-step h3 { font-size: 17px; }

  /* FAQ */
  .faq { padding: 48px 16px; }
  .faq-btn { padding: 16px 18px; }
  .faq-btn-text { font-size: 14px; }
  .faq-answer { padding: 0 18px 16px; font-size: 13px; }

  /* CTA BANNER */
  .cta-banner { margin: 48px auto 0; padding: 32px 20px; }
  .cta-banner h2 { font-size: clamp(20px, 5vw, 28px); }
  .cta-banner p { font-size: 14px; margin-bottom: 20px; }

  /* FOOTER */
  footer { padding: 32px 16px 20px; }

  /* ── MODALS: smaller text ── */
  .tr-hero h2, .hp-hero h2, .pv-hero h2, .rf-hero h2 {
    font-size: 18px !important;
  }
  .tr-ch-head h3 { font-size: 16px; }
  .tr-p { font-size: 12px; }
  .tr-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .tr-card h4 { font-size: 12px; }
  .tr-card p { font-size: 11px; }
  .tr-param { grid-template-columns: 90px 1fr; }
  .tr-param-name { font-size: 11px; }
  .tr-param-desc { font-size: 11px; }
  .tr-tip p { font-size: 11px; }

  .hp-q-text { font-size: 13px; }
  .hp-a { font-size: 12px; }
  .hp-section-title { font-size: 10px; }

  .pv-section-title, .rf-section-title { font-size: 10px; }
  .pv-text p, .rf-text p { font-size: 12px; }
  .pv-text { padding: 16px; }
  .rf-text { padding: 16px; }

  .pr-head h2 { font-size: 20px !important; }
  .pr-price-num { font-size: 30px; }
  .pr-feat { font-size: 12px; }
  .pr-card { padding: 16px; }

  .ct-head h3 { font-size: 18px !important; }

  /* Tutorial video player controls */
  .tr-ch-body div[style*="padding:7px 10px"] {
    flex-wrap: wrap;
    gap: 4px;
  }
  .tr-ch-body span[style*="min-width:60px"] {
    min-width: 48px !important;
    font-size: 10px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   LANDSCAPE phones — prevent too-short viewport
   ════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 70px 16px 16px; }
}

/* ════════════════════════════════════════════════════════════
   LANDSCAPE phones — Privacy Policy & Refund Policy modals
   В ландшафте ширина > 768px → мобильные стили (≤768px) не
   применяются. hp-modal работает корректно с десктопными
   стилями из main.css. Для pv/rf нужно только:
   1) зафиксировать высоту → активирует flex-цепочку скролла
   2) повторить flex-структуру body/content как у hp-modal
   Позиционирование оверлея и border-radius НЕ переопределяем —
   пусть наследуют те же десктопные стили что и hp-modal.
   ════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 600px) and (hover: none) and (pointer: coarse) {

  /* Фиксированная высота — без неё flex-дети получают полную
     высоту контента (~1500px) и overflow-y:auto не срабатывает */
  .pv-modal, .rf-modal {
    height: 92vh !important;
    height: 92dvh !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Hero: не скроллится, прижат к верху */
  .pv-hero, .rf-hero {
    flex-shrink: 0 !important;
    flex-wrap: wrap;
  }

  /* Body: занимает оставшееся место, скрывает overflow */
  .pv-body, .rf-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }

  /* TOC sidebar: скрываем — все секции видны сразу (как у hp) */
  .pv-toc, .rf-toc {
    display: none !important;
  }

  /* Content: заполняет body, вертикальный скролл по всем секциям */
  .pv-content, .rf-content {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Sticky-заголовки секций: убираем — контейнер скроллится целиком */
  .pv-section-title, .rf-section-title {
    position: static !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Все секции: показываем одновременно */
  .pv-section, .rf-section {
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
    overflow: visible !important;
    min-height: auto !important;
  }

  /* Текст секций: не скроллится сам по себе */
  .pv-text, .rf-text {
    overflow: visible !important;
    flex: none !important;
  }

  /* Визуальный разделитель между секциями */
  .pv-section + .pv-section,
  .rf-section + .rf-section {
    border-top: 2px solid #e5e7eb;
  }
}

/* ════════════════════════════════════════════════════════════
   TOUCH-FRIENDLY: 44px min tap targets
   ════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Explicit size so ::after circle is calculated correctly    */
  /* 48×28px toggle — circle 22×22px with 3px inset           */
  .tog {
    width: 48px  !important;
    height: 28px !important;
    min-width: unset;
    min-height: unset;
  }
  .tog::after {
    top:    3px !important;
    left:   3px !important;
    width:  22px !important;
    height: 22px !important;
  }
  /* ON state: left = width - circle - inset = 48 - 22 - 3 = 23px */
  .tog.on-cyan::after,
  .tog.on-red::after  { left: 23px !important; }

  .faq-btn { min-height: 48px; }
  .hp-q { min-height: 48px; }
}
/* ── Waveform canvas: disable selection/callout on long-press (mobile) ──
   Prevents the blue selection highlight that appears during long-press
   used for manual segment creation. Scoped to waveform only.           */
#waveScrollWrap,
#waveformCanvas {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS: no "Copy / Look Up" popup */
}



/* ── Custom waveform scrollbar (mobile only) ──
   iOS Safari ignores ::-webkit-scrollbar, so we inject a real div.
   Only shown on touch devices; hidden on desktop via JS check.      */
@media (max-width: 768px) {
  /* Hide the native scrollbar on mobile — our custom one replaces it */
  .waveform-scroll-wrap {
    scrollbar-width: none !important; /* Firefox */
  }
  .waveform-scroll-wrap::-webkit-scrollbar {
    display: none !important;         /* Chrome/Safari desktop fallback */
  }

  /* Custom scrollbar container injected by JS below the waveform */
  #waveCustomScrollbar {
    display: block;
    height: 24px;
    background: #e2e8f0;
    border-radius: 12px;
    margin: 6px 0 2px;
    position: relative;
    cursor: pointer;
    touch-action: none;
  }
  #waveCustomScrollThumb {
    position: absolute;
    top: 4px;
    height: 16px;
    min-width: 40px;
    background: #94a3b8;
    border-radius: 8px;
    transition: background 0.15s;
    touch-action: none;
  }
  #waveCustomScrollThumb:active {
    background: #64748b;
  }
}
/* ── Also show custom scrollbar on landscape phones ──
   When the phone rotates to landscape, viewport width exceeds 768px so the
   @media (max-width: 768px) block above no longer matches. We detect phones
   in landscape by combining orientation, a short viewport height (phones in
   landscape are typically ≤ 600px tall) and a touch pointer — then apply the
   same scrollbar styles again so it remains visible.                          */
@media (orientation: landscape) and (max-height: 600px) and (hover: none) and (pointer: coarse) {
  /* Hide the native scrollbar — our custom one takes over */
  .waveform-scroll-wrap {
    scrollbar-width: none !important;
  }
  .waveform-scroll-wrap::-webkit-scrollbar {
    display: none !important;
  }

  /* Re-show the custom scrollbar (overrides the min-width: 769px rule) */
  #waveCustomScrollbar {
    display: block;
    height: 24px;
    background: #e2e8f0;
    border-radius: 12px;
    margin: 6px 0 2px;
    position: relative;
    cursor: pointer;
    touch-action: none;
  }
  #waveCustomScrollThumb {
    position: absolute;
    top: 4px;
    height: 16px;
    min-width: 40px;
    background: #94a3b8;
    border-radius: 8px;
    transition: background 0.15s;
    touch-action: none;
  }
  #waveCustomScrollThumb:active {
    background: #64748b;
  }
}

/* On real desktop/mouse devices the custom scrollbar must stay hidden.
   Using (hover: hover) and (pointer: fine) instead of min-width so that
   landscape phones (which are wide but still touch devices) are excluded. */
@media (hover: hover) and (pointer: fine) {
  #waveCustomScrollbar { display: none !important; }
}

/* ── Account modal: bottom sheet on mobile ── */
@media (max-width: 600px) {
  .ac-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .ac-modal {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    max-height: 92vh;
    max-height: 92dvh; /* iOS Safari: dvh = реальная видимая высота */
    overflow-y: auto;
    animation: slideUp .3s ease !important;
  }
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .ac-body { padding: 20px 20px 24px; }
  .ac-head { padding: 22px 20px 18px; }
}

/* ── Limit modal: bottom sheet on mobile ── */
@media (max-width: 600px) {
  .lx-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .lx-modal {
    border-radius: 22px 22px 0 0 !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    max-height: 90dvh !important; /* iOS Safari: dvh = реальная видимая высота */
    animation: lxSlideUp .32s cubic-bezier(.34,1.1,.64,1) !important;
  }
  @keyframes lxSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .lx-head { padding: 24px 20px 18px; }
  .lx-title { font-size: 18px; }
  .lx-body { padding: 16px 16px 20px; }
  .lx-info-strip { padding: 12px 16px; }
  /* Stack plan cards vertically on very small screens */
  .lx-plans { grid-template-columns: 1fr; gap: 14px; }
  /* Featured card on top when stacked */
  .lx-plan-featured { order: -1; }
  .lx-plan-note { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: auto; }
  .lx-save-badge { font-size: 9px; padding: 2px 7px; }
}

/* ══════════════════════════════════════════════════════════════
   FILE LOADING MODAL — RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .fl-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .fl-modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 28px 20px 36px !important;
    animation: slideUpAuth .3s ease !important;
  }
}

@media (max-width: 480px) {
  .fl-modal {
    padding: 24px 16px 32px !important;
    gap: 14px !important;
  }
  .fl-title { font-size: 14px !important; }
  .fl-stage { font-size: 12px !important; }
}