@layer base {
  /* Three-pane mobile-first layout
   *
   * Mobile: single column, drawers are off-canvas overlays, bottom tab bar
   * Desktop (>=800px): three-column grid with persistent side drawers
   *
   * Grid areas:
   *   nav     -- top navigation bar (spans full width)
   *   left    -- story bible drawer
   *   main    -- editor / chat / primary content
   *   right   -- outline drawer
   *   tabs    -- mobile bottom tab bar (mobile only)
   */

  .app-layout {
    display: grid;
    grid-template-rows: var(--nav-height) 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas:
      "nav"
      "main"
      "tabs";
    min-height: 100dvh;
    padding-top: var(--safe-inset-top);
    padding-bottom: var(--safe-inset-bottom);
  }

  @media (min-width: 800px) {
    .app-layout {
      grid-template-rows: var(--nav-height) 1fr;
      grid-template-columns: var(--drawer-width) 1fr var(--drawer-width);
      grid-template-areas:
        "nav   nav   nav"
        "left  main  right";
    }

    /* When a drawer is collapsed, remove its column */
    .app-layout--left-collapsed {
      grid-template-columns: 0 1fr var(--drawer-width);
    }

    .app-layout--right-collapsed {
      grid-template-columns: var(--drawer-width) 1fr 0;
    }

    .app-layout--both-collapsed {
      grid-template-columns: 0 1fr 0;
    }
  }

  .app-nav {
    grid-area: nav;
  }

  .app-main {
    grid-area: main;
    overflow-y: auto;
    min-height: 0; /* prevent grid blowout */
  }

  .app-left {
    grid-area: left;
  }

  .app-right {
    grid-area: right;
  }

  .app-tabs {
    grid-area: tabs;
  }

  /* On desktop, hide the tab bar */
  @media (min-width: 800px) {
    .app-tabs {
      display: none;
    }
  }
}