@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";
    height: 100dvh;
    padding-top: var(--safe-inset-top);
    container-type: size;
    container-name: app-layout;
  }

  /* iOS WebKit fallback: while the focused chat composer reports a visual
     viewport that differs from the layout viewport, pin the shell to the
     visible area and prevent the outer document from scrolling. The grid
     tracks continue to place nav, main, and tab bar within that height. */
  .app-layout--chat-viewport {
    position: fixed;
    inset-inline: 0;
    top: var(--chat-vv-top);
    height: var(--chat-vv-height);
    padding-top: 0;
    overflow: hidden;
  }

  /* When the visible viewport is too short to hold a growing composer and a
     usable message region, collapse the mobile chrome before the message list
     is eliminated. The tab bar is hidden first; if the viewport is still
     contended, the chat header is hidden next. Both are restored when the
     viewport grows back. The actual collapse rules live in the component
     stylesheets (tab-bar.css, chat.css) so they come after the base display
     rules in the cascade. */

  @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;
    display: flex;
    flex-direction: column;
    min-height: 0; /* prevent grid blowout */
    overflow: hidden; /* children handle their own scroll */
  }

  /* The editor turbo-frame fills remaining space and scrolls for pages
     that don't manage their own overflow (list views, forms). For pages
     that do (editor, chat), block-size: 100% fills exactly — no double
     scrollbar. */
  .app-main > #editor_frame {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-block-size: 0;
    overflow-block: auto;
    overflow-inline: hidden;
  }

  .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;
    }
  }
}