/* ─── /flow.html — full-page chat ─────────────────────────────────
   See docs/web-ui.md::FL0W page for the page-vs-pane rationale.
   Shape mirrors the per-agent live page (frosted-glass header +
   composer, full-viewport terminal). */

:root {
  /* Approximate height of the flow chrome (the slim back-link header).
     The slug banner lives at the page footer on the dashboard, omitted
     on /flow.html since the full-viewport terminal has no normal-flow
     footer position. */
  --flow-header-h: 3.6em;
  --flow-composer-h: 3.6em;
  --flow-frost-bg: color-mix(in srgb, var(--bg) 74%, transparent);
  --flow-frost-blur: blur(12px) saturate(140%);
}

body.flow-shell {
  /* Override the dashboard's centred-max-width layout — flow owns
     the whole viewport. */
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,
                    color-mix(in srgb, var(--purple) 6%, transparent) 0%,
                    transparent 60%),
    var(--bg);
}

.flow-main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
/* flow.html now has a slim header (back link only) instead of the full
   tabbar — reduce the top padding to match the smaller header height. */
body.flow-shell .flow-main-slim {
  padding-top: calc(var(--flow-header-h) + 0.4em);
}
.flow-main .terminal-wrap {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.flow-main .live {
  position: absolute;
  inset: 0;
  height: auto;
  max-height: none;
  padding-top: calc(var(--flow-header-h) + 0.8em);
  padding-bottom: calc(var(--flow-composer-h) + 0.8em);
  scroll-padding-top: calc(var(--flow-header-h) + 0.8em);
  scroll-padding-bottom: calc(var(--flow-composer-h) + 0.8em);
  overflow: auto;
}
/* Tail pill (↓ N new): bottom offset clears the floating composer.
   Pill is anchored on .flow-main (not .terminal-wrap) so the
   backdrop-filter stacking context doesn't trap its z-index — see
   docs/web-ui.md::Per-agent page (Terminal-wrap) for the same
   gotcha on the agent page. */
.flow-main .tail-pill {
  bottom: calc(var(--flow-composer-h) + 0.6em);
  z-index: 35;
}

.flow-composer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  min-height: var(--flow-composer-h);
  background: var(--flow-frost-bg);
  -webkit-backdrop-filter: var(--flow-frost-blur);
  backdrop-filter: var(--flow-frost-blur);
  border-top: 1px solid var(--purple-dim);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
  padding: 0.4em 1em;
}

/* Agent filter: a select in the FL0W header narrows the
   timeline to messages involving one agent. Non-matching rows get
   `.flow-hidden`; the select reuses the journal-unit control look. */
.flow-filter {
  font-family: inherit;
  font-size: 0.85em;
  background: var(--bg-elev);
  color: var(--amber);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.25em 0.5em;
  margin-left: auto;
}
.flow-filter:focus { outline: 1px solid var(--purple); }
.msgrow.flow-hidden { display: none; }