/* ===== Flock: the in-app agent's bar, drawer, presence canvas and introduction (js/flock-agent.js, js/flock-presence.js)
   Loaded on every page; nothing here applies until Flock mounts (html.flock-on). Only transform and opacity animate.
   Light tokens follow rs-shell; charcoal dark follows the ui/dark-mode tokens (html[data-theme="dark"], or "system"
   under a dark preference): canvas #1C1C1E, panel #262628, ink #ECE9E2, periwinkle #8C9ED0. */
:root {
  --flk-panel: var(--dk-paper, #FFFFFF); --flk-inset: var(--dk-b-f7f6f2, #F7F6F2); --flk-tx: var(--dk-ink, #1F1F21); --flk-tx-2: var(--dk-t-636366, #636366); --flk-line: var(--dk-l-1f1f21a10, rgba(31,31,33,.10));
  --flk-accent: #4C5F92; --flk-accent-soft: rgba(135,153,195,.16);
  --flk-halo: 0 0 0 5px rgba(135,153,195,.16), 0 0 26px 6px rgba(135,153,195,.30);
  --flk-shadow: 0 2px 6px rgba(31,31,33,.06), 0 12px 32px rgba(31,31,33,.12);
  --flk-bird: #4C5F92; --flk-bird-2: #8799C3;
  --flk-ease: cubic-bezier(.2,.7,.2,1);
  --flk-left: 0px;   /* the page column's left edge (the sidebar), so the bar centres on the content */
}
html[data-theme="dark"] {
  --flk-panel: #262628; --flk-inset: #2E2E31; --flk-tx: #ECE9E2; --flk-tx-2: #A9A6A0; --flk-line: var(--dk-l-ece9e2a12, rgba(236,233,226,.12));
  --flk-accent: #8C9ED0; --flk-accent-soft: rgba(140,158,208,.16);
  --flk-halo: 0 0 0 5px rgba(140,158,208,.14), 0 0 28px 6px rgba(140,158,208,.26);
  --flk-shadow: 0 2px 6px rgba(0,0,0,.30), 0 12px 32px rgba(0,0,0,.45);
  --flk-bird: #8C9ED0; --flk-bird-2: #5468A0;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --flk-panel: #262628; --flk-inset: #2E2E31; --flk-tx: #ECE9E2; --flk-tx-2: #A9A6A0; --flk-line: var(--dk-l-ece9e2a12, rgba(236,233,226,.12));
    --flk-accent: #8C9ED0; --flk-accent-soft: rgba(140,158,208,.16);
    --flk-halo: 0 0 0 5px rgba(140,158,208,.14), 0 0 28px 6px rgba(140,158,208,.26);
    --flk-shadow: 0 2px 6px rgba(0,0,0,.30), 0 12px 32px rgba(0,0,0,.45);
    --flk-bird: #8C9ED0; --flk-bird-2: #5468A0;
  }
}
@media (min-width: 761px) {
  html.flock-on[data-look] { --flk-left: var(--rs-side-w, 236px); }
  html.flock-on[data-look][data-sidebar="collapsed"] { --flk-left: var(--rs-rail-w, 72px); }
  html.flock-on[data-look]:has(body[data-route="welcome"]) { --flk-left: 0px; }   /* onboarding has no sidebar */
}

/* one bar on the page: Home's Ask Volare composer steps aside while Flock is on; every page ends clear of the bar */
html.flock-on #homeAskDock { display: none; }
html.flock-on body.app .main, html.flock-on[data-look] body.app[data-route] .main { padding-bottom: 104px; }
/* the pages that fill the window end above the bar, so their last button (Start editing, Stop this edit) is never under it (E17):
   the bar's top edge is 68px up from the window's bottom */
html.flock-on:root #fstage .side-setup, html.flock-on:root #fstage .side-started { max-height: calc(100vh - var(--rs-top-h, 56px) - 144px); }
html.flock-on:root .fstage.fstage--ws[data-page="proc"] { height: calc(100dvh - var(--rs-top-h, 56px) - var(--rs-gap, 16px) - 88px); min-height: 540px; }

/* the switch by the bell (js/flock-agent.js paintSwitch): the top bar's own icon button; on = the bird in the accent on a
   soft accent disc, off = a muted outline bird. Shown only while Admin > Features makes Flock available here. */
.flk[hidden] { display: none !important; }
#flkSwitch { position: relative; color: var(--muted, #636366); }
#flkSwitch svg { display: block; transition: opacity .16s var(--flk-ease); }
#flkSwitch[aria-pressed="false"] svg polygon { fill: none; stroke: currentColor; stroke-width: 44; stroke-linejoin: round; }
#flkSwitch[aria-pressed="false"] svg { opacity: .75; }
#flkSwitch[aria-pressed="true"],
html[data-look] #flkSwitch[aria-pressed="true"] { color: var(--flk-accent); background: var(--flk-accent-soft); }
html[data-look] #flkSwitch[aria-pressed="false"] { color: var(--s-ink-2, var(--muted, #636366)); }
html[data-look] body.app .topbar > #flkSwitch { margin-left: auto; }   /* the bell's own push to the right moves onto the switch */
html[data-look] body.app .topbar > #flkSwitch + #bellWrap { margin-left: 0; }

.flk-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 57; pointer-events: none; }
html.flock-on:has(.flk-intro) .flk-canvas { z-index: 73; }   /* the flock assembles over the introduction */

.flk { position: fixed; z-index: 56; left: calc(var(--flk-left) + 16px); right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; pointer-events: none; color: var(--flk-tx);
  font: 400 13px/1.5 var(--rs-font, Inter, system-ui, sans-serif); letter-spacing: .16px; }
.flk > * { pointer-events: auto; }

/* ---- the bar */
.flk-bar { position: relative; display: flex; align-items: center; gap: 8px; width: min(640px, 100%); height: 52px; padding: 6px 6px 6px 16px;
  border-radius: 999px; background: var(--flk-panel); box-shadow: inset 0 0 0 1px var(--flk-line), var(--flk-shadow); touch-action: pan-x; }
.flk-bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--flk-halo); opacity: .55; pointer-events: none;
  transition: opacity .45s var(--flk-ease); }
.flk-bar:focus-within::before { opacity: .9; }
.flk[data-state="working"] .flk-bar::before, .flk[data-state="needs-you"] .flk-bar::before { animation: flk-breathe 3.2s ease-in-out infinite; }
@keyframes flk-breathe { 0%, 100% { opacity: .38; } 50% { opacity: .88; } }
.flk-home { flex: none; width: 28px; height: 22px; }   /* the Volare mark sits here, drawn on the flock's canvas (js/flock-presence.js) */
.flk-bar input { flex: 1; min-width: 0; height: 40px; padding: 0 4px; border: 0; background: none; outline: none; box-shadow: none; color: var(--flk-tx); font: inherit; font-size: 14px; }
.flk-bar input::placeholder { color: var(--flk-tx-2); }
.flk-send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--flk-accent); color: #fff; cursor: pointer;
  transition: opacity .2s var(--flk-ease); }
html[data-theme="dark"] .flk-send { color: var(--dk-t-1c1c1e, #1C1C1E); }
.flk-send:disabled { opacity: .35; cursor: default; }
.flk-stop { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--flk-inset); color: var(--flk-tx); font: 500 13px/1 inherit; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--flk-line); }
.flk-stop[hidden] { display: none; }
.flk :focus-visible { outline: 2px solid var(--flk-accent); outline-offset: 2px; }
.flk-bar input:focus-visible { outline: none; }

/* ---- the drawer above it (desktop) / the sheet (phone) */
/* a fixed height, so a new thought never moves what is already there (no layout shift: the body scrolls instead);
   always laid out and painted (opacity 0, inert, no pointer) so opening it is a compositor-only fade and slide */
.flk-sheet { order: -1; width: min(560px, 100%); height: min(56vh, 520px); margin-bottom: 12px; display: flex; flex-direction: column;
  border-radius: 16px; background: var(--flk-panel); box-shadow: inset 0 0 0 1px var(--flk-line), var(--flk-shadow);
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); transform-origin: 50% 100%; pointer-events: none; will-change: transform, opacity;
  transition: opacity .28s var(--flk-ease), transform .32s var(--flk-ease); }
.flk[data-open="1"] .flk-sheet { opacity: 1; transform: none; pointer-events: auto; }
.flk[data-open="0"] .flk-sheet * { pointer-events: none; }
.flk-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 10px 8px 16px; touch-action: none; }
.flk-grip { display: none; }
.flk-title { margin: 0; font-weight: 500; font-size: 14px; }
.flk-status { margin: 0 auto 0 0; color: var(--flk-tx-2); font-size: 12px; }
.flk-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--flk-tx-2); cursor: pointer; }
.flk-x:hover { background: var(--flk-inset); }
.flk-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 8px; overscroll-behavior: contain; }
.flk-empty { margin: 6px 0 0; color: var(--flk-tx-2); font-size: 14px; }
.flk-empty[hidden] { display: none; }
.flk-foot { flex: none; padding: 2px 16px 14px; box-shadow: 0 -1px 0 var(--flk-line); }
.flk-kick { margin: 10px 0 6px; color: var(--flk-tx-2); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.flk-run[hidden], .flk-try[hidden] { display: none; }
.flk-me { justify-self: end; width: fit-content; max-width: 85%; margin: 10px 0 6px auto; padding: 8px 12px; border-radius: 14px 14px 4px 14px;
  background: var(--flk-accent); color: #fff; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
html[data-theme="dark"] .flk-me { color: var(--dk-t-1c1c1e, #1C1C1E); }
.flk-me[hidden] { display: none; }
.flk-turn { padding-bottom: 10px; margin-bottom: 4px; box-shadow: 0 1px 0 var(--flk-line); }
.flk-old .flk-st { color: var(--flk-tx-2); }
.flk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.flk-step { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: baseline; gap: 8px; padding: 6px 0; }
.flk-dot { position: relative; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--flk-accent); opacity: .35; }
.flk-step[data-status="working"] .flk-dot { animation: flk-pulse 1.2s ease-in-out infinite; }
.flk-step[data-status="done"] .flk-dot { opacity: 1; }
.flk-step[data-status="needs-you"] .flk-dot { opacity: 1; box-shadow: 0 0 0 3px var(--flk-accent-soft); }
@keyframes flk-pulse { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: .9; transform: scale(1.1); } }
.flk-st { overflow-wrap: anywhere; }
.flk-step[data-status="working"] .flk-st { color: var(--flk-tx-2); }
.flk-ms { color: var(--flk-tx-2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flk-go { color: var(--flk-accent); font-size: 12px; font-weight: 500; text-decoration: none; }
.flk-go:hover { text-decoration: underline; }
/* a done step's extras sit on their own lines under the step text (the grid's text column onward) */
.flk-sw, .flk-undo, .flk-undone { grid-column: 2 / -1; justify-self: start; }
.flk-sw { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.flk-sw i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--flk-line); }
.flk-undo { padding: 0; border: 0; background: none; color: var(--flk-accent); font: 500 12px/1.5 inherit; cursor: pointer; }
.flk-undo:hover { text-decoration: underline; }
.flk-undone { color: var(--flk-tx-2); font-size: 12px; }
.flk-card { margin: 10px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--flk-inset); box-shadow: inset 0 0 0 1px var(--flk-line);
  animation: flk-in .3s var(--flk-ease) both; }
.flk-card-t { margin: 0; font-weight: 500; font-size: 14px; }
.flk-card-d { margin: 4px 0 0; color: var(--flk-tx-2); }
.flk-card-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@keyframes flk-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
.flk-ans { margin: 10px 0 0; animation: flk-in .3s var(--flk-ease) both; }
.flk-ans p { margin: 0; font-size: 14px; line-height: 1.55; }
.flk-ans p + p, .flk-ans p + ul:not(.flk-src), .flk-ans p + ol, .flk-ans ul + p, .flk-ans ol + p { margin-top: 8px; }
.flk-ans > ul:not(.flk-src), .flk-ans > ol { margin: 4px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.flk-ans > ol li + li, .flk-ans > ul:not(.flk-src) li + li { margin-top: 2px; }
.flk-ans strong { font-weight: 600; }
.flk-ans code { font-size: 13px; padding: 0 4px; border-radius: 4px; background: var(--flk-inset); }
.flk-src { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.flk .flk-src a.link, .flk .flk-src a.link:visited { color: var(--flk-accent); }
html[data-theme="dark"] .flk .rs-btn:not(.rs-btn--primary) { background: var(--flk-inset); color: var(--flk-tx); box-shadow: inset 0 0 0 1px var(--flk-line); }
html[data-theme="dark"] .flk .rs-btn--primary { background: var(--flk-accent); color: var(--dk-t-1c1c1e, #1C1C1E); }
.flk-try { margin: 10px 0 0; }
.flk-try p { margin: 0 0 8px; font-size: 14px; }
.flk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.flk-chip { cursor: pointer; }
html[data-theme="dark"] .flk-chip { background: var(--flk-inset); color: var(--flk-tx); box-shadow: inset 0 0 0 1px var(--flk-line); }
.flk-note { margin: 12px 0 0; color: var(--flk-tx-2); font-size: 12px; }

/* a step's link lands here: a ring on what changed, no motion */
.flk-ring { box-shadow: 0 0 0 2px var(--flk-panel), 0 0 0 4px var(--flk-accent) !important; border-radius: 10px; }

@media (max-width: 760px) {
  .flk { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .flk-bar { width: 100%; }
  .flk-sheet { width: 100%; height: 48vh; max-height: none; margin-bottom: 10px; }
  .flk-grip { display: block; position: absolute; left: 50%; top: 5px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--flk-line); }
  .flk-head { padding-top: 16px; }
}

/* ---- the introduction */
.flk-intro { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; background: color-mix(in srgb, var(--rs-canvas, var(--dk-b-f3f2ed, #F3F2ED)) 97%, transparent);
  opacity: 0; transition: opacity .32s var(--flk-ease); }
html[data-theme="dark"] .flk-intro { background: rgba(28,28,30,.97); }
.flk-intro.on { opacity: 1; }
.flk-in-stage { position: relative; width: min(520px, calc(100vw - 32px)); height: 300px; color: var(--flk-tx); text-align: center; }
.flk-in-spot { position: absolute; left: 50%; top: 40px; width: 2px; height: 2px; }
.flk-in-line { position: absolute; left: 0; right: 0; top: 96px; margin: 0; font-size: 20px; line-height: 1.4; font-weight: 500; opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity .5s var(--flk-ease), transform .5s var(--flk-ease); }
.flk-intro[data-scene="line"] .flk-in-line { opacity: 1; transform: none; }
.flk-in-v { position: absolute; left: 0; right: 0; top: 96px; display: grid; justify-items: center; gap: 12px; opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity .45s var(--flk-ease), transform .45s var(--flk-ease); }
.flk-in-v p { margin: 0; font-size: 16px; font-weight: 500; }
.flk-intro[data-scene="ask"] [data-v="ask"], .flk-intro[data-scene="steps"] [data-v="steps"],
.flk-intro[data-scene="confirm"] [data-v="confirm"], .flk-intro[data-scene="wheel"] [data-v="wheel"] { opacity: 1; transform: none; }
.flk-in-bar { width: min(380px, 100%); height: 44px; display: flex; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--flk-panel);
  box-shadow: inset 0 0 0 1px var(--flk-line), var(--flk-halo); overflow: hidden; }
.flk-in-type { position: relative; display: inline-block; white-space: nowrap; }
.flk-in-type::after { content: ""; position: absolute; inset: -2px -4px; background: var(--flk-panel); transform-origin: 100% 50%; }
.flk-intro[data-scene="ask"] .flk-in-type::after { animation: flk-type 1.6s steps(22, end) .3s forwards; }
@keyframes flk-type { to { transform: scaleX(0); } }
.flk-in-steps { list-style: none; margin: 0; padding: 12px 16px; display: grid; gap: 6px; text-align: left; border-radius: 12px; background: var(--flk-panel); box-shadow: inset 0 0 0 1px var(--flk-line); }
.flk-in-steps li { opacity: 0; transform: translate3d(0, 6px, 0); }
.flk-intro[data-scene="steps"] .flk-in-steps li { animation: flk-in .4s var(--flk-ease) forwards; }
.flk-intro[data-scene="steps"] .flk-in-steps li + li { animation-delay: .9s; }
.flk-in-card { display: grid; gap: 8px; padding: 12px 16px; border-radius: 12px; background: var(--flk-panel); box-shadow: inset 0 0 0 1px var(--flk-line); }
.flk-in-card span { justify-self: center; padding: 6px 14px; border-radius: 999px; background: var(--flk-accent); color: #fff; font-size: 13px; }
.flk-in-pill { padding: 8px 18px; border-radius: 999px; background: var(--flk-inset); box-shadow: inset 0 0 0 1px var(--flk-line); font-weight: 500; }
.flk-in-skip { position: absolute; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .flk-bar::before, .flk[data-state="working"] .flk-bar::before, .flk[data-state="needs-you"] .flk-bar::before { animation: none; transition: none; }
  .flk-sheet, .flk[data-open="1"] .flk-sheet, .flk-intro, .flk-in-line, .flk-in-v { transition: none; transform: none; }
  .flk-step[data-status="working"] .flk-dot, .flk-card, .flk-ans, .flk-in-steps li { animation: none; opacity: 1; transform: none; }
  .flk-in-type::after, .flk-intro[data-scene="ask"] .flk-in-type::after { animation: none; transform: scaleX(0); }
}
@media print { .flk, .flk-canvas, .flk-intro { display: none !important; } }