/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSE — Layout v5
   Sidebar-first: sidebar occupies full height, pushes topbar+toolbar+canvas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── App shell — ROW layout ───────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: row;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-app);
}

/* ── Sidebar — leftmost column ───────────────────────────────────────── */
#sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  z-index: var(--z-sidebar);
  order: 0;
  transition: flex-basis var(--t-slow) var(--ease), width var(--t-slow) var(--ease);
}

[data-sidebar-side="right"] #sidebar {
  order: 2;
  border-right: none;
  border-left: 1px solid var(--sidebar-border);
}

/* Closed: collapse to zero (transition animates it) */
#sidebar[data-sidebar-open="false"] {
  flex-basis: 0;
  width: 0;
  overflow: hidden;
  border: none;
}

/* ── Main column — topbar + toolbar + canvas ─────────────────────────── */
#main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  order: 1;
}

/* ── Body — legacy wrapper kept for JS compat ────────────────────────── */
#body {
  display: contents;
}

/* ── Topbar ───────────────────────────────────────────────────────────── */
#topbar {
  flex: 0 0 var(--topbar-h);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 8px 0 12px;
  gap: 4px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  z-index: var(--z-topbar);
  position: relative;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */
#toolbar-row {
  flex: 0 0 var(--toolbar-h);
  height: var(--toolbar-h);
  display: flex;
  align-items: center;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--toolbar-border);
  z-index: var(--z-toolbar);
  position: relative;
  overflow: hidden;
}

/* ── Canvas ───────────────────────────────────────────────────────────── */
#canvas {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ── Mobile toolbar ───────────────────────────────────────────────────── */
#toolbar-mobile {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--toolbar-h);
  z-index: var(--z-toolbar);
  background: var(--toolbar-bg);
  border-top: 1px solid var(--toolbar-border);
}

/* ── Overlay ──────────────────────────────────────────────────────────── */
#overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sidebar) - 1);
  background: var(--bg-overlay);
}
#overlay.is-visible { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

/* ── Desktop / tablet (≥768px) ──────────────────────────────────────── */
@media (min-width: 768px) {
  #toolbar-row    { display: flex; }
  #toolbar-mobile { display: none !important; }
}

/* ── Mobile (≤767px) ────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Column layout: topbar → scrollable canvas → fixed toolbar */
  #app  { flex-direction: column; }
  #main { flex: 1 1 0; min-height: 0; overflow: hidden; }

  /* Desktop toolbar hidden */
  #toolbar-row { display: none !important; }

  /* Mobile toolbar: fixed at bottom, always visible, above keyboard */
  #toolbar-mobile {
    display: flex !important;
    position: fixed;
    /* Use keyboard-inset-height when available (Chrome Android 94+).
       Falls back to safe-area-inset-bottom for iOS notch devices.
       On devices without either, falls back to 0. */
    bottom: env(keyboard-inset-height, env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    height: var(--toolbar-h);
    background: var(--toolbar-bg);
    border-top: 1px solid var(--toolbar-border);
    /* Above sidebar (120), modal (300) — needs to beat keyboard compositing layer */
    z-index: 9999;
    overflow: hidden;
    /* Force GPU layer — helps iOS repaint correctly above keyboard */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  #toolbar-mobile .toolbar-inner {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Left-align so scroll starts from first button */
    justify-content: flex-start;
  }
  #toolbar-mobile .toolbar-inner::-webkit-scrollbar { display: none; }

  /* Canvas: reserve space for fixed bottom toolbar */
  #canvas {
    padding-bottom: calc(var(--toolbar-h) + env(safe-area-inset-bottom, 0px));
  }

  /* ── Sidebar: bottom sheet ──────────────────────────────────────────
   *
   * Key requirements:
   * 1. Slides up from bottom (translateY)
   * 2. Has an EXPLICIT height so child .sp panels (position:absolute;
   *    inset:0) have something to fill — without this they collapse to 0.
   * 3. overflow:auto so the sheet itself doesn't clip scrolling panels.
   * 4. Rounded top corners + drag handle pill.
   */
  #sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    /* Explicit height so absolutely-positioned .sp panels can fill it */
    height: 75dvh !important;
    width: 100% !important;
    flex-basis: auto !important;
    /* Start off-screen below */
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 20px 20px 0 0;
    border: none !important;
    border-top: 1px solid var(--sidebar-border) !important;
    z-index: var(--z-sidebar) !important;
    /* overflow:auto so .sp-body can scroll; hidden clips rounded corners */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  [data-sidebar-side="left"]  #sidebar,
  [data-sidebar-side="right"] #sidebar {
    left: 0 !important;
    right: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Open: slide up */
  #sidebar[data-sidebar-open="true"] {
    transform: translateY(0) !important;
  }

  /* Closed: slide down — keep full size so animation is smooth */
  #sidebar[data-sidebar-open="false"] {
    transform: translateY(105%) !important;
  }

  /* Drag handle pill — sits above the panel header */
  #sidebar::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
    margin: 10px auto 0;
    pointer-events: none;
  }

  /* Panel body: native scroll */
  .sp-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }
  .sp-body::-webkit-scrollbar { display: none; }
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print {
  #topbar, #toolbar-row, #toolbar-mobile, #sidebar, #overlay { display: none !important; }
  #app, #main, #canvas { display: block; height: auto; overflow: visible; }
}