/* ChatFlow Flows list (#flow-list-view, design A). Needs tokens.css, components.css (rows,
   chips, folders, list states, menu, dialog) and chrome.css (.cf-page) first. Page header
   (one primary: New Flow; New Folder), then the folders and the flows in no folder, each a
   card of shared rows: the flow name over its step count and timezone, then its controls
   (campaign, the two offer pickers, the Live switch with its word) and Edit plus More.
   Colours come from tokens only, so night needs no rules here. Class names are flw-* (and the
   shared fold-* / list-*) so the old night layer's .flow-list, .flow-card, .folder-card,
   .empty-state, .toggle-slider and .offers-popover rules never reach this view. (fl-* is
   Funnel Lab's prefix.)

   Status is a word in its status colour (colour language, 2026-09-30): Live (green) when the
   flow is switched on AND on a campaign, Not Live (amber) when it is switched on with no
   campaign, Off (grey) when it is switched off. The row's switch takes the same colour when on
   (green, like the old list's toggles, or amber). In the Edit Block panel a switch that is a
   status (AI replies: Active) is green too; one that is a setting (Wait for a reply, Max
   messages) stays blue. Chatters see a View Only chip instead of the controls they cannot use.

   The list stands on the canvas (.cf-page.cf-canvas in chrome.css: #F0F2F5 by day, --bg by
   night), as the old Flows list stood its cards on a grey page: folders, the flows in no folder,
   the skeleton and the empty state are cards with the soft card shadow (components.css), and New
   Folder, standing on the canvas itself, is raised by day. */

/* The page frame of Settings: the header spans the page, the content stops at 1200px */
.flw-page > :not(.page-head) { max-width: 1200px; }

/* ---------- Flow rows (the shared .row) ---------- */
.flw-row { gap: 16px; }
/* The name is the row's identifier: it keeps at least this much room beside the controls */
.flw-row .row-main { min-width: 160px; }
.flw-row[draggable="true"] { cursor: grab; }
.flw-row[draggable="true"]:active { cursor: grabbing; }
.flw-row .row-actions button { cursor: pointer; }

/* Controls between the name and Edit/More: campaign, Offers, 2nd Link, Live. The campaign
   select grows into the room the name leaves (up to 320px) and ends long names with an
   ellipsis; its title holds the whole name. */
.flw-controls { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.flw-controls > :not(.flw-camp) { flex: none; }
.flw-camp { flex: 0 1 320px; width: auto; min-width: 208px; height: var(--control-h); text-overflow: ellipsis; }
.flw-controls .chip { padding: 4px 8px; }

/* The two offer pickers: a neutral small button with the count in tabular figures */
.flw-pick > .ic:last-child { margin-right: -4px; color: var(--ink-2); }
.flw-pick-n { min-width: 8px; font-weight: var(--fw-regular); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Live switch: a checkbox with role="switch", the word beside it ---------- */
.flw-live { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-h-sm); cursor: pointer; }
/* The word keeps the width of its longest form (Not Live), so the controls of every row line up */
.flw-live-word { min-width: 56px; text-align: right; white-space: nowrap; font: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink); }
.flw-live-word.is-ok { color: var(--ok); }
.flw-live-word.is-warn { color: var(--warn); }
.flw-live-word.is-off { font-weight: var(--fw-regular); color: var(--idle); }
.flw-switch { position: relative; flex: none; display: inline-flex; width: 40px; height: 24px; }
.flw-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.flw-switch-track { position: relative; width: 40px; height: 24px; box-sizing: border-box; border-radius: 12px; background: var(--edge-field); transition: background .15s ease; }
.flw-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .24); transition: transform .15s ease; }
.flw-switch input:checked + .flw-switch-track { background: var(--reply); }
/* The row's switch, on: green when Live, amber when on with no campaign (3.39:1 or better as a
   shape, day and night; the white knob 5.02:1 on both) */
.flw-live.is-live .flw-switch input:checked + .flw-switch-track { background: var(--ok-solid); }
.flw-live.is-nocamp .flw-switch input:checked + .flw-switch-track { background: var(--warn-solid); }
.flw-switch input:checked + .flw-switch-track::after { transform: translateX(16px); }
.flw-switch input:focus-visible + .flw-switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.flw-switch input[aria-busy="true"] { cursor: progress; }

/* ---------- Offer pickers: a popover on the menu surface with check rows ---------- */
.flw-picker { width: 320px; padding: 6px 6px 8px; }
/* With no control in it, the popover itself holds focus (so Esc and Tab close it): no ring
   around the whole surface */
.flw-picker[tabindex="-1"]:focus { outline: none; }
.flw-picker .menu-head { padding-top: 4px; }
.flw-picker-note { margin: 0; padding: 0 8px 6px; font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--ink-2); }
.flw-picker-list { margin: 0; padding: 0; border: 0; }
.flw-offer { align-items: flex-start; gap: 10px; padding: 6px 8px; border-radius: 6px; }
.flw-offer:hover { background: var(--fill); }
.flw-offer input { margin-top: 1px; }
.flw-offer-text { display: flex; flex-direction: column; min-width: 0; }
.flw-offer-name { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.flw-offer-meta { font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.flw-picker-empty { margin: 0; padding: 6px 8px 4px; font: var(--fw-regular) var(--fs-label)/var(--lh-label) var(--font); color: var(--ink-2); }
.flw-picker-tpl { margin: 6px 2px 0; padding: 10px 6px 0; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .flw-switch-track, .flw-switch-track::after { transition: none; }
}

/* ---------- Narrow lists: the controls take their own line under the name ----------
   The list is a size container, so the switch follows the width the list really has (sidebar
   shown or hidden, laptop, tablet or phone), not the window's. Beside the name, the controls
   and Edit/More take about 600px; under 860px they would squeeze the name, so they wrap onto
   a second line (review flows-1: a phone gave the name 0 to 27px). */
#flow-list-items { container: flw-list / inline-size; }
@container flw-list (max-width: 859px) {
  .flw-row { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
  .flw-row .row-main { flex: 1 1 0; }
  .flw-row .row-title { white-space: normal; overflow-wrap: anywhere; }
  .flw-row .row-actions { order: 2; gap: 4px; }
  .flw-controls { order: 3; flex: 1 1 100%; flex-wrap: wrap; row-gap: 8px; }
  .flw-camp { flex: 1 1 200px; min-width: 0; max-width: 320px; }
}
@container flw-list (max-width: 479px) {
  .flw-camp { flex-basis: 100%; max-width: none; }
  .flw-live { margin-left: auto; }
}

/* ---------- The editor bar on narrow windows (until the editor phase) ----------
   Review flows-1: on a 393pt phone the editor's controls stacked inside the 45px bar and
   "← Flows", the only way back to the list, sat above the screen. Layout only: no control
   changes its look.
   - 481 to 767px: the controls wrap as they always did, but from the top of the bar, so the
     first row ("← Flows" first) stays in the bar and the rest hang below it, all visible.
   - Up to 480px (phones): one line that scrolls sideways (a swipe, the scrollbar, or the
     mouse wheel, which the page maps to sideways), "← Flows" first, and an edge fade while
     more controls sit past the right edge. */
@media (max-width: 767px) {
  #editor-buttons:not(.hidden) { flex: 1 1 auto; min-width: 0; align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 7px 0; }
  #editor-buttons > * { flex: none; }
}
@media (max-width: 480px) {
  #editor-buttons:not(.hidden) { align-self: stretch; flex-wrap: nowrap; padding: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  #editor-buttons:not(.hidden)::after { content: ""; position: sticky; right: 0; flex: none; align-self: stretch; width: 24px; margin-left: -4px; background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; }
}