/* The agent page. Two phases on one surface, driven by [data-phase] on .stage.
   Colours come from the avatar's own visor glow so the figure and the interface
   read as the same entity. Tokens otherwise inherit from falaq-2026.css.

   ── Layout ownership ───────────────────────────────────────────────────────
   This file is the ONLY place the agent page's page-level geometry is written:
   the stage grid, the viewport height, the console shell's column split, and
   every breakpoint that moves any of them. agent-console.css and
   graph-canvas.css style what lives *inside* a panel and nothing else.

   The rule is not tidiness. All three files used to write .ac-workspace's
   grid-template-columns and .ac-chat-panel's box; the last file loaded won,
   which was never the file anyone was reading. Every symptom in the audit
   traces back to one shared mistake those files made independently:

     an auto INLINE MARGIN on a grid item.

   `margin-inline: auto` (or `margin: auto`) on a grid item switches it out of
   `stretch` and into fit-content sizing. It then measures its own max-content
   and happily overflows its track. That is why .ac-chat-panel measured 665px
   inside a 440px column and printed 225px of itself over the diagram at every
   width above 900px, and why .st-live made the stage's `auto` track 466.8px
   wide on a 390px phone and let overflow:hidden cut the composer off.

   Items are centred here with a definite inline-size, never with auto margins,
   and every track is minmax(0, …) so nothing can size a track from content. */

.stage {
  --st-blue: #1a6dff;
  --st-blue-mid: #4da3ff;
  --st-blue-hi: #8dd6ff;
  --st-glow: rgba(26, 109, 255, .22);

  /* The sticky site nav. Stated once; every height below is derived from it. */
  --st-chrome: 65px;
  /* agent-stage.js keeps this in step with visualViewport so the live phase
     shrinks to the space an open on-screen keyboard actually leaves. Chrome's
     default `interactive-widget: resizes-visual` means dvh alone does not
     react to the keyboard, so dvh is only the pre-JS fallback. */
  --st-vh: 100dvh;

  position: relative;
  display: grid;
  grid-template-areas: "stack";
  /* minmax(0, 1fr), never the implicit `auto`. An auto track sizes to the
     widest item's max-content contribution, and with auto margins on .st-rest
     and .st-live that contribution was the console's full natural width — the
     track measured 466.8px on a 390px viewport and overflow:hidden ate the
     difference. A 1fr track with a zero floor cannot outgrow the stage. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100vh - var(--st-chrome));
  min-height: calc(100dvh - var(--st-chrome));
  /* Notched phones: the stage paints edge to edge, the content does not sit
     under the cutout. Padding on the grid container narrows the track itself,
     so no child has to know the inset exists. */
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  overflow: hidden;
  background: #05070a;
  color: var(--ink);
}

/* The live phase is a fixed region, not a growing page. A 40-message
   conversation used to push the document to 4422px against a 900px viewport
   and carry the composer off the bottom with it; the stream is now the only
   thing that scrolls. min-height is the floor for a landscape phone: below it
   the stage stops shrinking and the document scrolls instead of the console
   being crushed. */
.stage[data-phase="live"] {
  height: calc(var(--st-vh) - var(--st-chrome));
  min-height: 520px;
}

/* ── Video backdrop & ambient grid ───────────────────────────────────────── */
.st-backdrop {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0 !important;
}

.st-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: .8;
  filter: brightness(.92) contrast(1.1);
  transition: opacity .8s ease, filter .8s ease, transform 1.2s ease;
}

.stage[data-phase="waking"] .st-video-bg,
.stage[data-phase="live"] .st-video-bg {
  opacity: .14;
  filter: blur(16px) brightness(.4);
  transform: scale(1.08);
}

.st-backdrop-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(5, 7, 10, .25) 0%, rgba(5, 7, 10, .7) 78%, #05070a 100%),
    linear-gradient(180deg, rgba(5, 7, 10, .15) 0%, rgba(5, 7, 10, .85) 100%);
}

.st-backdrop-grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(77, 163, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77, 163, 255, .08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 45%, black 25%, transparent 75%);
}

.st-rest, .st-live { position: relative; z-index: 2; }

/* ── Rest (Hero State) ───────────────────────────────────────────────────
   High-impact hero with the glowing agent mark, headline, and the wide
   signature pill composer. */

.st-rest {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-area: stack;
  min-width: 0;
  /* Definite inline-size + auto margins, not `margin: auto` on an auto width.
     The second form is what made the stage's track 466.8px wide on a 390px
     phone: an auto-margined grid item is sized fit-content, so the hero's
     880px chip row became the track, and the track became the console's
     width. With the size stated, the auto margins only centre. */
  inline-size: min(1140px, 100%);
  margin-inline: auto;
  min-height: calc(100dvh - 120px);
  padding: var(--x6) var(--x4) var(--x8);
  /* The composer and the chip row are the tallest part of the rest phase and
     the first thing a short screen loses. Scrolling inside the stage keeps
     them reachable without letting the phase push the document down. */
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
  gap: var(--x4);
  animation: stFadeIn .6s cubic-bezier(.16, 1, .3, 1) both;
}
.stage[data-phase="live"] .st-rest { display: none; }

.stage[data-phase="waking"] .st-rest {
  animation: stExit .4s ease-in forwards;
  pointer-events: none;
}

@keyframes stExit {
  0%   { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: scale(.97); filter: blur(6px); }
}

.stage[data-phase="waking"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  background: radial-gradient(ellipse at 50% 50%, rgba(26, 109, 255, .12), transparent 70%);
  animation: stCurtain .6s ease-out forwards;
  pointer-events: none;
}

@keyframes stCurtain {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes stFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* Badge */
.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 8px;
  border-radius: 999px;
  background: rgba(13, 18, 30, .75);
  border: 1px solid rgba(141, 214, 255, .32);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 25px rgba(26, 109, 255, .25), inset 0 1px rgba(255, 255, 255, .12);
}
html[dir="ltr"] .st-badge { padding: 6px 8px 6px 18px; }

.st-badge-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(77, 163, 255, .15);
}
.st-badge-mark img { width: 100%; height: 100%; object-fit: contain; }

.st-badge-text {
  font-family: var(--f-data);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #d6f0ff;
  text-transform: uppercase;
}

.st-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4da3ff;
  box-shadow: 0 0 10px #4da3ff;
  animation: stPulse 2s ease-in-out infinite;
}

@keyframes stPulse { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.15); } }

.st-title {
  max-width: 24ch;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: #ffffff;
  text-shadow: 0 4px 28px rgba(0, 0, 0, .8), 0 0 40px rgba(26, 109, 255, .25);
  margin: 0;
}

.st-lead {
  max-width: 56ch;
  color: rgba(225, 232, 246, .9);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.75;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}

/* ── The Signature Curved Pill Composer ──────────────────────────────────
   Spans gracefully across the screen with curved arc ends and glowing borders. */
.st-composer {
  display: block;
  width: min(1040px, calc(100% - 24px));
  margin-top: var(--x2);
}

.st-composer-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 8px 10px 8px 20px;
  border-radius: 999px;
  background: rgba(10, 14, 24, .78);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(141, 214, 255, .38);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 35px rgba(26, 109, 255, .22), inset 0 1px rgba(255, 255, 255, .12);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
html[dir="ltr"] .st-composer-pill { padding: 8px 20px 8px 10px; }

.stage.is-typing .st-composer-pill,
.st-composer:focus-within .st-composer-pill {
  border-color: rgba(77, 163, 255, .85);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .68), 0 0 45px rgba(77, 163, 255, .32), inset 0 1px rgba(255, 255, 255, .14);
  transform: translateY(-2px);
}

.st-composer-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(26, 109, 255, .15);
  border: 1px solid rgba(77, 163, 255, .3);
}
.st-composer-mark img { width: 22px; height: 22px; object-fit: contain; }

.st-composer textarea {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  max-height: 120px;
  padding: 12px 6px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.5;
  resize: none;
}
.st-composer textarea::placeholder { color: rgba(169, 165, 179, .75); font-weight: 400; }

.st-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #1a6dff, #4da3ff);
  color: #ffffff;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(26, 109, 255, .4);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  flex-shrink: 0;
}
.st-send:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 12px 30px rgba(77, 163, 255, .55);
  background: linear-gradient(135deg, #2478ff, #62b1ff);
}
.st-send svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
html[dir="rtl"] .st-send svg { transform: scaleX(-1); }

/* Quick Examples */
.st-examples {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: var(--x2);
}
.st-examples > span {
  color: rgba(169, 165, 179, .8);
  font-size: .82rem;
  font-weight: 500;
}

.st-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 880px;
}
.st-chips button {
  padding: 9px 18px;
  border: 1px solid rgba(233, 231, 236, .14);
  border-radius: 999px;
  background: rgba(14, 18, 30, .6);
  color: rgba(220, 226, 240, .88);
  font-family: inherit;
  font-size: .84rem;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.st-chips button:hover {
  border-color: rgba(77, 163, 255, .55);
  background: rgba(26, 109, 255, .18);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}

/* ── Live Stage ──────────────────────────────────────────────────────────
   Expansive, full-width container for the Live Solution Architect workspace. */

/* Same treatment as .st-rest: a stated inline-size, then auto margins that do
   nothing but centre. The old `width: min(1600px, calc(100% - 24px))` looked
   definite, but a percentage against a track that is still being sized
   resolves to auto, so it contributed max-content and sized the track itself. */
.st-live {
  display: flex;
  visibility: hidden;
  grid-area: stack;
  pointer-events: none;
  opacity: 0;
  inline-size: min(1600px, 100%);
  margin-inline: auto;
  padding: var(--x3) var(--x3) var(--x5);
  /* Bottom bar / gesture area on a phone: the composer must not sit under it. */
  padding-block-end: max(var(--x5), env(safe-area-inset-bottom, 0px));
  flex-direction: column;
  /* The whole point of the spine. Every box between the stage and .ac-stream
     carries min-height: 0 so the flex chain can actually shrink; one missing
     link anywhere here and the stream stops scrolling and the page grows
     instead, which is exactly what used to happen. */
  min-inline-size: 0;
  min-block-size: 0;
}
.stage[data-phase="live"] .st-live {
  visibility: visible;
  pointer-events: auto;
  animation: stEnter .3s ease-out forwards;
}
@keyframes stEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.st-console {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
  min-block-size: 0;
  inline-size: 100%;
  /* ── The container ────────────────────────────────────────────────────────
     Everything below asks how much room the console has, never how wide the
     screen is. That is why the 900/901 cliff disappears rather than moving:
     there is no longer a width at which the layout is told to be two columns
     while the space says otherwise. The old rule flipped .ac-workspace to a
     440px + 1fr split the moment the *viewport* passed 900px, regardless of
     what the shell had been given — 225px of chat panel landed on top of the
     diagram and stayed there all the way to 1440px. */
  container-type: inline-size;
  container-name: agent-shell;
}

/* ══ Shell spine ═══════════════════════════════════════════════════════════
   The console's page-level geometry. These selectors belong to
   agent-console.js's markup, but the boxes are the page's layout, so they are
   owned here — agent-console.css and graph-canvas.css no longer state any of
   it. Written last in the cascade (agent-stage.css is the last stylesheet the
   page loads), so this file wins ties without needing !important. */

.st-console > .ac {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
  min-block-size: 0;
}

.st-console .ac-workspace {
  display: grid;
  /* Single column is the default, not the exception. A layout that starts
     narrow and earns its second column cannot overlap on the way up. */
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  min-block-size: 0;
  min-inline-size: 0;
  transition: grid-template-columns .52s cubic-bezier(.22, .9, .28, 1);
}

.st-console .ac-chat-panel,
.st-console .ac-canvas-panel {
  /* min-*: 0 defeats the automatic minimum size of a grid item, which is
     min-content by default — a single unbroken URL would otherwise set the
     floor for the whole column. No auto inline margins: that is the bug. */
  min-inline-size: 0;
  min-block-size: 0;
  margin-inline: 0;
  max-inline-size: none;
  inline-size: auto;
}

/* Before the first mutation there is no architecture to show, so the chat
   narrows to a column rather than running the width of the shell and reading
   as a page. A definite inline-size plus justify-self, never `margin-inline:
   auto` on an auto width — see the note at the top of this file. */
.st-console .ac[data-mode="centered"] .ac-chat-panel {
  inline-size: min(660px, 100%);
  justify-self: center;
  transition: inline-size .52s cubic-bezier(.22, .9, .28, 1);
}

/* Two columns once the shell has room for both, measured on the shell. Both
   tracks are minmax(0, …) and the second is 1fr, so the pair always sums to
   exactly the container: an overlap is not representable, whatever the
   content does. 760px is where 320px of conversation and 440px of diagram
   both stop being cramped, not a device width. */
@container agent-shell (min-width: 760px) {
  .st-console .ac-workspace {
    grid-template-columns: minmax(0, clamp(320px, 38cqi, 440px)) minmax(0, 1fr);
    gap: 1px;
  }
  .st-console .ac-mobile-tabs { display: none; }
  .st-console .ac-chat-panel,
  .st-console .ac-canvas-panel { display: flex !important; }
}

/* Below that the two panels share the column and the tabs choose between
   them. Stated as a container query too, so the tabs appear exactly when the
   single-column layout does — the old pair of rules lived in two files at two
   different widths and could disagree. */
@container agent-shell (max-width: 759.98px) {
  .st-console .ac-mobile-tabs { display: flex; }
  .st-console .ac[data-active-tab="chat"] .ac-canvas-panel,
  .st-console .ac[data-active-tab="canvas"] .ac-chat-panel { display: none !important; }
  .st-console .ac[data-active-tab="chat"] .ac-chat-panel,
  .st-console .ac[data-active-tab="canvas"] .ac-canvas-panel { display: flex !important; }
  .st-console .ac-chat-panel { border-inline-end: 0; }
}

/* Narrow shells drop the chrome that costs the most width per unit of meaning. */
@container agent-shell (max-width: 560px) {
  .st-console .ac-topbar { flex-wrap: wrap; padding: 8px 12px; }
  .st-console .ac-session { display: none; }
  .st-console .ac-statusbar { flex-wrap: wrap; row-gap: 2px; padding-block: 4px; }
}

@media (max-width: 900px) {
  .st-rest { min-height: calc(100dvh - 140px); padding: var(--x4) var(--x3) var(--x6); }
  .st-title { font-size: 1.85rem; }
  .st-composer { width: 100%; }
  .st-composer-pill { border-radius: 28px; padding: 10px 14px; gap: 10px; }
  .st-composer-mark { width: 32px; height: 32px; }
  .st-send { height: 42px; padding: 0 18px; font-size: .85rem; }
  .st-live { padding: var(--x2) var(--x2) var(--x4); padding-block-end: max(var(--x4), env(safe-area-inset-bottom, 0px)); }
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   Previously this stopped the badge dot and the live-phase fade and left the
   two largest movements on the page running: the looping background video and
   the wake sequence. agent-stage.js pauses the video (CSS cannot stop
   playback); everything the stage animates is stopped here, including the
   phase transitions, so "reduce" means the page changes state without ever
   moving. */
@media (prefers-reduced-motion: reduce) {
  .st-video-bg { transition: none !important; animation: none !important; }
  .st-badge-dot,
  .st-rest,
  .stage[data-phase="waking"] .st-rest,
  .stage[data-phase="waking"]::after,
  .stage[data-phase="live"] .st-live { animation: none !important; }
  .stage[data-phase="waking"] .st-rest { opacity: 0; }
  .stage[data-phase="live"] .st-live { opacity: 1; }
  .st-composer-pill,
  .st-send,
  .st-chips button,
  .falaq-agent-link,
  .st-console .ac-workspace { transition: none !important; }
  .stage.is-typing .st-composer-pill,
  .st-composer:focus-within .st-composer-pill,
  .st-send:hover,
  .st-chips button:hover { transform: none; }
}

/* ── Service-page launcher ─────────────────────────────────────────────────
   Replaces the old floating robot. It is a link, not a widget: the whole
   conversation lives on /agent/ now, so a corner bubble would only be a second,
   weaker copy of it. */

.falaq-agent-link {
  position: fixed;
  z-index: 90;
  inset-inline-end: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px 9px 9px;
  border: 1px solid rgba(77, 163, 255, .26);
  border-radius: 999px;
  background: rgba(10, 12, 18, .88);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
html[dir="ltr"] .falaq-agent-link { padding: 9px 9px 9px 16px; }
.falaq-agent-link:hover { border-color: rgba(141, 214, 255, .6); transform: translateY(-2px); }
.falaq-agent-link img { width: 36px; height: 36px; border-radius: 50%; }
.falaq-agent-link span { display: grid; gap: 1px; }
.falaq-agent-link strong { font-size: .85rem; font-weight: 700; }
.falaq-agent-link small { color: var(--ink-3); font-size: .72rem; }

@media (max-width: 560px) {
  .falaq-agent-link small { display: none; }
  .falaq-agent-link { inset-inline-end: 12px; bottom: 12px; }
}

/* ── Home-page invitation ──────────────────────────────────────────────────
   Replaces the inline scope advisor that used to sit under the agent cards.
   One figure, one sentence, one link — the conversation itself belongs on
   /agent/, not duplicated halfway down the home page. */

.agent-invite { padding-block: var(--x6); border-top: 1px solid var(--line); background: var(--s-base); }
.agent-invite-in {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--x6);
  align-items: center;
}
/* The width/height attributes on the tag reserve layout space; without an
   explicit cap here the figure renders at its full 520px and the band grows to
   nearly a full screen for one sentence. */
.agent-invite-in > img {
  width: 100%;
  max-width: 220px;
  height: auto;
  justify-self: center;
  filter: drop-shadow(0 24px 60px rgba(26, 109, 255, .22));
}
.agent-invite .kick {
  display: block;
  margin-bottom: var(--x3);
  color: var(--acc-lo);
  font-family: var(--f-data);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
}
html[dir="rtl"] .agent-invite .kick { letter-spacing: 0; font-family: var(--f-body); }
.agent-invite h2 { margin: 0 0 var(--x3); color: #fff; font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.3; }
.agent-invite p { margin: 0 0 var(--x4); max-width: 54ch; color: var(--ink-2); font-size: .96rem; line-height: 1.75; }

.agent-invite-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--s-void);
  font-size: .9rem;
  font-weight: 750;
  transition: background-color .2s ease, gap .2s ease;
}
.agent-invite-cta:hover { background: #8dd6ff; gap: 14px; }
.agent-invite-cta i { font-style: normal; }

@media (max-width: 820px) {
  .agent-invite-in { grid-template-columns: minmax(0, 1fr); gap: var(--x4); justify-items: center; text-align: center; }
  .agent-invite-in > img { max-width: 190px; }
  .agent-invite p { margin-inline: auto; }
}