frontend/src/styles/editor/_layout.css

/* ============================================================================ */
/* Editor layout                                                                */
/*                                                                              */
/* Aligned with the research-article-template's 3-column grid, but with         */
/* narrower sidebars so the chat/drawer UI fits comfortably:                    */
/*     [ TOC 200px ] [ content 680px ] [ sidenotes 200px ]                      */
/*                                                                              */
/* wide/fullWidth use viewport-based breakout (see article.css) so they look    */
/* identical to the published output.                                           */
/* ============================================================================ */

.editor-app {
  height: 100dvh;          /* dvh = dynamic viewport (iOS Safari URL bar) */
  display: flex;
  flex-direction: column;
  /* Use the page background so the editor shell matches the article content
     (no greyish frame around the white canvas in light mode). */
  background: var(--page-bg);
  overflow: hidden;
  position: relative;
}

/* ---- Grid: 3-col symmetric, centered in viewport ---- */

.editor-app .content-grid {
  display: grid;                    /* wins specificity over _layout.css */
  grid-template-columns:
    var(--layout-editor-toc-width)
    minmax(0, var(--layout-content-width))
    var(--layout-editor-sidenote-width);
  grid-template-rows: auto 1fr;
  gap: 0 var(--layout-gap);
  max-width: var(--layout-editor-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding-x);
}

.content-grid__hero  { grid-column: 1 / -1; grid-row: 1; }
.content-grid__toc   { grid-column: 1;      grid-row: 2; }
.content-grid__editor {
  grid-column: 2;
  grid-row: 2;
  padding-top: 24px;
  padding-bottom: 32px;
  position: relative;
  overflow: visible;
}

/* In the editor, .tiptap is a plain flow container; wide/fullWidth escape
   the 680px column via viewport breakout (see article.css). */
.editor-app .tiptap {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ============================================================================ */
/* Responsive                                                                   */
/*                                                                              */
/* <= 1100px : TOC collapses into a drawer, sidenotes stack inline              */
/*             (handled in article.css). Single-column grid.                    */
/* <=  768px : Compact top-bar, narrower floating panels, stacked embed studio. */
/* ============================================================================ */

/* Hamburger toggle: hidden on desktop, shown below the collapse breakpoint */
.top-bar__toc-toggle { display: none; }

/* Mobile TOC overlay: hidden by default on desktop */
.editor-app .toc-mobile-backdrop { display: none; }
.editor-app .toc-mobile-sidebar  { display: none; }

@media (max-width: 1100px) {
  .editor-app .content-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    max-width: none;
    gap: 0;
  }
  .editor-app .content-grid__hero   { grid-column: 1; grid-row: 1; }
  .editor-app .content-grid__toc    { display: none; }
  .editor-app .content-grid__editor { grid-column: 1; grid-row: 2; }

  .top-bar__toc-toggle {
    display: inline-flex;
    margin-right: auto;
  }
  .editor-app .toc-mobile-backdrop { display: block; }
  .editor-app .toc-mobile-sidebar  { display: flex; }
}

@media (max-width: 768px) {
  .editor-app .content-grid__editor {
    padding-top: 16px;
    padding-bottom: 24px;
  }

  /* Top bar: compact, wrap-safe */
  .editor-app .top-bar {
    padding: 6px 8px;
    gap: 2px;
    flex-wrap: wrap;
  }
  .editor-app .top-bar .divider-v { display: none; }
  .editor-app .top-bar .sync-indicator .sync-indicator__label { display: none; }

  /* Chat floating: fill width on mobile */
  .editor-app .chat-floating {
    width: calc(100vw - 24px);
    max-width: 360px;
    left: 12px;
    bottom: 12px;
    height: calc(100dvh - 80px);
    max-height: calc(100dvh - 80px);
  }
  .editor-app .chat-fab {
    bottom: 12px;
    left: 12px;
  }

  /* Settings drawer: full-width on mobile */
  .editor-app .drawer-panel { width: 100vw; }

  /* Embed Studio: stack body vertically */
  .editor-app .es-body { flex-direction: column; }
  .editor-app .es-chat {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: 45vh;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  /* Citation panel: narrower on mobile */
  .editor-app .citation-panel {
    width: calc(100vw - 32px);
    max-width: 480px;
  }
}