/* =============================================================
   editor-responsive.css — Responsives Editor-Layout (Phase 2)
   Desktop (≥1100px): unverändert (siehe editor.css).
   Tablet (≤1100px): Routelib + Eigenschaften als Overlay-Drawer von
     rechts, Feld bekommt den Platz. Toolbar bleibt als linke Leiste.
   Handy (≤700px): Feld-zentriert, Toolbar als scrollbare Bottom-Bar,
     Panels als Bottom-Sheets. „Reduziertes" Editieren, aber voll bedienbar.
   ============================================================= */

/* Drawer-Toggle-Buttons im Header — nur unterhalb Desktop sichtbar. */
.editor-drawer-toggle { display: none !important; }

/* Backdrop hinter offenen Drawern (liegt im #app-main, das position:relative ist). */
#editor-drawer-backdrop {
  display: none; position: absolute; inset: 0; z-index: 40;
  background: rgba(0,0,0,.42);
}
body.editor-drawer-open #editor-drawer-backdrop { display: block; }

/* ── Tablet & kleiner ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .editor-drawer-toggle { display: inline-flex !important; }
  /* aktive (offene) Drawer-Toggle hervorheben */
  .editor-drawer-toggle.active { color: var(--brand); background: var(--brand-glow); }

  /* Routelib + Eigenschaften → Overlay-Drawer von rechts */
  #routelib-strip, #props-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 320px; max-width: 86vw;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    z-index: 50;
    box-shadow: -6px 0 22px rgba(0,0,0,.30);
  }
  #routelib-strip.drawer-open, #props-panel.drawer-open { transform: translateX(0); }

  /* Im Drawer-Modus immer die volle Drawer-Breite zeigen (Collapse-Zustand
     des Desktops ignorieren). */
  #routelib-strip.collapsed { width: 320px; }
  #routelib-strip.collapsed .rl-pane,
  #routelib-strip.collapsed .rl-toggle-label { display: flex; }
  /* Der Desktop-„Einklappen"-Toggle der Bänder ist im Drawer-Modus überflüssig. */
  #routelib-toggle { display: none; }

  /* Feld nutzt den ganzen verbleibenden Platz neben der Toolbar. */
  #field-container { flex: 1; }
}

/* ── Handy (Hochkant ≤700px ODER kurzes Querformat-Handy) ─────────
   Querformat-Handy ist breit (~844px) aber niedrig (~390px) + coarse-Zeiger →
   bekommt so das Handy-Layout statt der iPad-/Desktop-Ansicht. Die zusätzliche
   (pointer:coarse)-Bedingung schützt schmale Desktop-Fenster. */
@media (max-width: 700px), (max-height: 540px) and (pointer: coarse) {
  #app-main { flex-direction: column; }

  /* Feld oben, füllt den Schirm. */
  #field-container { order: 1; flex: 1 1 auto; min-height: 0; padding: 8px 8px 10px; }

  /* Toolbar → horizontale, scrollbare Bottom-Bar. */
  #toolbar {
    order: 3; width: 100% !important; height: auto; max-height: 30vh;
    flex-direction: row; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    border-right: none; border-top: 1px solid var(--border);
    padding: 5px 8px; gap: 6px;
    z-index: 45;
  }
  #toolbar.collapsed { width: 100% !important; }
  #toolbar-toggle { display: none !important; }
  #toolbar .tool-section {
    display: flex; flex-direction: row; align-items: center; gap: 6px;
    border: none; padding: 0; margin: 0; flex: 0 0 auto;
  }
  #toolbar .tool-section-title { display: none !important; }
  #toolbar .tl { display: none !important; }
  #toolbar .tool-btn {
    flex: 0 0 auto; width: auto; flex-direction: column; gap: 2px;
    min-width: 50px; min-height: 48px; justify-content: center; padding: 6px 8px;
  }
  #toolbar .tool-btn .tk { display: none; }   /* Shortcut-Kürzel auf Handy ausblenden */
  /* Trenner zwischen den Tool-Sektionen in der Bottom-Bar */
  #toolbar .tool-section + .tool-section {
    border-left: 1px solid var(--border-muted); padding-left: 6px;
  }

  /* Panels → Bottom-Sheets (von unten). */
  #routelib-strip, #props-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%; height: 56vh;
    transform: translateY(100%);
    border-left: none; border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 22px rgba(0,0,0,.30);
  }
  #routelib-strip.drawer-open, #props-panel.drawer-open { transform: translateY(0); }

  /* Header: das 3-Spalten-Grid (erzwingt ~570px Minimum) passt nicht auf 390px.
     → zweizeilige, umbrechende Leiste: Zeile 1 = Logo + Play-Name (+ Bibliothek/Neu),
     Zeile 2 = Aktions-Icons. Nichts wird gestaucht oder abgeschnitten. */
  #app-header {
    display: flex; flex-wrap: wrap; align-items: center;
    grid-template-columns: none; height: auto; min-height: var(--header-h);
    gap: 4px 6px; padding: 5px 8px;
  }
  .header-left { flex: 1 1 auto; min-width: 0; gap: 6px; }
  .header-center, .header-actions { flex: 0 0 auto; gap: 4px; }
  .header-play-info { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 auto; }
  .header-play-info .header-divider { display: none; }
  /* Button-Texte → nur Icons (Play-Name ist ein <input>, bleibt) */
  #app-header .btn span { display: none; }
  #play-name-input { width: auto; flex: 1 1 80px; min-width: 64px; }
  /* Sekundäres auf Handy ausblenden — volle Funktion bleibt auf iPad/Desktop */
  #app-header .lang-switcher,
  #app-header .header-divider,
  #btn-overlay-picker,
  #btn-theme,
  #btn-anim-settings,
  #btn-upgrade { display: none; }
  /* Studio + Bibliothek bleiben erreichbar (Navigation Play ↔ Studio ↔ Library). */
  #btn-video-tape, #btn-toggle-playbook { display: inline-flex; }
}