/**
 * @guuey/agent-layout — the token sheet + structural rules (guuey#403 §2/§4).
 *
 * One import: `import "@guuey/agent-layout/styles.css"`. The tone values
 * arrive as inline `--guuey-layout-*` custom properties from the Provider
 * (base defaults = the ggui#633 founder-certified pair; overrides ride the
 * §2 tier chain). This sheet carries structure, the follow transition, the
 * <1024px drawer collapse, and the working-state treatment.
 *
 * `--guuey-layout-pane-tone` is LIB-WRITTEN state — apps read it, never
 * set it.
 */

/* guuey#429 (founder rule, requirement-grade): the shell is VIEWPORT-PINNED
 * by default — "the sidebar's height should be fixed and the lower part
 * should be stick on its bottom". `height: 100%` only pins when every
 * ancestor carries a definite height, which no adopter's tree guarantees —
 * against auto ancestors it computes to auto, tall pane content stretches
 * the PAGE, and the agent rail scrolls below the fold (a scrollable-away
 * agent panel defeats the category). So the ROOT establishes the chain
 * itself: dynamic-viewport height (dvh; vh first as the older-browser
 * fallback), `overflow: hidden` so content can only scroll inside the
 * panels' own scroll contexts (the pane's overflow:auto; the chat's own
 * scroller), never the page. An embedder that genuinely wants an in-flow
 * layout sets `--guuey-layout-height` (e.g. `100%` inside its own pinned
 * region) — a seam, not a fight. */
.guuey-agent-layout {
  height: var(--guuey-layout-height, 100vh);
  height: var(--guuey-layout-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}

.guuey-layout-shell {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  /* guuey#429, the completing half (console's adjudication): without an
   * explicit row the grid's IMPLICIT row is `auto` — it sizes to content,
   * growing past any bounded container and rendering every child's
   * min-height:0 + overflow:auto inert (clip-not-scroll). minmax(0, 1fr)
   * makes the row exactly the container's height, so the root's viewport
   * pin actually DISTRIBUTES: sidebar bound, pane scrolling within
   * itself. */
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.guuey-layout-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.guuey-layout-panel {
  min-height: 0;
  min-width: 0;
  transition: background-color var(--guuey-layout-tone-transition) ease-out;
}
.guuey-layout-panel-app {
  /* The app panel keeps its content height; the agent panel takes the
   * remaining lower space (guuey#429 — stuck on its bottom, never
   * crushed nor scrolled away). */
  flex-shrink: 0;
  background: var(--guuey-layout-tone-upper);
  color: var(--guuey-layout-tone-upper-on);
}
.guuey-layout-panel-agent {
  /* Host-overridable default (guuey#427): a host that wants a fixed-height
   * rail sets `--guuey-layout-agent-panel-flex` (e.g. `0 0 auto` + its own
   * height) — a custom-property seam, never a specificity fight. */
  flex: var(--guuey-layout-agent-panel-flex, 1);
  display: flex;
  flex-direction: column;
  background: var(--guuey-layout-tone-lower);
  color: var(--guuey-layout-tone-lower-on);
}

/* The follow: the pane's ground tracks the active panel (lib-written var),
 * arriving on the founder-certified eased fade. */
.guuey-layout-pane {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--guuey-layout-pane-tone);
  color: var(--guuey-layout-tone-upper-on);
  transition: background-color var(--guuey-layout-tone-transition) ease-out;
}
.guuey-agent-layout[data-active-panel="agent"] .guuey-layout-pane {
  color: var(--guuey-layout-tone-lower-on);
}

/* Founder (d): the working state — identity + pulse on the agent ground;
 * prior page content never holds the room. */
.guuey-layout-working {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.guuey-layout-working-identity {
  /* The identity breathes gently while the agent has the room (guuey#430
   * default-design pass) — scale-only so any brand node survives it;
   * reduced-motion snaps it static below. */
  opacity: 0.85;
  animation: guuey-layout-breathe 2.4s ease-in-out infinite;
}
@keyframes guuey-layout-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.95;
  }
}
.guuey-layout-working-pulse {
  display: inline-flex;
  gap: 6px;
}
.guuey-layout-working-pulse span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: guuey-layout-pulse 1.2s ease-in-out infinite;
}
.guuey-layout-working-pulse span:nth-child(2) {
  animation-delay: 0.2s;
}
.guuey-layout-working-pulse span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes guuey-layout-pulse {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 0.9;
    transform: translateY(-3px);
  }
}

/* The drawer toggle exists only at drawer widths (≥24px target — the
 * ggui#633 a11y floor). */
.guuey-layout-drawer-toggle {
  display: none;
}
.guuey-layout-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── <1024px: the sidebar leaves the grid and becomes an overlay drawer;
 *    the follow is SUSPENDED — the pane holds the lower (agent) tone (a
 *    tone flip referencing a panel the user cannot see is noise, §4). ── */
@media (max-width: 1023.98px) {
  .guuey-layout-shell {
    grid-template-columns: 1fr;
  }
  .guuey-layout-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(85vw, 320px);
    z-index: 20;
    transform: translateX(-100%);
    transition: transform var(--guuey-layout-tone-transition) ease-out;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
  }
  .guuey-layout-shell[data-drawer-open="true"] .guuey-layout-sidebar {
    transform: translateX(0);
  }
  .guuey-layout-drawer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    z-index: 21;
    min-width: 40px;
    min-height: 40px;
    border: none;
    border-radius: 8px;
    background: var(--guuey-layout-tone-upper);
    color: var(--guuey-layout-tone-upper-on);
    cursor: pointer;
  }
  /* Follow suspended: fixed conversation tone, not a broken animation. */
  .guuey-layout-pane {
    background: var(--guuey-layout-tone-lower);
    color: var(--guuey-layout-tone-lower-on);
    transition: none;
  }
}

/* Reduced motion: instant snap, no pulse travel (non-negotiable MUST). */
@media (prefers-reduced-motion: reduce) {
  .guuey-layout-panel,
  .guuey-layout-pane,
  .guuey-layout-sidebar {
    transition: none;
  }
  .guuey-layout-working-pulse span {
    animation: none;
    opacity: 0.6;
    transform: none;
  }
  .guuey-layout-working-identity {
    animation: none;
    opacity: 0.85;
    transform: none;
  }
}