/* Interactive product demo shown inside the dark hero panel. Tokens mirror apps/web/src/app/styles.css (light). */
.fdemo {
  --fd-bg:#fff; --fd-side:rgb(245 245 245); --fd-side-on:rgb(232 232 232); --fd-line:#ededed; --fd-ink:#1a1a1a; --fd-text:#333; --fd-muted:#737373;
  --fd-chip:#f5f5f5; --fd-ok:#1a9e5a; --fd-wait:#d58a00; --fd-acc:#171717; --fd-r:10px;
  position:relative; display:grid; grid-template-columns:232px 1fr; aspect-ratio:1191/739;
  font:13px/1.45 -apple-system, BlinkMacSystemFont, "Inter", "Söhne", "Helvetica Neue", Arial, sans-serif;
  color:var(--fd-text); background:var(--fd-bg); text-align:left; overflow:hidden; -webkit-font-smoothing:antialiased;
}
.fdemo *, .fdemo *::before, .fdemo *::after { box-sizing:border-box; }
.fdemo :where(button) { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:default; }
.fdemo svg { flex:none; }
.fdemo img { width:auto; height:auto; }

/* sidebar — space-switcher.tsx / app-sidebar.tsx / sidebar-sessions.tsx / account switcher, as rendered on staging */
.fd-side { background:var(--fd-side); padding:8px 8px 10px; display:flex; flex-direction:column; gap:1px; overflow:hidden; }
.fd-brand { display:flex; align-items:center; gap:8px; height:32px; padding:0 8px; margin-bottom:8px; color:var(--fd-ink); font-size:13px; }
.fd-brand img { width:auto; height:16px; }
.fd-brand-tools { margin-left:auto; display:inline-flex; gap:12px; color:var(--fd-muted); }
.fd-brand-tools svg { width:14px; height:14px; }
.fd-nav { display:flex; align-items:center; gap:10px; height:30px; padding:0 10px; border-radius:8px; color:var(--fd-text); white-space:nowrap; font-size:13px; }
.fd-nav svg { width:14px; height:14px; color:var(--fd-text); }
.fd-nav.on { background:var(--fd-side-on); color:var(--fd-ink); }
.fd-nav-n { margin-left:auto; color:var(--fd-muted); font-size:12px; }
.fd-nav-caret { margin-left:auto; display:inline-flex; color:var(--fd-muted); }
.fd-nav-caret svg { width:12px; height:12px; }
.fd-space { display:flex; align-items:center; gap:10px; height:30px; margin:10px 0 2px; padding:0 8px; color:var(--fd-ink); font-size:13px; }
.fd-space-i { width:14px; height:14px; border-radius:3px; background:#fff; border:1px solid #dcdcdc; font-size:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--fd-ink); }
.fd-sess-h { display:flex; align-items:center; justify-content:space-between; height:30px; margin-top:14px; padding:0 8px; font-size:13px; color:var(--fd-ink); }
.fd-sess-h b { font-weight:500; }
.fd-sess-tools { display:inline-flex; gap:12px; color:var(--fd-muted); }
.fd-sess-tools svg { width:13px; height:13px; }
.fd-sess { display:flex; align-items:center; gap:7px; height:28px; padding:0 8px; color:var(--fd-muted); font-size:12.5px; white-space:nowrap; }
.fd-sess > svg { width:13px; height:13px; }
.fd-sess small { font-size:11.5px; }
.fd-user { margin-top:auto; display:flex; align-items:center; gap:10px; height:40px; padding:0 8px; color:var(--fd-text); }
.fd-user .fd-avatar { width:26px; height:26px; font-size:11px; background:#4a3b36; color:#fff; }
.fd-user-t { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.fd-user-t b { font-weight:400; color:var(--fd-ink); font-size:12.5px; }
.fd-user-t small { color:var(--fd-muted); font-size:11.5px; }
.fd-avatar { width:18px; height:18px; border-radius:50%; background:#e3e3e3; color:#444; font-size:10px; font-weight:500; display:inline-flex; align-items:center; justify-content:center; flex:none; }

/* main — SidebarInset: content is a bordered rounded card inset from the sidebar, with a 48px header (back, breadcrumb, …, Agent) */
.fd-main { position:relative; display:flex; flex-direction:column; min-width:0; background:var(--fd-side); padding:6px 8px 8px 0; }
.fd-inset { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; background:#fff; border:1px solid #e3e3e3; border-radius:8px; overflow:hidden; }
.fd-top { display:flex; align-items:center; justify-content:space-between; gap:12px; height:44px; padding:0 14px; border-bottom:1px solid var(--fd-line); flex:none; }
.fd-top-l { display:inline-flex; align-items:center; gap:10px; color:var(--fd-muted); min-width:0; }
.fd-top-l > svg { width:14px; height:14px; flex:none; }
.fd-crumb { display:inline-flex; align-items:center; gap:8px; color:var(--fd-muted); font-size:12.5px; white-space:nowrap; overflow:hidden; }
.fd-crumb b { color:var(--fd-ink); font-weight:500; }
.fd-crumb span + span::before { content:"›"; margin-right:8px; color:#bdbdbd; }
.fd-btn.ghost { border-color:transparent; color:var(--fd-ink); }
.fd-btn.icon { padding:0 7px; }

/* stage: thread (left) + artifact panel (right), like the app panel in features/thread. Starts as a single centered thread, splits once the first artifact opens. */
.fd-stage { position:relative; flex:1; min-height:0; display:grid; grid-template-columns:1fr 0fr; transition:grid-template-columns .6s cubic-bezier(.2,.7,.2,1); }
.fd-stage.split { grid-template-columns:minmax(0,45fr) minmax(0,55fr); }
.fd-work { container-type:inline-size; position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; opacity:0; transition:opacity .4s ease .15s; }
.fd-stage.split .fd-work { opacity:1; border-left:1px solid var(--fd-line); }
.fd-stage:not(.split) .fd-thread, .fd-stage:not(.split) .fd-composer, .fd-stage:not(.split) .fd-published { width:min(100%, 640px); margin-left:auto; margin-right:auto; }

/* artifact tabs — app-panel-tabs.tsx: 48px header, pill tabs, + / expand / close on the right */
.fd-work-h { display:flex; align-items:center; gap:8px; height:44px; padding:0 12px; border-bottom:1px solid var(--fd-line); flex:none; }
.fd-tabs { display:flex; gap:4px; min-width:0; flex:1; overflow-x:auto; scrollbar-width:none; }
.fd-tabs::-webkit-scrollbar { display:none; }
.fd-tab { position:relative; flex:none; display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 10px; border-radius:8px; color:var(--fd-muted); font-size:12.5px; white-space:nowrap; cursor:pointer; animation:fd-tabin .4s cubic-bezier(.2,.7,.2,1) both; overflow:hidden; }
.fd-tab[hidden] { display:none; }
.fd-tab svg { width:13px; height:13px; }
.fd-tab:hover { color:var(--fd-ink); background:#fafafa; }
.fd-tab[aria-selected="true"] { color:var(--fd-ink); background:var(--fd-chip); }
.fd-tab:focus-visible { outline:2px solid #8a8a8a; outline-offset:-2px; }
.fd-tab.fd-new span::after { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--fd-wait); margin-left:6px; vertical-align:2px; }
.fd-tab-bar { position:absolute; left:8px; bottom:0; height:2px; width:0; border-radius:1px; background:#c8c8c8; opacity:0; }
.fd-tab.playing .fd-tab-bar { opacity:1; width:calc(100% - 16px); transition:width var(--dur, 0s) linear; }
.fd-tab[aria-selected="true"].playing .fd-tab-bar { background:var(--fd-ink); }
.fd-work-tools { margin-left:auto; display:inline-flex; gap:12px; color:var(--fd-muted); }
.fd-work-tools svg { width:13px; height:13px; }
@keyframes fd-tabin { from { opacity:0; transform:translateY(6px); } }
.fd-panes { position:relative; flex:1; min-height:0; }
.fd-pane { position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column; animation:fd-fade .35s ease both; }
.fd-pane[hidden] { display:none; }
@keyframes fd-fade { from { opacity:0; } }

/* thread — features/thread: avatar + name row, grey rounded-2xl bubble, copy + time under each message */
.fd-agent { display:flex; flex-direction:column; min-width:0; min-height:0; padding:0 16px 14px; }
.fd-thread { margin:0 -16px; }
.fd-thread { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; gap:14px; padding:4px 16px 12px; overflow:hidden; }
.fd-thread > * { flex:none; }
.fd-thread::after { content:""; flex:1 1 0; min-height:0; }
.fd-thread [data-s]:not(.on) { display:none; }
.fd-thread [data-s].on { animation:fd-fade .35s ease both; transform:none; transition:none; }
.fd-stage:not(.split) .fd-thread { padding:28px 16px 12px; }

.fd-day { text-align:center; color:var(--fd-muted); font-size:11.5px; }
.fd-bubble { align-self:flex-end; background:#f3f3f3; color:var(--fd-ink); padding:8px 12px; border-radius:12px; max-width:88%; min-height:20px; line-height:1.45; }

.fd-reply { display:flex; gap:10px; min-width:0; }
.fd-reply > img { width:20px; height:20px; flex:none; }
.fd-reply-b { display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.fd-reply-h { color:var(--fd-ink); font-weight:500; line-height:20px; }
.fd-worked { display:flex; align-items:center; gap:7px; color:var(--fd-muted); font-size:12.5px; }
.fd-worked > span { display:inline-flex; align-items:center; gap:6px; }
.fd-worked svg { width:11px; height:11px; }
.fd-trace { display:flex; flex-direction:column; gap:5px; margin:2px 0 2px; padding-left:10px; border-left:1px solid var(--fd-line); }
.fd-tr { display:flex; gap:10px; align-items:baseline; font-size:12px; color:var(--fd-muted); line-height:1.4; }
.fd-tr b { color:var(--fd-ink); font-weight:500; }
.fd-tr-t { flex:none; font-size:11px; font-variant-numeric:tabular-nums; color:#a3a3a3; width:48px; }
.fd-summary { display:flex; flex-direction:column; gap:8px; color:var(--fd-ink); }
.fd-summary p { margin:0; }
.fd-summary ul { margin:0; padding-left:14px; display:flex; flex-direction:column; gap:3px; color:var(--fd-text); }
.fd-summary li b { color:var(--fd-ink); font-weight:500; }
.fd-found { font-size:12px; color:var(--fd-muted); display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
.fd-found > span { display:inline-flex; align-items:center; gap:6px; }
.fd-found svg { width:11px; height:11px; }
.fd-braces { font-size:11px; letter-spacing:-.05em; }
.fd-caserow { display:grid; grid-template-columns:auto auto 1fr auto; gap:8px; align-items:center; padding:7px 10px; font-size:12px; color:var(--fd-ink); }
.fd-caserow .fd-id { color:var(--fd-muted); }
.fd-caserow-t { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-caserow-r { display:inline-flex; align-items:center; gap:8px; color:var(--fd-muted); }
.fd-caserow-r svg { width:12px; height:12px; }
.fd-caserow-r .fd-avatar { width:16px; height:16px; font-size:10px; border-radius:4px; }
.fd-when { font-size:11px; }
.fd-pri { width:12px; height:12px; border-radius:50%; border:1.5px solid #bfbfbf; display:inline-flex; }
.fd-pri.done { border:0; color:var(--fd-ok); }
.fd-pri.done svg { width:12px; height:12px; }

/* step reveal */
.fdemo [data-s] { opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s ease; }
.fdemo [data-s].on { opacity:1; transform:none; }
.fdemo .fd-gone { display:none !important; }
.fdemo [data-type] { white-space:pre-wrap; }
.fd-caret::after { content:""; display:inline-block; width:1px; height:1em; background:var(--fd-ink); vertical-align:-2px; margin-left:1px; animation:fd-blink 1s steps(1) infinite; }
@keyframes fd-blink { 50% { opacity:0; } }

/* generic bits */
.fd-pill { display:inline-flex; align-items:center; gap:5px; padding:1px 8px; border-radius:999px; background:var(--fd-chip); color:var(--fd-text); font-size:11px; white-space:nowrap; }
.fd-pill.ok { color:var(--fd-ok); background:#e9f7ef; }
.fd-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.fd-check { width:16px; height:16px; color:var(--fd-ink); }
.fd-ring { width:16px; height:16px; color:#8a8a8a; }
.fd-spin { width:12px; height:12px; flex:none; border:1.5px solid #d0d0d0; border-top-color:var(--fd-ink); border-radius:50%; animation:fd-spin .8s linear infinite; }
@keyframes fd-spin { to { transform:rotate(360deg); } }
.fd-card { border:1px solid var(--fd-line); border-radius:var(--fd-r); background:#fff; }
.fd-btn { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:6px; border:1px solid #e3e3e3; font-size:12px; color:var(--fd-ink); background:#fff; white-space:nowrap; }
.fd-btn svg { width:12px; height:12px; }
.fd-btn.primary { background:var(--fd-acc); border-color:var(--fd-acc); color:#fff; }
.fd-tools { display:inline-flex; gap:8px; }
.fd-composer { margin:auto 0 0; border:1px solid var(--fd-line); border-radius:var(--fd-r); padding:10px 12px 8px; display:flex; flex-direction:column; gap:12px; color:var(--fd-muted); background:#fafafa; font-size:12.5px; }
.fd-composer-row { display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.fd-composer-left, .fd-composer-right { display:inline-flex; align-items:center; gap:10px; }
.fd-composer svg { width:12px; height:12px; }
.fd-mute { display:inline-flex; align-items:center; gap:6px; }
.fd-mute img { width:auto; height:14px; }
.fd-internal { display:inline-flex; align-items:center; gap:6px; }
.fd-internal svg { width:12px; height:12px; }
.fd-send { width:24px; height:24px; border-radius:50%; background:#e8e8e8; color:#666; display:inline-flex; align-items:center; justify-content:center; }
.fd-send svg { width:11px; height:11px; }

/* workflow run card — run-workflow-tool-renderer.tsx */
.fd-wf { padding:10px 14px 12px; display:flex; flex-direction:column; gap:6px; }
.fd-wf-h { display:flex; align-items:center; justify-content:space-between; }
.fd-wf-who { display:inline-flex; align-items:center; gap:7px; color:var(--fd-ink); font-weight:500; font-size:12.5px; }
.fd-wf-who img { width:16px; height:16px; }
.fd-wf-who small { color:var(--fd-muted); font-weight:400; font-size:11px; }
.fd-wf-who small:first-of-type { font-size:10px; font-weight:500; letter-spacing:.04em; }
.fd-wf-t { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--fd-line); font-size:12.5px; color:var(--fd-ink); }
.fd-wf-t b { font-weight:500; }
.fd-wf-t b small { color:var(--fd-muted); font-weight:400; font-size:12px; margin-left:4px; }
.fd-wf-r { color:var(--fd-muted); font-size:12px; white-space:nowrap; }
.fd-wf-r b { color:var(--fd-text); font-weight:400; margin-left:6px; }
.fd-steps { display:flex; flex-direction:column; gap:0; padding-top:2px; }
.fd-step { position:relative; display:flex; align-items:center; gap:9px; min-height:25px; font-size:12.5px; color:var(--fd-ink); }
.fd-step > span:first-child { display:inline-flex; }
.fd-step + .fd-step::before, .fd-step + .fd-approval + .fd-step::before, .fd-approval::before { content:""; position:absolute; left:7.5px; top:-12px; height:12px; width:1px; background:#d4d4d4; }
.fd-step.muted { color:var(--fd-muted); }
.fd-step-r { margin-left:auto; color:var(--fd-muted); font-size:11.5px; white-space:nowrap; }
.fd-approval { position:relative; margin:1px 0 1px 25px; padding:8px 10px 9px; border-radius:6px; border:1px solid var(--fd-line); background:#fff; font-size:12.5px; color:var(--fd-ink); display:flex; flex-direction:column; gap:7px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.fd-approval::before { left:-17.5px; top:0; height:100%; }
.fd-approval b { font-weight:500; }
.fd-waiting { display:flex; align-items:center; gap:6px; color:var(--fd-muted); font-size:12px; }
.fd-waiting .fd-avatar { width:16px; height:16px; font-size:10px; }
.fd-actions { display:flex; justify-content:flex-end; gap:6px; margin-top:2px; }
.fd-approved { display:flex; align-items:center; gap:6px; color:var(--fd-ok); font-size:12px; }
.fd-approved b { color:var(--fd-ink); }
.fd-approved .fd-check { color:var(--fd-ok); width:14px; height:14px; }
.fd-helper { color:var(--fd-muted); font-size:11.5px; margin:-2px 0 0 25px; }

/* Workflow pane — workflow-diagram.css */
.fd-build { flex:1; display:flex; flex-direction:column; min-height:0; }
.fd-canvas-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px; border-bottom:1px solid var(--fd-line); }
.fd-canvas-h > span:first-child { display:inline-flex; align-items:center; gap:10px; min-width:0; }
.fd-canvas-h b { font-size:13.5px; color:var(--fd-ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-canvas { flex:1; min-height:0; padding:22px 20px; background:#fafafa radial-gradient(circle, #e0e0e0 1px, transparent 1px) 0 0 / 18px 18px; overflow:hidden; display:flex; justify-content:center; }
.fd-nodes { display:flex; flex-direction:column; align-items:stretch; width:min(100%, 380px); }
.fd-node { display:flex; gap:9px; align-items:center; padding:8px 11px; background:#fff; border:1px solid var(--fd-line); border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,.03); }
.fd-node .fd-nico { width:24px; height:24px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; flex:none; color:var(--fd-ink); background:#f3f3f3; }
.fd-node .fd-nico svg { width:14px; height:14px; }
.fd-nico.okta { background:#e8f1ff; color:#0b5cad; }
.fd-nico.sf { background:#e6f3fb; color:#0a7ab8; }
.fd-nico.slack { background:#fcebf1; color:#b8205a; }
.fd-nico.appr { background:#fff4e0; color:#b26f00; }
.fd-nico.trig { background:#efeefc; color:#5a48c4; }
.fd-node-t { display:flex; flex-direction:column; min-width:0; }
.fd-node b { font-size:13px; line-height:18px; color:var(--fd-ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-node small { color:var(--fd-muted); font-size:11.5px; line-height:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-link { width:1px; height:16px; background:#c9c9c9; margin-left:22px; transform:none; }

/* Approval pane */
.fd-appr { flex:1; min-height:0; overflow:hidden; padding:16px 18px; display:flex; flex-direction:column; gap:12px; max-width:720px; }
.fd-slack { border:1px solid var(--fd-line); border-radius:var(--fd-r); overflow:hidden; background:#fff; }
.fd-slack-h { display:flex; align-items:center; gap:8px; padding:7px 12px; background:#f7f7f7; border-bottom:1px solid var(--fd-line); font-size:11.5px; color:var(--fd-muted); }
.fd-slack-logo { width:10px; height:10px; border-radius:2px; background:conic-gradient(#e01e5a 0 25%, #ecb22e 0 50%, #2eb67d 0 75%, #36c5f0 0); }
.fd-slack-m { display:flex; gap:10px; padding:10px 12px 12px; }
.fd-slack-m img { width:28px; height:28px; border-radius:6px; flex:none; }
.fd-slack-who { color:var(--fd-ink); font-weight:600; font-size:12.5px; display:flex; align-items:baseline; gap:6px; }
.fd-slack-who small { font-weight:400; color:var(--fd-muted); font-size:11px; }
.fd-slack-who small:first-of-type { background:#ececec; color:#555; border-radius:3px; padding:0 3px; font-size:9.5px; font-weight:600; }
.fd-slack-m p { margin:3px 0 8px; color:var(--fd-ink); font-size:12.5px; line-height:1.5; }
.fd-slack-m b { font-weight:600; }
.fd-slack-link { color:#1264a3; }
.fd-slack-btns { display:flex; gap:6px; }
.fd-slack-btns .fd-btn.primary { background:#007a5a; border-color:#007a5a; }

/* Case pane — case-detail-body.tsx: body max-w-3xl + properties rail */
.fd-inbox { flex:1; display:grid; grid-template-columns:1fr 200px; min-height:0; }
.fd-case { padding:16px 22px 14px; display:flex; flex-direction:column; gap:10px; overflow:hidden; min-width:0; }
.fd-case h3 { margin:0; font-size:18px; font-weight:500; color:var(--fd-ink); line-height:1.3; letter-spacing:-.01em; }
.fd-case .fd-sub { color:var(--fd-muted); font-size:12.5px; margin-top:-6px; }
.fd-linked { padding:9px 12px; display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--fd-ink); background:#fcfcfc; }
.fd-linked small { color:var(--fd-muted); font-size:11.5px; }
.fd-linked span { display:inline-flex; align-items:center; gap:6px; }
.fd-linked svg { width:11px; height:11px; }
.fd-act-h { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--fd-ink); margin-top:2px; }
.fd-act-h b { font-weight:500; }
.fd-act-h span { display:inline-flex; align-items:center; gap:5px; color:var(--fd-muted); font-size:12px; }
.fd-act-h svg { width:12px; height:12px; }
.fd-updates { display:flex; align-items:center; gap:6px; color:var(--fd-muted); font-size:12px; padding:0 4px; }
.fd-updates svg { width:11px; height:11px; }
.fd-msg { display:flex; gap:10px; padding:10px 12px; border:1px solid var(--fd-line); border-radius:var(--fd-r); background:#fcfcfc; }
.fd-msg > img { width:20px; height:20px; flex:none; }
.fd-msg-h { font-size:12.5px; color:var(--fd-ink); font-weight:500; display:flex; gap:8px; align-items:center; }
.fd-msg-h small { color:var(--fd-muted); font-weight:400; font-size:11.5px; }
.fd-msg p { margin:3px 0 0; color:var(--fd-text); font-size:12.5px; }
.fd-props { border-left:1px solid var(--fd-line); padding:14px 10px; display:flex; flex-direction:column; gap:8px; font-size:12px; overflow:hidden; background:#fcfcfc; }
.fd-props .fd-card { padding:8px 10px; display:flex; flex-direction:column; gap:1px; }
.fd-props h4 { margin:0 0 4px; font-size:11.5px; color:var(--fd-muted); font-weight:400; }
.fd-props span { display:flex; align-items:center; gap:7px; padding:2px 0; color:var(--fd-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-props span.ok { color:var(--fd-ok); }
.fd-props span.ok .fd-check { color:var(--fd-ok); width:13px; height:13px; }
.fd-props svg { width:13px; height:13px; color:var(--fd-muted); }

/* Automation pane — agents/editor.tsx: centered column, section labels, toolkit + permission rows */
.fd-auto { flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; display:flex; justify-content:center; }
.fd-auto-form { width:min(100%, 520px); padding:16px 20px 20px; display:flex; flex-direction:column; gap:10px; }
.fd-auto-h { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fd-auto-h b { font-size:18px; color:var(--fd-ink); font-weight:500; letter-spacing:-.01em; }
.fd-meta { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--fd-ink); flex-wrap:wrap; }
.fd-meta small { color:var(--fd-muted); font-size:11.5px; }
.fd-meta svg { width:11px; height:11px; color:var(--fd-muted); }
.fd-next { margin-left:auto; display:inline-flex; align-items:center; gap:5px; color:var(--fd-muted); font-size:11.5px; }
.fd-next svg { width:12px; height:12px; }
.fd-toggle { width:28px; height:16px; border-radius:999px; background:#d6d6d6; position:relative; transition:background .3s; flex:none; }
.fd-toggle::after { content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:transform .3s; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.fd-toggle.live { background:var(--fd-ink); }
.fd-toggle.live::after { transform:translateX(12px); }
.fd-field { display:flex; flex-direction:column; }
.fd-field label { font-size:12.5px; color:var(--fd-ink); font-weight:500; margin-bottom:6px; }
.fd-field .fd-card + .fd-card { margin-top:-1px; border-top-left-radius:0; border-top-right-radius:0; }
.fd-field .fd-card:has(+ .fd-card) { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.fd-tool { display:flex; align-items:center; gap:9px; min-height:32px; padding:0 12px; font-size:12.5px; color:var(--fd-ink); background:#fcfcfc; }
.fd-tool.muted { color:var(--fd-muted); }
.fd-tool > svg { width:13px; height:13px; color:var(--fd-muted); }
.fd-tool-r { margin-left:auto; display:inline-flex; align-items:center; gap:10px; color:#a3a3a3; }
.fd-tool-r svg { width:12px; height:12px; }
.fd-tool-r small { color:var(--fd-muted); font-size:11.5px; white-space:nowrap; }
.fd-instr { padding:10px 12px 8px; background:#fcfcfc; }
.fd-instr p { margin:0 0 10px; font-size:12.5px; color:var(--fd-ink); line-height:1.5; }
.fd-model { display:flex; justify-content:flex-end; gap:14px; font-size:12px; color:var(--fd-text); }
.fd-model span { display:inline-flex; align-items:center; gap:4px; }
.fd-model svg { width:11px; height:11px; color:var(--fd-muted); }
.fd-perm { display:flex; align-items:center; gap:8px; min-height:32px; padding:0 12px; font-size:12.5px; background:#fcfcfc; }
.fd-perm b { font-weight:500; color:var(--fd-ink); white-space:nowrap; }
.fd-perm small { color:var(--fd-muted); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* replay + a11y */
.fd-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }


/* overrides for the staging-faithful shell (thread turns, workflow page chrome, case rail, agent editor) */
.fd-turn { display:flex; flex-direction:column; gap:6px; align-items:flex-start; min-width:0; }
.fd-turn-h { display:flex; align-items:center; gap:8px; color:var(--fd-ink); font-weight:500; line-height:20px; }
.fd-turn-h img, .fd-turn-h .fd-avatar { width:20px; height:20px; font-size:10px; }
.fd-turn-h img { width:auto; }
.fd-bubble { align-self:flex-start; margin-left:28px; background:#f3f3f3; color:var(--fd-ink); padding:8px 14px; border-radius:16px; border-top-left-radius:4px; max-width:min(90%, 34rem); }
.fd-meta-row { display:inline-flex; align-items:center; gap:6px; margin-left:28px; color:var(--fd-muted); font-size:11.5px; }
.fd-reply.fd-turn .fd-meta-row { margin-left:0; }
.fd-meta-row svg { width:12px; height:12px; }
.fd-reply { display:flex; flex-direction:column; gap:6px; }
.fd-reply-b { padding-left:28px; flex:none; width:100%; }
.fd-published { display:flex; align-items:center; gap:8px; margin:10px 0 0; padding:9px 12px; border:1px solid var(--fd-line); border-radius:10px; font-size:12.5px; color:var(--fd-ink); }
.fd-published .fd-ring { width:14px; height:14px; }
.fd-published > span { margin-left:auto; display:inline-flex; align-items:center; gap:4px; }
.fd-published svg:last-child { width:11px; height:11px; }
.fd-composer { margin-top:10px; }
/* workflow page */
.fd-wf-top { padding:14px 18px 10px; display:flex; flex-direction:column; gap:8px; flex:none; }
.fd-wf-title { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.fd-wf-title b { font-size:15px; font-weight:600; color:var(--fd-ink); line-height:1.3; min-width:0; }
.fd-wf-desc { margin:0; color:var(--fd-muted); font-size:13px; }
.fd-dd { display:inline-flex; align-items:center; gap:5px; color:var(--fd-muted); font-size:12.5px; white-space:nowrap; }
.fd-dd svg { width:12px; height:12px; }
.fd-seg-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:2px; }
.fd-seg { display:inline-flex; gap:2px; }
.fd-seg > span { padding:0 11px; height:28px; display:inline-flex; align-items:center; border-radius:8px; color:var(--fd-muted); font-size:12.5px; white-space:nowrap; }
.fd-seg > span.on { background:var(--fd-chip); color:var(--fd-ink); }
.fd-seg-sm > span { height:24px; padding:0 8px; font-size:12px; }
.fd-canvas { position:relative; flex:1; min-height:0; margin:0 18px 14px; padding:22px 20px; border:1px solid var(--fd-line); border-radius:8px; background:#fff; overflow:hidden; display:flex; justify-content:center; }
.fd-canvas-mode { position:absolute; top:10px; right:10px; background:#fff; border:1px solid var(--fd-line); border-radius:8px; padding:2px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.fd-nodes { width:min(100%, 256px); align-items:center; }
.fd-node { width:100%; }
.fd-node .fd-nico, .fd-nico.okta, .fd-nico.sf, .fd-nico.slack, .fd-nico.appr, .fd-nico.trig { background:transparent; }
.fd-node b { white-space:normal; }
.fd-node.pill { width:auto; border-radius:999px; padding:7px 16px; gap:8px; }
.fd-node.pill > svg { width:13px; height:13px; }
.fd-node.pill small { color:var(--fd-muted); font-size:12px; }
.fd-link { margin-left:0; }
.fd-zoom { position:absolute; right:12px; bottom:12px; display:flex; flex-direction:column; border:1px solid var(--fd-line); border-radius:6px; background:#fff; overflow:hidden; }
.fd-zoom > * { width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--fd-muted); }
.fd-zoom svg { width:11px; height:11px; }
.fd-zoom i { border-top:1px solid var(--fd-line); border-bottom:1px solid var(--fd-line); }
.fd-zoom i::before { content:""; width:9px; height:1.3px; background:currentColor; }
/* case */
.fd-case h3 { font-size:16px; font-weight:600; }
.fd-case .fd-sub { color:var(--fd-ink); font-size:14px; margin-top:-4px; }
.fd-act-h b { display:inline-flex; align-items:center; gap:8px; }
.fd-act-h b svg { color:var(--fd-muted); }
.fd-act-h .fd-avatar { width:16px; height:16px; font-size:10px; }
.fd-updates-r { margin-left:auto; }
.fd-props .fd-card { padding:10px; border-radius:10px; }
.fd-props h4 { display:flex; align-items:center; gap:4px; }
.fd-props h4 svg { width:11px; height:11px; }
.fd-rail-plus { margin-left:auto; }
.fd-props .fd-rail-plus svg { width:11px; height:11px; }
.fd-mini { width:13px; height:13px; }
@container (max-width: 680px) { .fd-tab svg { display:none; } }
/* agent editor */
.fd-auto-h { align-items:flex-start; }
.fd-auto-h .fd-sub { color:var(--fd-muted); font-size:12.5px; margin-top:2px; }
.fd-field label small { color:var(--fd-muted); font-weight:400; font-size:12.5px; }
.fd-field > .fd-sub { color:var(--fd-muted); font-size:12px; margin:-4px 0 6px; }
.fd-meta-div { width:1px; height:14px; background:#dcdcdc; margin:0 4px; }
.fd-perm small svg { width:10px; height:10px; vertical-align:-1px; margin-left:2px; }

@media (prefers-reduced-motion: reduce) {
  .fdemo [data-s], .fd-toggle, .fd-toggle::after, .fd-stage, .fd-work { transition:none; }
  .fd-spin, .fd-caret::after, .fd-tab, .fd-pane { animation:none; }
  .fd-tab-bar { display:none; }
}
@media (max-width: 1280px) {
  .fd-inbox { grid-template-columns:1fr; }
  .fd-props { display:none; }
  .fd-stage.split { grid-template-columns:minmax(0,42fr) minmax(0,58fr); }
}
@media (max-width: 1100px) {
  .fdemo { grid-template-columns:1fr; aspect-ratio:auto; }
  .fd-side { display:none; }
  .fd-stage { position:relative; inset:auto; min-height:640px; }
  .fd-stage.split { grid-template-columns:minmax(0,40fr) minmax(0,60fr); }
  .fd-main { padding:0; }
  .fd-inset { border:0; border-radius:0; }
}
@media (max-width: 760px) {
  .fdemo { font-size:12px; }
  .fd-stage, .fd-stage.split { display:flex; flex-direction:column; min-height:0; }
  .fd-work { order:2; opacity:1; border-top:1px solid var(--fd-line); }
  .fd-stage.split .fd-work { border-left:0; }
  .fd-stage:not(.split) .fd-work { display:none; }
  .fd-agent { order:1; }
  .fd-thread, .fd-stage:not(.split) .fd-thread { padding:16px 14px 10px; }
  .fd-stage:not(.split) .fd-composer { margin:12px 14px 0; }
  .fd-composer { margin-top:12px; }
  .fd-bubble, .fd-stage:not(.split) .fd-bubble { max-width:92%; }
  .fd-panes { flex:none; height:auto; }
  .fd-pane { position:relative; inset:auto; overflow:visible; }
  .fd-build, .fd-canvas { overflow:visible; min-height:0; }
  .fd-pane::-webkit-scrollbar { display:none; }
  .fd-case, .fd-auto { flex:none; min-height:0; overflow:visible; }
  .fd-canvas { padding:16px 14px; }
  .fd-appr, .fd-case, .fd-auto-form { padding:14px; }
  .fd-step-r { display:none; }
  .fd-tabs { padding:6px 8px 0; }
  .fd-tab { padding:0 8px; font-size:12px; }
  .fd-perm small { display:none; }
  .fd-auto-h, .fd-wf-title { flex-direction:column; align-items:stretch; gap:8px; }
  .fd-wf-title b { white-space:normal; }
  .fd-work-tools { display:none; }
  .fd-meta { row-gap:6px; }
}

/* ---------- Scenes: shared ---------- */
.fd-top-r { display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
.fdemo.s-agent .fd-stage, .fdemo.s-cases .fd-stage { display:flex; }
.fdemo.s-ask { grid-template-columns:1fr; }

/* ---------- Scene: ask (abstracted chat client) ---------- */
.fd-chat { grid-column:1 / -1; position:relative; display:grid; grid-template-columns:208px minmax(0,1fr); min-height:0; background:#fff; overflow:hidden; }
.fd-ch-side { background:#f6f5f3; border-right:1px solid var(--fd-line); padding:10px 8px; display:flex; flex-direction:column; gap:1px; overflow:hidden; }
.fd-ch-ws { display:flex; align-items:center; gap:6px; font-weight:600; font-size:14px; color:var(--fd-ink); padding:4px 8px 10px; }
.fd-ch-ws svg { width:12px; height:12px; color:var(--fd-muted); }
.fd-ch-sec { font-size:11.5px; color:var(--fd-muted); padding:12px 8px 4px; }
.fd-ch-item { display:flex; align-items:center; gap:7px; height:26px; padding:0 8px; border-radius:6px; color:var(--fd-text); white-space:nowrap; overflow:hidden; }
.fd-ch-item.on { background:#e8e6e2; color:var(--fd-ink); font-weight:500; }
.fd-ch-item > svg { width:12px; height:12px; color:var(--fd-muted); }
.fd-ch-item .fd-ch-av { width:16px; height:16px; font-size:10px; border-radius:4px; }
.fd-ch-av { width:30px; height:30px; border-radius:6px; background:#e3e3e3; color:#1a1a1a; font-size:12px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; flex:none; object-fit:cover; }
.fd-ch-main, .fd-ch-thread { display:flex; flex-direction:column; min-width:0; min-height:0; }
.fd-ch-thread { position:absolute; top:0; right:0; bottom:0; width:46%; min-width:380px; max-width:100%; background:#fff; border-left:1px solid var(--fd-line); box-shadow:-16px 0 48px rgba(0,0,0,.12); overflow:hidden; z-index:3; transform:translateX(100%); transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.fd-ch-thread.on { transform:none; }
.fd-ch-thread .fd-ch-tmsgs { justify-content:flex-start; }
.fdemo .fd-ch-thread[data-s] { opacity:1; transform:translateX(100%); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.fdemo .fd-ch-thread[data-s].on { transform:none; }
.fd-ch-h { height:44px; display:flex; align-items:center; gap:8px; padding:0 16px; border-bottom:1px solid var(--fd-line); flex:none; color:var(--fd-muted); font-size:12px; }
.fd-ch-h b { display:inline-flex; align-items:center; gap:3px; color:var(--fd-ink); font-weight:600; font-size:14px; }
.fd-ch-h b svg, .fd-ch-h small svg { width:12px; height:12px; }
.fd-ch-h small { display:inline-flex; align-items:center; gap:2px; font-size:12px; }
.fd-ch-tools { margin-left:auto; display:inline-flex; align-items:center; gap:10px; }
.fd-ch-tools > svg { width:13px; height:13px; }
.fd-ch-msgs, .fd-ch-tmsgs { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:8px 0; }
.fd-ch-msgs > [data-s]:not(.on), .fd-ch-tmsgs > [data-s]:not(.on), .fd-ch-msg [data-s]:not(.on), .fd-ch-input [data-s]:not(.on) { display:none; }
.fd-ch-day { display:flex; align-items:center; gap:10px; margin:4px 0 8px; padding-left:16px; }
.fd-ch-day::after { content:""; flex:1; height:1px; background:var(--fd-line); }
.fd-ch-day span { border:1px solid var(--fd-line); border-radius:20px; padding:2px 10px; font-size:11.5px; font-weight:500; color:var(--fd-ink); }
.fd-ch-msg { display:flex; gap:10px; padding:6px 16px; }
.fd-ch-msg > div { min-width:0; flex:1; }
.fd-ch-meta { display:flex; align-items:baseline; gap:6px; line-height:18px; }
.fd-ch-meta b { font-weight:600; color:var(--fd-ink); display:inline-flex; align-items:baseline; gap:5px; }
.fd-ch-meta i { font-style:normal; background:#ececec; color:#555; border-radius:3px; padding:0 3px; font-size:9.5px; font-weight:600; line-height:14px; }
.fd-ch-meta time { color:var(--fd-muted); font-size:11.5px; }
.fd-ch-msg p { margin:1px 0 0; color:var(--fd-ink); line-height:1.5; }
.fd-ch-at { color:#1264a3; background:#e8f1fa; border-radius:3px; padding:0 3px; }
.fd-ch-replies { display:flex; align-items:center; gap:7px; margin-top:6px; font-size:12px; color:var(--fd-muted); }
.fd-ch-replies img { width:18px; height:18px; border-radius:4px; }
.fd-ch-replies a { color:#1264a3; font-weight:600; }
.fd-ch-tcount { display:flex; align-items:center; gap:6px; padding:2px 16px; color:var(--fd-muted); font-size:11.5px; }
.fd-ch-tcount::after { content:""; flex:1; height:1px; background:var(--fd-line); }
.fd-ch-tcount svg { width:11px; height:11px; }
.fd-ch-trace { margin-top:6px; display:flex; flex-direction:column; gap:4px; }
.fd-ch-tr { display:flex; gap:7px; align-items:flex-start; color:var(--fd-muted); font-size:12px; line-height:1.45; }
.fd-ch-tr svg { width:12px; height:12px; margin-top:3px; color:var(--fd-ok); }
.fd-ch-card { border:1px solid var(--fd-line); border-radius:8px; margin:8px 0 2px; background:#fff; max-width:400px; }
.fd-ch-card-h { display:flex; gap:10px; align-items:flex-start; padding:10px 12px 8px; }
.fd-ch-card-h img { width:26px; height:26px; border-radius:6px; }
.fd-ch-card-h div { display:flex; flex-direction:column; min-width:0; }
.fd-ch-card-h b { font-weight:600; color:var(--fd-ink); line-height:18px; }
.fd-ch-card-h span { color:var(--fd-muted); font-size:11.5px; }
.fd-ch-card-g { display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; padding:4px 12px 10px; }
.fd-ch-k { color:var(--fd-muted); font-size:11.5px; }
.fd-ch-v { display:inline-flex; align-items:center; gap:5px; color:var(--fd-ink); font-size:12px; font-weight:500; }
.fd-ch-v svg { width:12px; height:12px; }
.fd-ch-v.ok { color:var(--fd-ok); }
.fd-ch-card-f { border-top:1px solid var(--fd-line); padding:7px 12px; font-size:11.5px; color:#1264a3; display:flex; align-items:center; gap:4px; }
.fd-ch-card-f svg { width:11px; height:11px; }
.fd-ch-box { margin:0 16px 14px; border:1px solid #d6d6d6; border-radius:8px; flex:none; background:#fff; }
.fd-ch-fmt { display:flex; gap:12px; padding:6px 10px; background:#f8f8f8; border-radius:8px 8px 0 0; color:var(--fd-muted); font-size:12px; }
.fd-ch-fmt s { text-decoration:line-through; }
.fd-ch-input { padding:8px 12px; min-height:36px; color:var(--fd-ink); }
.fd-ch-input #ch-ph, .fd-ch-box.slim .fd-ch-input span { color:var(--fd-muted); }
.fdemo .fd-ch-input [data-s] { transition:none; transform:none; }
.fd-ch-row { display:flex; align-items:center; justify-content:space-between; padding:2px 10px 8px; color:var(--fd-muted); }
.fd-ch-row > span { display:inline-flex; align-items:center; gap:12px; }
.fd-ch-row svg { width:13px; height:13px; }
.fd-ch-send { width:26px; height:24px; border-radius:5px; justify-content:center; color:#c5c5c5; }
.fd-ch-send.on { background:#007a5a; color:#fff; }

/* ---------- Scene: agent (background run + browser) ---------- */
.fd-run { flex:1; display:grid; grid-template-columns:minmax(0,1fr) 0fr; min-height:0; min-width:0; transition:grid-template-columns .6s cubic-bezier(.2,.7,.2,1); }
.fd-run:has(.fd-browser.on) { grid-template-columns:minmax(0,42fr) minmax(0,58fr); }
.fd-run-log { display:flex; flex-direction:column; min-width:0; min-height:0; }
.fd-run-h { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 20px 12px; border-bottom:1px solid var(--fd-line); flex:none; }
.fd-run-h b { font-size:15px; font-weight:500; color:var(--fd-ink); }
.fd-run-h .fd-sub { color:var(--fd-muted); font-size:12px; margin-top:2px; }
.fd-run-st { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:999px; border:1px solid var(--fd-line); font-size:11.5px; color:var(--fd-text); white-space:nowrap; }
.fd-run-st.ok { color:var(--fd-ok); }
.fd-run-st svg { width:12px; height:12px; }
.fd-run .fd-thread { margin:0; padding:16px 20px; justify-content:flex-start; }
.fd-run .fd-thread::after { display:none; }
.fd-run .fd-turn-h small { color:var(--fd-muted); font-weight:400; margin-left:4px; }
.fd-browser { display:flex; flex-direction:column; min-width:0; min-height:0; border-left:1px solid var(--fd-line); background:#f5f5f5; overflow:hidden; }
.fdemo .fd-browser[data-s] { transform:none; transition:opacity .35s ease .25s; }
.fd-br-bar { display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border-bottom:1px solid var(--fd-line); background:#fafafa; flex:none; }
.fd-br-dots { display:inline-flex; gap:5px; }
.fd-br-dots i { width:9px; height:9px; border-radius:50%; background:#dcdcdc; }
.fd-br-url { flex:1; display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:6px; background:#ededed; color:var(--fd-text); font-size:11.5px; min-width:0; overflow:hidden; white-space:nowrap; }
.fd-br-url svg { width:11px; height:11px; color:var(--fd-muted); }
.fd-br-live { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--fd-muted); }
.fd-br-live i { width:6px; height:6px; border-radius:50%; background:#e5484d; animation:fd-pulse 1.4s ease-in-out infinite; }
@keyframes fd-pulse { 50% { opacity:.35; } }
.fd-br-view { position:relative; flex:1; min-height:0; background:#fff; overflow:hidden; font-size:12px; }
.fd-br-login { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px; }
.fd-br-logo { font-weight:700; letter-spacing:.18em; font-size:12px; color:var(--fd-ink); margin-bottom:10px; }
.fd-br-login h4 { margin:0; font-size:18px; font-weight:600; color:var(--fd-ink); }
.fd-br-login p { margin:0 0 10px; color:var(--fd-muted); }
.fd-br-btn, .fd-br-alt { display:inline-flex; align-items:center; justify-content:center; height:34px; width:min(100%, 260px); border-radius:7px; font-weight:500; }
.fd-br-btn { background:var(--fd-acc); color:#fff; }
.fd-br-alt { border:1px solid var(--fd-line); color:var(--fd-ink); font-weight:400; }
.fd-br-team { position:absolute; inset:0; padding:18px 20px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.fd-br-team-h { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.fd-br-team-h b { display:block; font-size:16px; font-weight:600; color:var(--fd-ink); }
.fd-br-team-h small { color:var(--fd-muted); font-size:12px; }
.fd-br-seats span { display:inline-flex; height:24px; align-items:center; padding:0 9px; border-radius:6px; border:1px solid var(--fd-line); font-size:11.5px; color:var(--fd-ink); font-weight:500; white-space:nowrap; animation:fd-fade .35s ease both; }
.fd-br-tabs { display:flex; gap:16px; border-bottom:1px solid var(--fd-line); }
.fd-br-tabs span { padding:0 0 8px; color:var(--fd-muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.fd-br-tabs span.on { color:var(--fd-ink); border-bottom-color:var(--fd-ink); font-weight:500; }
.fd-br-tbl { width:100%; border-collapse:collapse; }
.fd-br-tbl th { text-align:left; font-weight:500; color:var(--fd-muted); font-size:11.5px; padding:4px 8px 8px; border-bottom:1px solid var(--fd-line); }
.fd-br-tbl td { padding:6px 8px; border-bottom:1px solid #f3f3f3; color:var(--fd-text); white-space:nowrap; vertical-align:middle; }
.fd-br-who { display:flex; align-items:center; gap:9px; }
.fd-br-who > span:last-child { display:flex; flex-direction:column; min-width:0; }
.fd-br-who b { font-weight:500; color:var(--fd-ink); }
.fd-br-who small { color:var(--fd-muted); font-size:11px; }
.fd-br-who .fd-ch-av { width:24px; height:24px; font-size:10px; }
.fd-br-tbl tr.idle td:nth-child(3) { color:#9a6700; }
.fd-br-rm { display:inline-flex; align-items:center; height:22px; padding:0 8px; border:1px solid var(--fd-line); border-radius:6px; font-size:11.5px; font-weight:500; color:var(--fd-text); background:#fff; }
.fd-br-tbl td:last-child { text-align:right; }
.fd-br-tbl td svg { width:13px; height:13px; color:var(--fd-muted); display:inline-block; }
.fd-br-toast { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:8px; background:var(--fd-ink); color:#fff; font-size:12px; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.18); animation:fd-fade .3s ease both; }
.fd-br-toast svg { width:12px; height:12px; color:#7ee2a8; }

/* ---------- Scene: cases (board + peek panel) ---------- */
.fd-board { position:relative; flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.fd-board-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; flex:none; }
.fd-board-r { display:inline-flex; gap:6px; }
.fd-cols { flex:1; min-height:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; padding:0 16px 16px; }
.fd-col { display:flex; flex-direction:column; min-width:0; }
.fd-col-h { display:flex; align-items:center; gap:6px; height:28px; padding:0 4px; margin-bottom:6px; font-size:12px; color:var(--fd-ink); }
.fd-col-h > svg, .fd-col-h > .fd-pri { width:12px; height:12px; }
.fd-col-h b { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-col-n { color:var(--fd-muted); font-variant-numeric:tabular-nums; }
.fd-col-x { margin-left:auto; display:inline-flex; gap:8px; color:var(--fd-muted); }
.fd-col-x svg { width:12px; height:12px; }
.fd-col-body { display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.fd-kcard { position:relative; border:1px solid var(--fd-line); border-radius:8px; background:#fff; padding:9px 10px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.fd-kcard-h { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11.5px; color:var(--fd-muted); }
.fd-kcard-id { letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.fd-kcard-ic { display:inline-flex; align-items:center; gap:6px; color:var(--fd-text); }
.fd-kcard-ic svg, .fd-kcard-ic .fd-pri { width:12px; height:12px; }
.fd-kpri { display:inline-flex; align-items:flex-end; gap:1.5px; height:11px; }
.fd-kpri i { width:3px; background:#d4d4d4; border-radius:1px; height:4px; }
.fd-kpri i:nth-child(2) { height:7px; }
.fd-kpri i:nth-child(3) { height:10px; }
.fd-kpri.low i:first-child, .fd-kpri.med i:nth-child(-n+2), .fd-kpri.high i { background:var(--fd-ink); }
.fd-kcard-t { color:var(--fd-ink); margin-top:4px; line-height:17px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fd-kcard-m { display:flex; align-items:center; gap:6px; margin-top:7px; font-size:11.5px; color:var(--fd-muted); white-space:nowrap; overflow:hidden; }
.fd-kcard-m .fd-avatar { width:16px; height:16px; font-size:10px; }
.fd-kcard-m .fd-mini { margin-left:auto; width:14px; height:14px; }
.fd-kspin { width:11px; height:11px; border-radius:50%; border:1.5px solid #d4d4d4; border-top-color:var(--fd-ink); animation:fd-spin .8s linear infinite; margin-left:auto; }
.fd-ptr { position:absolute; left:calc(25% + 64px); top:140px; width:16px; height:16px; z-index:3; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.fdemo .fd-ptr[data-s] { transition:opacity .25s ease, transform .5s ease; transform:translate(14px, 18px); }
.fdemo .fd-ptr[data-s].on { transform:none; }
.fd-peek { position:absolute; top:0; right:0; bottom:0; width:min(460px, 100%); background:#fff; border-left:1px solid var(--fd-line); box-shadow:-12px 0 40px rgba(0,0,0,.08); display:flex; flex-direction:column; z-index:4; }
.fdemo .fd-peek[data-s] { transform:translateX(24px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.fdemo .fd-peek[data-s].on { transform:none; }
.fd-peek-h { display:flex; align-items:center; justify-content:space-between; height:44px; padding:0 16px; border-bottom:1px solid var(--fd-line); color:var(--fd-muted); font-size:12px; flex:none; }
.fd-peek-tools { display:inline-flex; gap:12px; }
.fd-peek-tools svg { width:13px; height:13px; }
.fd-peek .fd-case { flex:1; padding:16px 18px 14px; }
.fd-peek .fd-case h3 { font-size:16px; }
.fd-peek .fd-case > [data-s]:not(.on) { display:none; }
.fd-peek-props { display:flex; flex-wrap:wrap; gap:6px; }
.fd-peek-props > span { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:6px; border:1px solid var(--fd-line); font-size:11.5px; color:var(--fd-text); }
.fd-peek-props svg, .fd-peek-props .fd-mini { width:12px; height:12px; color:var(--fd-muted); }
.fd-peek-props .ok, .fd-peek-props .ok svg { color:var(--fd-ok); }

/* ---------- Scenes: responsive ---------- */
@media (max-width: 1100px) {
  .fd-chat { grid-template-columns:minmax(0,1fr); min-height:640px; }
  .fd-ch-thread { width:52%; min-width:0; }
  .fd-ch-side { display:none; }
  .fd-run:has(.fd-browser.on) { grid-template-columns:minmax(0,45fr) minmax(0,55fr); }
  .fd-ptr { left:calc(25% + 40px); }
}
@media (max-width: 1024px) {
  .fd-cols { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .fd-col:nth-child(3) { display:none; }
  .fd-ptr { left:calc(33% + 40px); }
}
@media (max-width: 760px) {
  .fd-chat { display:flex; flex-direction:column; min-height:0; }
  .fdemo .fd-ch-thread[data-s] { position:relative; width:100%; transform:none; transition:none; box-shadow:none; }
  .fd-ch-thread:not(.on) { display:none; }
  .fd-ch-main { min-height:420px; }
  .fd-chat:has(.fd-ch-thread.on) .fd-ch-main { display:none; }
  .fd-ch-thread { border-left:0; min-height:560px; }
  .fd-ch-card { max-width:none; }
  .fd-run, .fd-run:has(.fd-browser.on) { display:flex; flex-direction:column; }
  .fd-browser { border-left:0; border-top:1px solid var(--fd-line); height:380px; flex:none; }
  .fd-browser:not(.on) { display:none; }
  .fd-run .fd-thread { padding:14px; }
  .fd-run-h { padding:14px 14px 10px; }
  .fd-br-team { padding:14px; }
  .fd-br-tbl th:nth-child(2), .fd-br-tbl td:nth-child(2) { display:none; }
  .fd-board { min-height:560px; }
  .fd-cols { grid-template-columns:repeat(2, minmax(0,1fr)); padding:0 12px 12px; }
  .fd-col:nth-child(n+3) { display:none; }
  .fd-ptr { left:calc(50% + 48px); top:132px; }
  .fd-peek { width:100%; box-shadow:none; }
  .fd-peek .fd-case { overflow-y:auto; }
}
.fdemo img.fd-ch-av { width:30px; height:30px; }
.fdemo .fd-ch-item img.fd-ch-av { width:16px; height:16px; }
.fd-board-bar .fd-seg svg { width:12px; height:12px; margin-right:5px; }
.fd-board-bar .fd-seg > span { display:inline-flex; align-items:center; }
@media (max-width: 760px) {
  .fd-browser { height:auto; min-height:460px; }
  .fd-br-team, .fd-br-login { position:relative; inset:auto; }
  .fd-br-login { min-height:300px; }
  .fd-board { min-height:0; }
  .fd-cols { min-height:440px; }
  .fd-board:has(.fd-peek.on) .fd-cols, .fd-board:has(.fd-peek.on) .fd-board-bar { display:none; }
  .fd-peek { position:relative; inset:auto; border-left:0; }
  .fd-peek .fd-case { overflow:visible; }
}

.fdemo > .fd-nav, .fdemo > .fd-main, .fdemo > .fd-chat { animation:fd-scene .32s ease both; }
@keyframes fd-scene { from { opacity:0; } to { opacity:1; } }

/* ---------- Focus mode (explorations): no app shell, chrome trimmed, zoomed in on the feature ---------- */
.fdemo.focus { --fd-zoom:1.15; grid-template-columns:1fr; aspect-ratio:16/10; }
.fdemo.focus > .fd-main, .fdemo.focus > .fd-chat { zoom:var(--fd-zoom); }
.fdemo.focus .fd-main { padding:0; background:#fff; }
.fdemo.focus .fd-inset { border:0; border-radius:0; }
.fdemo.focus .fd-work-h, .fdemo.focus .fd-meta, .fdemo.focus .fd-seg-row, .fdemo.focus .fd-canvas-mode, .fdemo.focus .fd-zoom, .fdemo.focus .fd-tools,
.fdemo.focus .fd-board-bar, .fdemo.focus .fd-ch-side, .fdemo.focus .fd-br-tabs, .fdemo.focus .fd-col-x { display:none; }
.fdemo.focus .fd-stage.split { grid-template-columns:minmax(0,40fr) minmax(0,60fr); }
.fdemo.focus .fd-wf-top { padding:18px 20px 12px; }
.fdemo.focus .fd-chat { grid-template-columns:minmax(0,1fr); }
@media (min-width: 761px) { .fdemo.focus .fd-ch-thread { width:50%; min-width:0; } }
.fdemo.focus .fd-cols { grid-template-columns:repeat(3, minmax(0,1fr)); padding-top:16px; }
.fdemo.focus .fd-col:nth-child(3) { display:none; }
.fdemo.focus .fd-ptr { left:calc(33% + 40px); }
.fdemo.focus .fd-stage:not(.split) .fd-thread { padding-top:36px; }
@media (max-width: 1100px) {
  .fdemo.focus { --fd-zoom:1; aspect-ratio:auto; }
}

/* ---------- Build scene: product chat shapes + workflow graph ---------- */
@keyframes fd-up { from { opacity:.45; transform:translateY(5px); } }
@keyframes fd-pulse-b { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.s-build .fd-thread [data-s].on { animation:fd-up .22s cubic-bezier(.23,1,.32,1) both; }
.s-build .fd-own { align-items:flex-end; }
.s-build .fd-own-b { margin-left:0; background:#fff; border:1px solid var(--fd-line); border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); padding:9px 14px; max-width:94%; line-height:1.55; }
.fd-chip { display:inline-flex; align-items:center; gap:4px; padding:0 6px; margin:0 1px; border:1px solid var(--fd-line); border-radius:6px; background:#f5f5f5; font-size:12px; line-height:18px; vertical-align:1px; white-space:nowrap; color:var(--fd-ink); }
.fd-chip svg { width:11px; height:11px; }
.fd-ops { display:flex; flex-direction:column; gap:5px; margin:2px 0; }
.fd-op { display:flex; gap:9px; align-items:flex-start; font-size:12px; color:var(--fd-muted); line-height:1.4; }
.fd-op b { color:var(--fd-ink); font-weight:500; }
.fd-op-i { flex:none; width:16px; height:16px; margin-top:1px; display:inline-flex; align-items:center; justify-content:center; color:var(--fd-ink); }
.fd-op-i img, .fd-op-i svg { width:14px; height:14px; }
.s-build .fd-summary ul { margin-top:2px; }
.fd-sendto { display:inline-flex; align-items:center; gap:5px; color:var(--fd-muted); }
.fd-sendto svg { width:12px; height:12px; }
.s-build .fd-send { background:var(--fd-ink); border-color:var(--fd-ink); color:#fff; }
.fd-status { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px; border:1px solid var(--fd-line); font-size:11.5px; font-weight:500; color:var(--fd-muted); flex:none; }
.fd-status.live { color:#1a7f4b; border-color:#bfe3cf; background:#eef9f2; }
.fd-status.live i { width:6px; height:6px; border-radius:50%; background:#1a9d5a; animation:fd-pulse-b 1.6s ease-in-out infinite; }
.s-build .fd-wf-title { justify-content:flex-start; gap:10px; }
.fdemo.focus.s-build .fd-stage.split { grid-template-columns:minmax(0,38fr) minmax(0,62fr); }
.fdemo.focus.s-build .fd-wf-top { padding:11px 16px 9px; }
.s-build .fd-canvas { position:relative; flex:1; min-height:0; margin:0 14px 14px; padding:14px; border:1px solid var(--fd-line); border-radius:8px; background:#f7f7f7 radial-gradient(circle, rgba(0,0,0,.11) 1px, transparent 1px) 0 0 / 20px 20px; overflow:hidden; display:flex; justify-content:center; align-items:flex-start; }
.fd-graph { --fit:1; position:relative; width:380px; height:376px; flex:none; transform:scale(var(--fit)); transform-origin:50% 0; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.fd-edges { position:absolute; inset:0; overflow:visible; }
.fd-edges path { fill:none; stroke:#b4b4b4; stroke-width:1.25; stroke-dasharray:1; stroke-dashoffset:1; transform:none; transition:stroke-dashoffset .45s ease-out, opacity .2s ease; }
.fd-edges path.on { stroke-dashoffset:0; }
.fd-glab { position:absolute; font-size:10.5px; line-height:14px; padding:0 3px; color:var(--fd-text); background:#f7f7f7; transform:none; }
.fd-gn { position:absolute; display:flex; align-items:center; gap:8px; width:180px; height:32px; padding:0 10px; background:#fff; border:1px solid var(--fd-line); border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,.03); font-size:12.5px; color:var(--fd-ink); white-space:nowrap; transition-duration:.22s; transition-timing-function:cubic-bezier(.23,1,.32,1); }
.fd-gn img, .fd-gn svg { width:16px; height:16px; flex:none; }
.fd-gn b { font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.fd-gn.pill { width:96px; height:28px; justify-content:center; border-radius:999px; box-shadow:none; font-size:12px; }
.fd-gn.pill svg { width:12px; height:12px; }
.fdemo.focus.s-build { grid-template-rows:minmax(0,1fr); }
.fdemo.focus.s-build > .fd-main { min-height:0; max-height:100%; }
.fdemo.focus.s-build .fd-stage.split .fd-thread { gap:10px; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 28px); mask-image:linear-gradient(to bottom, transparent, #000 28px); }
.s-build .fd-stage { grid-template-rows:minmax(0,1fr); }
.s-build .fd-agent { min-height:0; max-height:100%; overflow:hidden; }
@media (max-width: 760px) { .s-build .fd-canvas { flex:none; height:262px; } .s-build .fd-graph { transform:scale(.6); } }

/* ---- ask scene ---- */
@keyframes fd-ch-up { from { opacity:.45; transform:translateY(5px); } }
.fdemo.focus.s-ask { --fd-zoom:1.1; }
@media (min-width: 761px) { .fdemo.focus.s-ask .fd-ch-thread { width:56%; } }
.fdemo.s-ask .fd-ch-msgs [data-s].on, .fdemo.s-ask .fd-ch-tinner [data-s].on { animation:fd-ch-up .22s cubic-bezier(.23,1,.32,1) both; }
.fdemo.s-ask .fd-ch-av, .fdemo.s-ask img.fd-ch-av { width:36px; height:36px; border-radius:4px; font-size:13px; }
.fdemo.s-ask .fd-ch-item .fd-ch-av, .fdemo.s-ask .fd-ch-item img.fd-ch-av { width:20px; height:20px; border-radius:4px; font-size:10px; }
.fdemo.s-ask .fd-ch-h { height:46px; }
.fdemo.s-ask .fd-ch-h b { font-size:15px; font-weight:700; gap:4px; }
.fdemo.s-ask .fd-ch-ddn { display:inline-flex; color:var(--fd-muted); margin-left:1px; }
.fdemo.s-ask .fd-ch-ddn svg { width:11px; height:11px; }
.fdemo.s-ask .fd-ch-face { display:inline-flex; align-items:center; height:24px; padding:0 7px 0 3px; border:1px solid var(--fd-line); border-radius:5px; color:var(--fd-muted); font-size:12px; }
.fdemo.s-ask .fd-ch-face .fd-ch-av { width:18px; height:18px; border-radius:4px; font-size:9px; margin-right:-6px; box-shadow:0 0 0 1.5px #fff; }
.fdemo.s-ask .fd-ch-face small { margin-left:11px; font-size:12px; }
.fdemo.s-ask .fd-ch-msg { gap:8px; padding:5px 16px; }
.fdemo.s-ask .fd-ch-meta b { font-weight:700; }
.fdemo.s-ask .fd-ch-reacts { display:flex; gap:4px; margin-top:6px; }
.fdemo.s-ask .fd-ch-react { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px 0 6px; border-radius:12px; background:#efefef; font-size:12px; color:var(--fd-text); }
.fdemo.s-ask .fd-ch-react b { font-weight:600; color:var(--fd-ink); }
.fdemo.s-ask .fd-ch-emo { width:15px; height:15px; }
.fdemo.s-ask .fd-ch-replies { gap:5px; margin-top:7px; }
.fdemo.s-ask .fd-ch-replies img, .fdemo.s-ask .fd-ch-replies .fd-ch-av { width:20px; height:20px; border-radius:4px; font-size:10px; }
.fdemo.s-ask .fd-ch-replies a { margin-left:3px; }
.fdemo.s-ask .fd-ch-thread .fd-ch-tmsgs { position:relative; display:block; padding:0; }
.fdemo.s-ask .fd-ch-tinner { position:absolute; left:0; right:0; bottom:0; min-height:100%; padding:8px 0; }
.fdemo.s-ask .fd-ch-tinner > [data-s]:not(.on) { display:none; }
.fdemo.s-ask .fd-ch-status { flex:none; display:flex; align-items:center; gap:7px; padding:0 16px 7px; font-size:12px; color:var(--fd-muted); }
.fdemo.s-ask .fd-ch-status .fd-spin { width:11px; height:11px; }
.fdemo.s-ask .fd-ch-ops { display:flex; flex-direction:column; gap:5px; margin:6px 0 2px; }
.fdemo.s-ask .fd-ch-op { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--fd-muted); line-height:1.4; }
.fdemo.s-ask .fd-ch-op b { color:var(--fd-ink); font-weight:500; }
.fdemo.s-ask .fd-ch-op-i { flex:none; width:16px; height:16px; margin-top:1px; display:inline-flex; align-items:center; justify-content:center; color:var(--fd-ok); }
.fdemo.s-ask .fd-ch-op-i img, .fdemo.s-ask .fd-ch-op-i svg { width:14px; height:14px; }
.fdemo.s-ask .fd-ch-wo { display:flex; flex-direction:column; gap:4px; margin:8px 0 2px; padding:8px 10px 9px; border:1px solid var(--fd-line); border-radius:8px; max-width:380px; }
.fdemo.s-ask .fd-ch-wo-h { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--fd-muted); }
.fdemo.s-ask .fd-ch-wo-h img { width:16px; height:16px; border-radius:4px; }
.fdemo.s-ask .fd-ch-wo-h b { color:var(--fd-ink); font-weight:600; }
.fdemo.s-ask .fd-ch-wo-h a { margin-left:auto; display:inline-flex; align-items:center; gap:3px; color:#1264a3; white-space:nowrap; }
.fdemo.s-ask .fd-ch-wo-h a svg { width:10px; height:10px; }
.fdemo.s-ask .fd-ch-wo-t { font-weight:600; color:var(--fd-ink); line-height:1.35; }
.fdemo.s-ask .fd-ch-wo-f { display:flex; flex-wrap:wrap; gap:3px 14px; font-size:12px; color:var(--fd-muted); }
.fdemo.s-ask .fd-ch-wo-f span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.fdemo.s-ask .fd-ch-wo-f b { display:inline-flex; align-items:center; gap:4px; color:var(--fd-ink); font-weight:500; }
.fdemo.s-ask .fd-ch-wo-f b.ok { color:var(--fd-ok); }
.fdemo.s-ask .fd-ch-op-i .fd-check, .fdemo.s-ask .fd-ch-wo-f b.ok .fd-check { color:var(--fd-ok); }
.fdemo.s-ask .fd-ch-wo-f svg { width:12px; height:12px; }
.fdemo.s-ask .fd-ch-wo-f img.fd-ch-av { width:14px; height:14px; border-radius:3px; }
.fdemo.s-ask img.fd-ch-av:not(.fd-ch-person), .fdemo.s-ask .fd-ch-replies img, .fdemo.s-ask .fd-ch-wo-h img { object-fit:contain; background:transparent; border-radius:0; }
.fdemo.s-ask img.fd-ch-person { object-fit:cover; border-radius:4px; }
.fdemo.s-ask .fd-ch-box { border-color:#c9c9c9; }
.fdemo.s-ask .fd-ch-fmt { gap:14px; padding:6px 12px; color:#8a8a8a; background:#f6f6f6; }
.fdemo.s-ask .fd-ch-row { padding:2px 8px 8px; }
.fdemo.s-ask .fd-ch-row > span { gap:10px; }
.fdemo.s-ask .fd-ch-row svg { width:14px; height:14px; }
.fdemo.s-ask .fd-ch-aa { font-size:12.5px; font-weight:500; }
.fdemo.s-ask .fd-ch-sep { width:1px; height:14px; background:#d9d9d9; }
.fdemo.s-ask .fd-ch-send { display:inline-flex; align-items:center; width:auto; height:26px; gap:0; padding:0; border-radius:5px; color:#bdbdbd; }
.fdemo.s-ask .fd-ch-send > span { display:inline-flex; align-items:center; justify-content:center; width:28px; height:26px; }
.fdemo.s-ask .fd-ch-send > span + span { width:18px; border-left:1px solid #e3e3e3; }
.fdemo.s-ask .fd-ch-send svg { width:14px; height:14px; }
.fdemo.s-ask .fd-ch-send > span + span svg { width:10px; height:10px; }
.fdemo.s-ask .fd-ch-send.on { background:#007a5a; color:#fff; }
.fdemo.s-ask .fd-ch-send.on > span + span { border-left-color:rgba(255,255,255,.35); }
.fdemo.s-ask .fd-ch-box.slim { margin:0 16px 12px; }
.fdemo.s-ask .fd-ch-box.slim .fd-ch-input { display:flex; align-items:center; gap:10px; min-height:40px; padding:6px 8px 6px 12px; color:var(--fd-muted); }
.fdemo.s-ask .fd-ch-box.slim .fd-ch-input > svg { width:14px; height:14px; flex:none; }
.fdemo.s-ask .fd-ch-box.slim .fd-ch-input > span:first-of-type { flex:1; }
.fdemo.s-ask .fd-ch-msg [data-s]:not(.on), .fdemo.s-ask .fd-ch-tinner > [data-s]:not(.on) { display:none; }
@media (max-width: 760px) {
  .fdemo.s-ask .fd-ch-tinner { position:static; min-height:0; }
}
/* ---- end ask ---- */

/* ---- agent scene ---- */
.fdemo.focus.s-agent { grid-template-rows:minmax(0,1fr); }
.fdemo.focus.s-agent .fd-main { min-height:0; max-height:100%; overflow:hidden; container-type:inline-size; container-name:agent; }
.s-agent .fd-run-log { min-width:0; min-height:0; overflow:hidden; }
.fdemo.focus.s-agent .fd-stage { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.s-agent .fd-run { display:grid; width:100%; grid-template-columns:minmax(0,1fr) minmax(0,0fr); overflow:hidden; transition:grid-template-columns .6s cubic-bezier(.23,1,.32,1); }
.s-agent .fd-run:has(.fd-browser.on) { display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr); }
.s-agent .fd-run-h.ag-h { display:grid; grid-template-columns:minmax(0,1fr); row-gap:1px; padding:13px 18px 11px; }
.s-agent .fd-run-h b { font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-agent .fd-run-h .fd-sub { grid-column:1 / -1; margin:0; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fdemo.focus.s-agent .fd-run .fd-thread { width:100%; margin:0; padding:16px 18px; justify-content:flex-end; gap:0; mask-image:linear-gradient(to bottom, transparent, #000 14px); }
.s-agent .ag-transcript { display:flex; flex-direction:column; gap:18px; width:min(100%, 560px); min-width:0; margin:0 auto; }
.s-agent .ag-task { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.s-agent .ag-trigger { display:flex; align-items:center; gap:5px; color:var(--fd-muted); font-size:10.5px; }
.s-agent .ag-trigger svg { width:11px; height:11px; }
.s-agent .ag-task .fd-bubble { max-width:95%; border:1px solid #ebebeb; background:#fff; border-radius:16px; padding:9px 12px; font-size:12.5px; }
.s-agent .ag-message { margin:0; font-size:12.5px; line-height:1.5; color:var(--fd-ink); }
.s-agent .fd-thread [data-s].on { animation:fd-up .22s cubic-bezier(.23,1,.32,1) both; }
.s-agent .fd-turn-h { color:var(--fd-muted); font-size:13px; }
.s-agent .fd-reply-b { gap:4px; padding-left:28px; }
.s-agent .ag-worked { font-size:12.5px; color:var(--fd-muted); min-height:18px; }
.s-agent .ag-worked svg { width:11px; height:11px; }
@keyframes ag-shimmer { from { background-position:100% 0; } to { background-position:0 0; } }
.s-agent .ag-shimmer { background:linear-gradient(90deg, #8c8c8c 0 40%, #1a1a1a 50%, #8c8c8c 60% 100%) 100% 0 / 400% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:ag-shimmer 1.6s linear infinite; }
.s-agent .ag-ops { position:relative; display:flex; flex-direction:column; gap:0; margin:2px 0 4px; padding-left:8px; }
.s-agent .ag-op { position:relative; display:flex; gap:9px; align-items:flex-start; font-size:12px; color:var(--fd-muted); line-height:1.4; padding:2.5px 0; }
.s-agent .ag-op b { color:var(--fd-ink); font-weight:500; }
.s-agent .ag-op-i { position:relative; z-index:1; flex:none; width:14px; height:14px; margin-top:1.5px; display:inline-flex; align-items:center; justify-content:center; color:#9a9a9a; background:#fff; }
.s-agent .ag-op-i svg, .s-agent .ag-op-i img { width:12px; height:12px; }
.s-agent .ag-op-i img { opacity:.85; }
.s-agent .ag-op::before { content:""; position:absolute; left:7px; top:0; bottom:0; width:1px; background:var(--fd-line); }
.s-agent .ag-op:first-child::before { top:9px; }
.s-agent .ag-op:last-child::before { bottom:auto; height:9px; }
.s-agent .ag-op:first-child:last-child::before { display:none; }
.s-agent .fd-summary { font-size:12.5px; line-height:1.55; }
.s-agent .fd-browser { height:auto; min-height:0; border-left:1px solid var(--fd-line); border-top:0; }
.s-agent .fd-br-team, .s-agent .fd-br-login { position:absolute; inset:0; min-height:0; }
.s-agent .ag-browser-h { display:flex; flex:none; align-items:center; gap:7px; height:34px; padding:0 12px; border-bottom:1px solid var(--fd-line); background:#fff; color:var(--fd-muted); font-size:12px; }
.s-agent .ag-browser-h svg { width:13px; height:13px; }
.s-agent .ag-browser-h b { font-weight:500; color:var(--fd-ink); white-space:nowrap; }
.s-agent .ag-browser-h > span { display:flex; margin-left:auto; }
.s-agent .ag-boot { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:18px; text-align:center; color:var(--fd-muted); }
.s-agent .ag-boot > svg { width:28px; height:28px; margin-bottom:6px; color:#999; }
.s-agent .ag-boot b { font-size:13px; font-weight:500; color:var(--fd-ink); }
.s-agent .ag-boot-progress { height:2px; width:100px; margin-top:8px; overflow:hidden; background:#eee; }
.s-agent .ag-boot-progress::after { content:""; display:block; width:35%; height:100%; background:#aaa; animation:ag-boot 1s ease-in-out infinite; }
@keyframes ag-boot { from { transform:translateX(-100%); } to { transform:translateX(300%); } }
.s-agent .fd-br-view { font-size:10px; --ag-y1:128px; --ag-y2:158px; --ag-y3:188px; }
.s-agent .fd-br-login { padding:24px; gap:6px; }
.s-agent .fd-br-logo { font-size:10px; margin-bottom:6px; }
.s-agent .fd-br-login h4 { font-size:14px; }
.s-agent .fd-br-btn, .s-agent .fd-br-alt { height:27px; width:min(100%, 208px); border-radius:5px; }
.s-agent .fd-br-team { inset:22px 24px 44px; padding:0; gap:8px; }
.s-agent .fd-br-team-h b { font-size:13px; }
.s-agent .fd-br-team-h small { font-size:10px; }
.s-agent .fd-br-seats span { height:20px; padding:0 7px; font-size:9.5px; }
.s-agent .fd-br-tbl td { height:30px; padding:0 6px; }
.s-agent .fd-br-seats { color:#5f5f5f; }
.s-agent .fd-br-tbl th { padding:0 6px 6px; font-size:9.5px; }
.s-agent .fd-br-tbl th:nth-child(2), .s-agent .fd-br-tbl td:nth-child(2) { display:none; }
.s-agent .fd-br-tbl { table-layout:fixed; }
.s-agent .fd-br-tbl th:first-child { width:auto; }
.s-agent .fd-br-tbl th:nth-child(3) { width:24%; }
.s-agent .fd-br-tbl th:last-child { width:64px; }
.s-agent .fd-br-tbl td svg { width:10px; height:10px; }
.s-agent .fd-br-who { min-width:0; gap:7px; }
.s-agent .fd-br-who > span:last-child { flex:1; overflow:hidden; }
.s-agent .fd-br-who b, .s-agent .fd-br-who small { overflow:hidden; text-overflow:ellipsis; }
.s-agent .fd-br-who small { font-size:8.5px; }
.s-agent .fd-br-who .fd-ch-av { width:18px; height:18px; border-radius:5px; font-size:8px; }
.s-agent .fd-br-rm { height:20px; padding:0 6px; font-size:9.5px; border-radius:4px; transition:background .15s ease, border-color .15s ease; }
.s-agent .ag-wp { display:none; }
.s-agent .ag-ptr { position:absolute; z-index:4; right:40px; top:0; width:14px; height:19px; opacity:0; transform:translate(60px, 360px); transition:transform .55s cubic-bezier(.2,.7,.2,1), opacity .25s ease; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); pointer-events:none; }
.s-agent .fd-br-view:has(#ag-wp10.on) .ag-ptr { opacity:1; transform:translate(0, var(--ag-y1, 146px)); }
.s-agent .fd-br-view:has(#ag-wp12.on) .ag-ptr { transform:translate(0, var(--ag-y2, 186px)); }
.s-agent .fd-br-view:has(#ag-wp14.on) .ag-ptr { transform:translate(0, var(--ag-y3, 226px)); }
.s-agent .fd-br-view:has(#br-r3.fd-gone) .ag-ptr { opacity:0; transform:translate(90px, var(--ag-y3, 226px)); transition-delay:.25s; }
.s-agent .fd-br-view:has(#ag-wp10.on) #br-r1 .fd-br-rm, .s-agent .fd-br-view:has(#ag-wp12.on) #br-r2 .fd-br-rm, .s-agent .fd-br-view:has(#ag-wp14.on) #br-r3 .fd-br-rm { background:#f3f3f3; border-color:#cfcfcf; }
.s-agent .ag-take { position:absolute; right:12px; bottom:10px; z-index:3; display:inline-flex; align-items:center; gap:6px; padding:0 9px; height:22px; border-radius:999px; background:#f1f1f1; color:rgba(26,26,26,.8); font-size:10px; letter-spacing:-.01em; white-space:nowrap; }
.s-agent .ag-take svg { width:8px; height:11px; }
.s-agent .fd-br-toast { bottom:42px; padding:6px 9px; font-size:10px; }
@media (max-width: 1100px) {
  .s-agent .fd-run { height:500px; flex:none; }
}
@container agent (max-width: 540px) {
  .s-agent .fd-run, .s-agent .fd-run:has(.fd-browser.on) { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,0fr); transition:grid-template-rows .6s cubic-bezier(.23,1,.32,1); }
  .s-agent .fd-run:has(.fd-browser.on) { grid-template-rows:minmax(0,1fr) minmax(0,1fr); }
  .s-agent .fd-browser { height:auto; min-height:0; border-left:0; border-top:1px solid var(--fd-line); }
  .s-agent .fd-run-h.ag-h { padding:9px 12px 8px; }
  .fdemo.focus.s-agent .fd-run .fd-thread { padding:12px; }
  .s-agent .ag-transcript { gap:12px; }
  .s-agent .ag-browser-h { height:27px; }
  .s-agent .fd-br-bar { height:28px; gap:6px; }
  .s-agent .fd-br-url { font-size:10px; height:20px; }
  .s-agent .fd-br-team { inset:10px 12px 8px; gap:4px; }
  .s-agent .fd-br-team-h b { font-size:13px; }
  .s-agent .fd-br-team-h small { display:none; }
  .s-agent .fd-br-seats span { font-size:10px; height:20px; }
  .s-agent .fd-br-tbl th { font-size:9px; padding:0 4px 4px; }
  .s-agent .fd-br-tbl th:last-child { width:52px; }
  .s-agent .fd-br-tbl td { height:24px; padding:0 4px; font-size:10px; }
  .s-agent .fd-br-who { gap:6px; }
  .s-agent .fd-br-who small { display:none; }
  .s-agent .fd-br-who .fd-ch-av { height:18px; width:18px; font-size:8px; }
  .s-agent .fd-br-rm { height:19px; padding:0 5px; font-size:9px; }
  .s-agent .fd-br-view { --ag-y1:87px; --ag-y2:111px; --ag-y3:135px; }
  .s-agent .ag-ptr { right:19px; width:14px; height:19px; }
  .s-agent .ag-take { display:none; }
  .s-agent .fd-br-toast { bottom:5px; font-size:10px; padding:5px 8px; }
  .s-agent .fd-br-login { padding:10px; gap:5px; }
  .s-agent .fd-br-logo { margin-bottom:0; font-size:10px; }
  .s-agent .fd-br-login h4 { font-size:14px; }
  .s-agent .fd-br-login p { display:none; }
  .s-agent .fd-br-btn, .s-agent .fd-br-alt { height:25px; max-width:200px; font-size:11px; }
}
@media (prefers-reduced-motion: reduce) {
  .s-agent .ag-shimmer, .s-agent .ag-boot-progress::after { animation:none; }
  .s-agent .fd-run, .s-agent .ag-ptr, .s-agent .fd-thread [data-s].on { animation:none; transition:none; }
}
/* ---- end agent ---- */

/* ---- cases scene ---- */
/* Board: features/cases/components/case-board.tsx + case-card-body.tsx (rounded-lg, border/60, p-2.5, 6px gap, stage-coloured icons). */
.s-cases { --fd-tri:#94a3b8; --fd-prog:#f59e0b; --fd-block:#ef4444; --fd-done:#10b981; }
.fdemo.focus.s-cases > .fd-main { min-height:0; overflow:hidden; }
.fdemo.focus.s-cases .fd-board { flex:1; min-height:0; overflow:hidden; }
.s-cases .fd-cols { gap:10px; padding:0 12px 12px; align-items:start; }
.fdemo.focus.s-cases .fd-cols { grid-template-columns:repeat(3, minmax(0,1fr)); padding-top:12px; }
.s-cases .fd-col { background:#f7f7f7; border-radius:12px; padding:8px; min-height:100%; overflow:hidden; }
.fdemo.focus.s-cases .fd-col:nth-child(3) { display:none; }
.s-cases .fd-col-h { gap:7px; height:28px; padding:0 6px; margin-bottom:6px; font-size:13px; }
.s-cases .fd-col-h b { font-weight:500; color:var(--fd-ink); }
.s-cases .fd-col-n { font-size:12px; color:rgba(115,115,115,.85); }
.s-cases .fd-col-body { gap:6px; }
.fd-st { width:14px; height:14px; flex:none; }
.fd-st-tri { color:var(--fd-tri); }
.fd-st-prog { color:var(--fd-prog); }
.fd-st-block { color:var(--fd-block); }
.fd-st-done { color:var(--fd-done); }
.s-cases .fd-kcard { border:0; border-radius:8px; padding:10px; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.025); display:flex; flex-direction:column; gap:7px; }
.s-cases .fd-kcard-h { font-size:12px; color:var(--fd-muted); }
.s-cases .fd-kcard-id { letter-spacing:.025em; white-space:nowrap; }
.s-cases .fd-kcard-ic { gap:7px; color:var(--fd-muted); }
.s-cases .fd-kpri { height:12px; gap:1.5px; }
.s-cases .fd-kpri i { width:3px; border-radius:1px; background:rgba(115,115,115,.4); }
.s-cases .fd-kpri i:first-child { height:5px; }
.s-cases .fd-kpri i:nth-child(2) { height:8px; }
.s-cases .fd-kpri i:nth-child(3) { height:11px; }
.s-cases .fd-kpri.low i:first-child, .s-cases .fd-kpri.med i:nth-child(-n+2), .s-cases .fd-kpri.high i { background:var(--fd-muted); }
.fd-kav, .s-cases .fd-avatar.fd-kav { width:16px; height:16px; font-size:9.5px; border-radius:50%; flex:none; }
.s-cases img.fd-kav { width:14px; height:16px; border-radius:0; }
.s-cases .fd-note-h img { width:16px; height:18px; }
.s-cases .fd-cbadge img.fd-mini { width:12px; height:13px; }
.s-cases .fd-wf-who img { width:14px; height:16px; }
#k16-asg { display:inline-flex; }
.s-cases .fd-kcard-t { margin:0; font-size:13px; font-weight:500; line-height:17px; color:var(--fd-ink); }
.s-cases .fd-kcard-m { margin:0; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--fd-muted); }
.s-cases .fd-kcard-m svg { width:12px; height:12px; color:#b3b3b3; flex:none; }
.fd-cbadge { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px; border-radius:6px; background:#f3f3f3; font-size:12.5px; font-weight:400; color:var(--fd-ink); white-space:nowrap; }
.fd-cbadge svg, .fd-cbadge .fd-mini { width:13px; height:13px; color:var(--fd-muted); }
.fd-cbadge .fd-st { color:inherit; }
.fd-cbadge .fd-st-prog { color:var(--fd-prog); }
.fd-cbadge.ok { background:rgba(16,185,129,.1); color:#047857; }
.fd-cbadge.ok svg { color:#047857; }
.fd-cbadge.warn { background:rgba(245,158,11,.12); color:#b45309; }
.fd-cbadge.warn svg { color:#b45309; }
.s-cases .fd-peek-props { gap:6px; }
.s-cases .fd-peek-props > span { height:26px; padding:0 9px; border:0; font-size:12.5px; }
/* cards entering a column: the board's drop transition, 200ms cubic-bezier(.2,0,0,1) */
@keyframes fd-kdrop { from { transform:translateY(-8px) scale(.98); } to { transform:none; } }
#k16-prog, #k16-done, #k12-done { animation:fd-kdrop .2s cubic-bezier(.2,0,0,1); }
.s-cases .fd-ptr { left:calc(33% + 46px); top:118px; }
/* Peek: components/ui/docked-peek-layer.tsx + peek-header.tsx (h-12, identifier chip + title), case-peek-in 140ms cubic-bezier(.16,1,.3,1). */
.fdemo.focus.s-cases .fd-peek { width:64%; top:8px; right:8px; bottom:8px; border:1px solid rgba(0,0,0,.06); border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 16px 40px -12px rgba(0,0,0,.16); overflow:hidden; }
.s-cases .fd-board::before { content:""; position:absolute; inset:0; z-index:3; background:rgba(255,255,255,.55); opacity:0; pointer-events:none; transition:opacity .14s ease; }
.s-cases .fd-board:has(.fd-peek.on):not(:has(#cs-close.on))::before { opacity:1; }
.fdemo.s-cases .fd-peek[data-s] { transform:translateX(16px); transition:opacity .14s cubic-bezier(.16,1,.3,1), transform .14s cubic-bezier(.16,1,.3,1); }
.fdemo.s-cases .fd-peek[data-s].on { transform:none; }
.fdemo.s-cases .fd-board:has(#cs-close.on) .fd-peek { opacity:0; transform:translateX(16px); visibility:hidden; transition:opacity .1s cubic-bezier(.4,0,1,1), transform .1s cubic-bezier(.4,0,1,1), visibility 0s .1s; }
.s-cases .fd-peek-h { height:48px; padding:0 14px 0 12px; gap:9px; border-bottom:1px solid var(--fd-line); }
.s-cases .fd-peek-h > svg { width:13px; height:13px; color:var(--fd-ink); flex:none; }
.fd-peek-req { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--fd-ink); white-space:nowrap; flex:none; }
.fd-peek-req .fd-avatar { width:16px; height:16px; font-size:9.5px; }
.fd-pk-desc { margin:-4px 0 0; font-size:13px; line-height:1.5; color:var(--fd-text); }
.fd-peek-id { font-size:12px; letter-spacing:.025em; font-variant-numeric:tabular-nums; color:var(--fd-muted); flex:none; }
.fd-peek-ht { flex:1; min-width:0; font-size:13px; color:var(--fd-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s-cases .fd-peek-tools { gap:10px; }
.s-cases .fd-pk { flex:1; min-height:0; overflow:hidden; padding:12px 16px 12px; gap:10px; }
.s-cases .fd-pk h3 { font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:22px; }
.s-cases .fd-pk .fd-act-h { margin-top:2px; font-size:13px; }
.s-cases .fd-pk .fd-act-h b { font-weight:600; }
/* feed pins to the newest entry inside the crop, like the product's conversation scrolled to the bottom */
.fd-feed { flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; overflow:hidden; margin:0 -4px; padding:0 4px; }
.s-cases .fd-pk:has(.fd-step[data-s="7"].on) .fd-feed { justify-content:flex-end; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22px); mask-image:linear-gradient(to bottom, transparent, #000 22px); }
.fd-feed > * { flex:none; }
.fd-feed > [data-s]:not(.on) { display:none; }
.fd-feed > [data-s].on, .fd-feed .fd-step[data-s].on { animation:fd-up .22s cubic-bezier(.23,1,.32,1) both; transform:none; transition:none; }
/* activity rows: case-activity-burst.tsx ROW_CLASS — icon-led, py-1.5 px-3.5, text-xs muted with the object in foreground */
.fd-arow { display:flex; align-items:center; gap:7px; padding:5px 14px; font-size:12px; color:var(--fd-muted); line-height:16px; }
.fd-arow-i { display:inline-flex; width:14px; height:14px; flex:none; color:var(--fd-muted); }
.fd-arow-i .fd-st { color:var(--fd-muted); }
.fd-arow-t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fd-arow-t b { font-weight:500; color:var(--fd-ink); }
.fd-arow small { font-size:11.5px; color:var(--fd-muted); flex:none; }
/* comment cards: MessageCard — rounded-lg border bg-surface px-3.5 py-3, avatar + semibold name + time */
.s-cases .fd-note { display:block; padding:10px 14px 11px; border-radius:8px; border-color:#f0f0f0; background:#fafafa; }
.fd-note-h { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--fd-ink); }
.fd-note-h img { width:18px; height:18px; }
.fd-note-h b { font-weight:600; }
.fd-note-h small { color:var(--fd-muted); font-size:11.5px; }
.s-cases .fd-note p { margin:6px 0 0; font-size:12.5px; line-height:1.5; color:var(--fd-text); }
.s-cases .fd-note p b { color:var(--fd-ink); font-weight:500; }
.s-cases .fd-wf { padding:9px 14px 10px; border-radius:8px; border-color:#f0f0f0; background:#fafafa; }
.s-cases .fd-wf-t b small { margin-left:8px; font-size:11.5px; }
.s-cases .fd-wf-t { padding-bottom:7px; }
.s-cases .fd-wf-r.ok, .s-cases .fd-wf-r.ok b { color:var(--fd-ok); }
.s-cases .fd-step { min-height:24px; font-size:12.5px; }
.s-cases .fd-step span b { font-weight:500; }
.s-cases .fd-step + .fd-step::before { top:-12px; }
@media (max-width: 760px) {
  .fdemo.focus.s-cases .fd-cols { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; padding:12px 10px 10px; }
  .fdemo.focus.s-cases .fd-col:nth-child(n+3) { display:none; }
  .fdemo.s-cases .fd-board:has(#cs-close.on) .fd-cols { display:grid; }
  .s-cases .fd-kcard { padding:8px; gap:6px; }
  .s-cases .fd-kcard-h { font-size:11px; }
  .s-cases .fd-kcard-ic { gap:5px; }
  .s-cases .fd-kpri { display:none; }
  .s-cases .fd-col { padding:6px; border-radius:10px; }
  .s-cases .fd-kcard-t { font-size:12px; line-height:16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .s-cases .fd-kcard-m { font-size:11px; }
  .s-cases .fd-ptr { left:calc(50% + 40px); top:112px; }
  .fdemo.focus.s-cases .fd-peek { width:auto; inset:0; border:0; border-radius:0; box-shadow:none; }
  .s-cases .fd-peek-req { display:none; }
  .s-cases .fd-pk { padding:12px 12px 10px; }
  .s-cases .fd-peek-h { padding:0 12px; }
  .fdemo.s-cases .fd-peek:not(.on), .fdemo.s-cases .fd-board:has(#cs-close.on) .fd-peek { position:absolute; inset:0; }
}
@media (prefers-reduced-motion: reduce) {
  .fdemo.s-cases .fd-board:has(#cs-close.on) .fd-peek { display:none; }
  #k16-prog, #k16-done, #k12-done, .fd-feed > [data-s].on, .fd-feed .fd-step[data-s].on { animation:none; }
}
/* drag cards between lanes (user takeover) */
.s-cases .fd-peek:not(.on), .s-cases .fd-board:has(#cs-close.on) .fd-peek, .s-cases .fd-ptr { pointer-events:none; }
.s-cases .fd-kcard { cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none; transition:box-shadow .14s ease; }
.s-cases .fd-kcard:hover { box-shadow:0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.07); }
.s-cases .fd-kcard.fd-klift { opacity:.3; box-shadow:none; }
.s-cases .fd-kcard.fd-kdrag { position:absolute; z-index:6; margin:0; pointer-events:none; background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04); transform:rotate(1.5deg) scale(1.02); }
.s-cases .fd-col.fd-kover { background:#efefef; }
.s-cases.fd-dragging, .s-cases.fd-dragging .fd-kcard { cursor:grabbing; }
.s-cases .fd-kcard.fd-kdropped { animation:fd-kdrop .2s cubic-bezier(.2,0,0,1); }
/* ---- end cases ---- */
@media (prefers-reduced-motion: reduce) {
  .fd-br-live i, .fd-status.live i { animation:none; }
}
.fdemo:focus-visible { outline:2px solid #737373; outline-offset:-3px; }
.fdemo :is(button, input, select):focus-visible { outline:2px solid #737373; outline-offset:2px; }
.fdemo button:not(:disabled), .fdemo select { cursor:pointer; }
.fdemo button:disabled { opacity:.5; cursor:default; }
.fdemo.ended .ag-ptr, .fdemo.ended .fd-ptr { display:none; }
.fdemo.ended .fd-br-live i, .fdemo.ended .fd-status.live i { animation:none; }
.fdemo [hidden] { display:none; }

.s-build .fd-wf-publish { align-self:flex-start; padding:4px 10px; border:1px solid #d5d5d5; border-radius:6px; background:#fff; color:var(--fd-ink); font-size:11px; }
.s-build .fd-wf-publish:hover:not(:disabled) { background:#f5f5f5; }
.s-build .fd-step-details { position:absolute; inset:10px; z-index:2; padding:18px; border:1px solid #d5d5d5; border-radius:8px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.08); overflow:auto; }
.fd-step-details > b { display:block; padding-right:28px; font-size:13px; color:var(--fd-ink); }
.fd-step-details p { margin:12px 0 0; font-size:12px; line-height:1.6; }
.fd-step-details .fd-detail-close { position:absolute; top:10px; right:10px; width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--fd-line); border-radius:6px; }
.fd-detail-close svg { width:12px; height:12px; }
.fd-gn[aria-expanded="true"] { border-color:#737373; }
.fd-gn:hover { box-shadow:0 0 0 1px #aaa; }

.s-ask .fd-thread-close { width:28px; height:28px; display:grid; place-items:center; border-radius:5px; }
.fd-thread-close:hover { background:#f5f5f5; }
.fd-thread-close svg { width:12px; height:12px; }
.s-ask .fd-open-thread { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; min-height:28px; text-align:left; }
.fd-open-thread img { width:18px; height:18px; object-fit:contain; }
.fd-open-thread img.fd-ch-person { border-radius:3px; object-fit:cover; }
.fd-open-thread > span { color:var(--fd-muted); font-size:11px; }
.fd-open-thread > span:has([id]) { color:#1264a3; font-weight:600; }
.fd-open-thread:hover { text-decoration:underline; }
.s-ask.ended .fd-ch-thread .fd-ch-tmsgs { overflow-y:auto; overscroll-behavior:contain; }
.s-ask.ended .fd-ch-tinner { justify-content:flex-start; padding:12px 0; min-height:100%; }
.fd-reply-form { display:flex; align-items:center; gap:8px; min-width:0; }
.fd-reply-form input { width:100%; min-width:0; border:0; background:none; color:var(--fd-ink); padding:8px; font:inherit; font-size:13px; }
.fd-reply-form button { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:5px; }
.fd-reply-form .fd-send { width:28px; height:28px; }
.s-ask .fd-local-avatar { display:grid; place-items:center; background:#eee; color:var(--fd-ink); font-weight:600; }
.s-ask .fd-ch-wo-h button { margin-left:auto; color:#1264a3; padding:4px; font-size:11px; flex:none; }
.fd-case-details { margin:10px 0 0; padding-top:8px; border-top:1px solid var(--fd-line); color:var(--fd-text); }
@media (max-width: 760px) {
  .fdemo.s-ask.fd-thread-closed .fd-ch-main { display:flex; }
}

.s-agent .fd-review-members { display:block; margin-top:6px; padding:4px 7px; border:1px solid #ddd; border-radius:4px; background:#fff; color:var(--fd-text); font-size:10px; white-space:nowrap; }
.s-agent .fd-br-team { overflow-y:auto; overscroll-behavior:contain; }
.s-agent .fd-member-notice { margin:4px 0; color:var(--fd-text); font-size:10px; line-height:1.4; }
.s-agent.fd-reviewing-members .fd-br-tbl tr.fd-gone { display:table-row; }
.s-agent.fd-reviewing-members tr.fd-gone .fd-br-who { opacity:.65; }
.s-agent .fd-br-rm:not(:disabled):hover { background:#eee; }

.s-cases .fd-kcard-m { flex-wrap:wrap; gap:5px; }
.s-cases .fd-case-move { width:100%; min-width:0; padding:4px; border:1px solid #ddd; border-radius:5px; background:#fff; color:var(--fd-text); font:inherit; font-size:11px; }
.fdemo.focus.s-cases.ended .fd-cols { grid-template-columns:repeat(4,minmax(0,1fr)); overflow:auto; overscroll-behavior:contain; }
.fdemo.focus.s-cases.ended .fd-col { display:flex; overflow:visible; }
@media (max-width: 760px) {
  .fdemo.focus.s-cases.ended .fd-cols { grid-template-columns:repeat(4,150px); }
}