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

/* ── App shell — ROW layout ───────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: row;
  /* Viewport height strategy — order matters, last supported value wins:
     1. 100vh       — universal fallback
     2. 100dvh      — dynamic (resizes with browser chrome); on iPadOS this equals
                      the LARGE viewport at load time so topbar can be off-screen
     3. 100svh      — small viewport height; always accounts for visible browser UI.
                      Declared last so it wins in Safari 15.4+ / Chrome 108+.
                      Older browsers that don't understand svh keep 100dvh or 100vh. */
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  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 — shared header + 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;
}

/* ── Shared header shell ──────────────────────────────────────────────── */
#app-header {
  flex: 0 0 var(--app-header-h);
  min-height: var(--app-header-h);
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: var(--topbar-bg);
  border-bottom: 0;
  position: relative;
  z-index: var(--z-topbar);
}

#app-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--topbar-border);
  pointer-events: none;
}

.header-row {
  min-width: 0;
  position: relative;
}

.header-row--main {
  border-bottom: 1px solid var(--topbar-border);
}

/* ── Topbar ───────────────────────────────────────────────────────────── */
#topbar {
  flex: 0 0 var(--topbar-h);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0;
  gap: 0;
  background: var(--topbar-bg);
  z-index: auto;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */
#toolbar-row {
  flex: 0 0 var(--toolbar-h);
  height: var(--toolbar-h);
  display: flex;
  align-items: center;
  background: var(--toolbar-bg);
  z-index: auto;
  overflow: visible;
}

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


/* ── 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
   ══════════════════════════════════════════════════════════════════════ */

/* ── Responsive layout ──────────────────────────────────────────────── */
@media (max-width: 767px) {

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

  #app-header {
    flex: 0 0 var(--app-header-h);
    min-height: var(--app-header-h);
  }

  #toolbar-row {
    display: flex;
  }

  #canvas {
    padding-bottom: 0;
  }

  /* ── 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.
       svh (small viewport) declared last to win on Safari 15.4+, avoiding
       the same off-screen issue as the app shell. */
    height: 75vh !important;
    height: 75svh !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;
  }

  /* Panel body: native scroll */
  .sp-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    /* Keep the final option comfortably above the bottom safe area */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  }
  .sp-body::-webkit-scrollbar { display: none; }
}

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