/* Zedstar montage: Acme Corp.'s patient flow system for its hospitals (assets/zedstar/dash-hospital.js builds it), in
   DX Sidekick's Daylight look: frosted panes over the red, white and blue slabs, a floating sidebar, pill controls,
   Geist for the interface, Geist Mono for keys and times, Newsreader for titles and the company's name.
   Everything is scoped under .zs-h and every class carries the zs-h- prefix; it is drawn in a 1600x1000 design space
   that the script scales to its host. The glass has no backdrop-filter: each pane paints a blurred copy of the ground
   (an image decoded once, set by the script as --zs-h-frost) under its white tint, offset to where the pane sits, so
   the slabs light it the way frost would. Motion is transform, opacity, clip-path and stroke-dashoffset only; the
   script pauses any transition still running when the dashboard stops. */

.zs-h {
  --h-ground: #edf1f7;
  --h-glass: rgba(255, 255, 255, 0.42);
  --h-rim: rgba(255, 255, 255, 0.78);
  --h-light: rgba(255, 255, 255, 0.85);
  --h-shadow: 0 30px 70px -30px rgba(12, 24, 48, 0.32), 0 2px 8px rgba(12, 24, 48, 0.06);
  --h-control: rgba(255, 255, 255, 0.62);
  --h-control-hover: rgba(255, 255, 255, 0.92);
  --h-control-line: rgba(20, 40, 80, 0.1);
  --h-field: rgba(255, 255, 255, 0.72);
  --h-field-line: rgba(20, 40, 80, 0.13);
  --h-fg: #0a1120;
  --h-fg-2: #34445e;
  --h-fg-3: #4a5a7d;
  --h-line: rgba(20, 40, 80, 0.08);
  --h-line-strong: rgba(20, 40, 80, 0.15);
  --h-accent: #c9384c;
  --h-accent-text: #a3243c;
  --h-accent-soft: rgba(201, 56, 76, 0.12);
  --h-ok: #3d5479;
  --h-ok-soft: rgba(79, 106, 147, 0.14);
  --h-ice: #6f8cb5;
  --h-btn: #c9384c;
  --h-btn-hover: #d04157;
  --h-btn-press: #b32a44;
  --h-menu: rgba(255, 255, 255, 0.86);
  --h-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --h-out: cubic-bezier(0.16, 1, 0.3, 1);
  --h-in: cubic-bezier(0.55, 0, 1, 0.45);
  --h-sans: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --h-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --h-serif: Newsreader, Georgia, "Times New Roman", serif;
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 1000px;
  overflow: hidden;
  transform-origin: 0 0;
  contain: layout paint;
  background: var(--zs-h-ground, none) 0 0 / 1600px 1000px no-repeat, var(--h-ground);
  color: var(--h-fg);
  font: 400 14px/1.5 var(--h-sans);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  pointer-events: none;
}
.zs-h *, .zs-h *::before, .zs-h *::after { box-sizing: border-box; margin: 0; padding: 0; }
.zs-h svg { display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zs-h b { font-weight: 500; color: var(--h-fg); }
.zs-h small, .zs-h em, .zs-h i { font-style: normal; }
.zs-h img { display: block; }
.zs-h-num { font-variant-numeric: tabular-nums; }
.zs-h-mono { font-family: var(--h-mono); font-size: 11px; letter-spacing: 0; }
.zs-h.is-instant, .zs-h.is-instant * { transition: none !important; }

/* ---- glass: a pane paints the frosted ground under its tint, then its rim and the light inside its top edge ---- */
.zs-h-glass { position: absolute; border-radius: 22px; overflow: hidden; box-shadow: var(--h-shadow); }
.zs-h-glass::before { content: ""; position: absolute; left: calc(var(--x) * -1); top: calc(var(--y) * -1); width: 1600px; height: 1000px; background: linear-gradient(var(--h-glass), var(--h-glass)), var(--zs-h-frost, none) 0 0 / 1600px 1000px no-repeat, var(--h-ground); }
.zs-h-glass::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--h-rim), inset 0 2px 0 var(--h-light); pointer-events: none; }
.zs-h-glass > * { position: absolute; z-index: 1; }
.zs-h-solid::before { background: linear-gradient(var(--h-menu), var(--h-menu)), var(--zs-h-frost, none) 0 0 / 1600px 1000px no-repeat, var(--h-ground); }

/* ---- type ---- */
.zs-h-marker { display: flex; align-items: center; gap: 10px; font: 400 15px/15px var(--h-serif); color: var(--h-fg-2); white-space: nowrap; }
.zs-h-marker::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--h-accent); }
.zs-h-title { font: 400 54px/57px var(--h-serif); letter-spacing: -0.014em; white-space: nowrap; }
.zs-h-lede { font-size: 16px; line-height: 25.6px; color: var(--h-fg-2); white-space: nowrap; }
.zs-h-ptitle { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 600; line-height: 22px; letter-spacing: -0.01em; white-space: nowrap; }
.zs-h-ptitle small { font-weight: 400; letter-spacing: 0; color: var(--h-fg-3); }

/* ---- controls ---- */
.zs-h-btn { display: inline-flex; height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; transition: transform 90ms var(--h-ease); }
.zs-h-btn svg { width: 16px; height: 16px; flex: none; }
.zs-h-btn.is-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.zs-h-btn.is-primary { color: #fff; background: var(--h-btn); }
.zs-h-btn.is-primary.is-hover { background: var(--h-btn-hover); }
.zs-h-btn.is-secondary { color: var(--h-fg); background: var(--h-control); box-shadow: inset 0 0 0 1px var(--h-control-line); }
.zs-h-btn.is-secondary.is-solid { background: rgba(255, 255, 255, 0.72); }
.zs-h-btn.is-secondary.is-hover { background: var(--h-control-hover); }
.zs-h-btn.is-quiet { color: var(--h-fg-2); }
.zs-h-btn.is-pressed { transform: scale(0.97); }
.zs-h-btn.is-primary.is-pressed { background: var(--h-btn-press); }
.zs-h-icon-btn { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 999px; color: var(--h-fg-3); transition: transform 90ms var(--h-ease); }
.zs-h-icon-btn svg { width: 16px; height: 16px; }
.zs-h-icon-btn.is-hover { background: var(--h-control); color: var(--h-fg); box-shadow: inset 0 0 0 1px var(--h-control-line); }
.zs-h-icon-btn.is-pressed { transform: scale(0.94); }

.zs-h-badge { display: inline-flex; height: 24px; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: var(--h-control); box-shadow: inset 0 0 0 1px var(--h-control-line); font-size: 12px; font-weight: 500; line-height: 24px; color: var(--h-fg-2); white-space: nowrap; }
.zs-h-badge::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 999px; background: currentColor; }
.zs-h-badge.is-ok { background: var(--h-ok-soft); color: var(--h-ok); box-shadow: none; }
.zs-h-badge.is-accent { background: var(--h-accent-soft); color: var(--h-accent-text); box-shadow: none; }
.zs-h-badge.is-plain::before { display: none; }
.zs-h-badge > i { display: block; width: 6px; height: 6px; margin-right: -2px; border-radius: 999px; }
.zs-h-badge.is-key::before { display: none; }

.zs-h-key { display: inline-grid; min-width: 22px; height: 22px; place-items: center; padding: 0 6px; border-radius: 6px; background: var(--h-control); box-shadow: inset 0 0 0 1px var(--h-control-line); font: 400 11px/22px var(--h-mono); color: var(--h-fg-2); }
.zs-h-key svg { width: 11px; height: 11px; stroke-width: 1.8; }

.zs-h-seg { display: inline-flex; height: 36px; padding: 3px; border-radius: 999px; background: var(--h-control); box-shadow: inset 0 0 0 1px var(--h-control-line); }
.zs-h-seg > span { position: relative; z-index: 1; display: inline-flex; height: 30px; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: 999px; font-size: 13px; color: var(--h-fg-2); white-space: nowrap; }
.zs-h-seg > span.is-on { font-weight: 500; color: var(--h-fg); }
.zs-h-seg small { color: var(--h-fg-3); }
.zs-h-seg > i { position: absolute; left: 3px; top: 3px; height: 30px; border-radius: 999px; background: var(--h-control-hover); box-shadow: 0 1px 2px rgba(10, 17, 32, 0.12), inset 0 0 0 1px var(--h-control-line); transition: transform 280ms var(--h-out); }


.zs-h-av { display: grid; flex: none; width: 32px; height: 32px; place-items: center; border-radius: 999px; background: rgba(196, 205, 219, 0.71); box-shadow: inset 0 0 0 1px var(--h-control-line); font-size: 12px; font-weight: 600; color: var(--h-fg); letter-spacing: 0.01em; }
.zs-h-stack { display: flex; align-items: center; }
.zs-h-stack .zs-h-av { width: 30px; height: 30px; font-size: 10.5px; box-shadow: 0 0 0 2px #eef1f6; }
.zs-h-stack .zs-h-av + .zs-h-av { margin-left: -6px; }
.zs-h-stack .zs-h-av:nth-child(1) { background: #cfd8e6; }
.zs-h-stack .zs-h-av:nth-child(2) { background: #e3d3dc; }
.zs-h-stack .zs-h-av:nth-child(3) { background: #d6e0ee; }
.zs-h-stack .zs-h-av.is-more { background: #f7f9fc; color: var(--h-fg-3); font-weight: 500; box-shadow: 0 0 0 2px #eef1f6, inset 0 0 0 1px var(--h-control-line); }

/* ---- the sidebar ---- */
.zs-h-side { left: 12px; top: 12px; width: 264px; height: 976px; }
.zs-h-toggle { left: 12px; top: 12px; display: grid; width: 36px; height: 36px; place-items: center; color: var(--h-fg-2); }
.zs-h-toggle svg { width: 18px; height: 18px; }
.zs-h-brand { left: 61px; top: 13px; display: flex; height: 36px; align-items: center; gap: 12px; }
.zs-h-brand img { width: 84px; height: 15px; }
.zs-h-brand i { width: 1px; height: 16px; background: var(--h-line-strong); }
.zs-h-brand span { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--h-fg-2); white-space: nowrap; }
.zs-h-org { left: 23px; top: 70px; width: 218px; }
.zs-h-org small { display: block; font-size: 12px; line-height: 17px; color: var(--h-fg-3); }
.zs-h-org b { display: block; margin-top: 7px; font: 400 21px/24px var(--h-serif); color: var(--h-fg); }
.zs-h-org svg { position: absolute; right: 0; top: 28px; width: 16px; height: 16px; color: var(--h-fg-3); }
.zs-h-search { left: 13px; top: 140px; display: flex; width: 238px; height: 38px; align-items: center; gap: 10px; padding: 0 8px 0 12px; border-radius: 12px; background: var(--h-control); box-shadow: inset 0 0 0 1px var(--h-control-line); font-size: 13.5px; color: var(--h-fg-3); transition: transform 90ms var(--h-ease); }
.zs-h-search > svg { width: 16px; height: 16px; stroke-width: 1.7; }
.zs-h-search .zs-h-key { display: inline-flex; gap: 3px; align-items: center; margin-left: auto; }
.zs-h-search.is-hover { background: var(--h-control-hover); color: var(--h-fg-2); }
.zs-h-nav { left: 13px; top: 188px; width: 238px; }
.zs-h-navind { position: absolute; left: 0; top: 0; width: 238px; height: 40px; border-radius: 12px; background: var(--h-control); box-shadow: inset 0 0 0 1px var(--h-control-line); }
.zs-h-navitem { position: relative; display: flex; height: 40px; align-items: center; gap: 12px; margin-bottom: 4px; padding: 0 12px; border-radius: 12px; font-size: 14px; color: var(--h-fg-2); white-space: nowrap; }
.zs-h-navitem svg { width: 18px; height: 18px; flex: none; color: var(--h-fg-3); }
.zs-h-navitem.is-on { font-weight: 500; color: var(--h-fg); }
.zs-h-navitem.is-on svg { color: var(--h-accent); }
.zs-h-count { display: inline-grid; min-width: 20px; height: 20px; margin-left: auto; place-items: center; padding: 0 6px; border-radius: 999px; background: var(--h-btn); font: 600 11px/20px var(--h-mono); color: #fff; transition: opacity 180ms var(--h-in); }
.zs-h-foot { left: 13px; top: 866px; width: 238px; height: 1px; background: var(--h-line); }
.zs-h-user { left: 23px; top: 881px; display: flex; width: 218px; height: 54px; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; }
.zs-h-user > span:nth-child(2) { display: grid; min-width: 0; }
.zs-h-user b { font-size: 13px; line-height: 19.5px; }
.zs-h-user small { font-size: 12px; line-height: 18px; color: var(--h-fg-3); white-space: nowrap; }
.zs-h-user svg { width: 16px; height: 16px; margin-left: auto; color: var(--h-fg-3); }

/* ---- the page head ---- */
.zs-h-head { position: absolute; left: 340px; top: 34px; width: 1188px; height: 132px; }
.zs-h-head .zs-h-title { position: absolute; left: 0; top: 31px; }
.zs-h-head .zs-h-lede { position: absolute; left: 0; top: 100px; }
.zs-h-acts { position: absolute; right: 0; top: 88px; display: flex; align-items: center; gap: 10px; }
.zs-h-acts .zs-h-stack { margin-right: 8px; }
.zs-h-tabs { position: absolute; left: 340px; top: 188px; display: flex; height: 36px; gap: 4px; }
.zs-h-tab { position: relative; z-index: 1; display: inline-flex; height: 36px; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; font-size: 14px; color: var(--h-fg-2); white-space: nowrap; }
.zs-h-tab.is-on { font-weight: 500; color: var(--h-fg); }
.zs-h-tab small { font-family: var(--h-mono); font-size: 11px; font-weight: 400; color: var(--h-fg-3); }
/* the lit tab: two caps and a middle, each moved by transform, so it slides and changes width without animating width */
.zs-h-tabind { position: absolute; left: 0; top: 0; width: 0; height: 36px; }
.zs-h-tabind > i { position: absolute; top: 0; height: 36px; background: #f9fafc; transition: transform 280ms var(--h-out); }
.zs-h-tabind > i:nth-child(1) { left: 0; width: 18px; border-radius: 18px 0 0 18px; box-shadow: inset 1px 0 0 var(--h-control-line), inset 0 1px 0 var(--h-control-line), inset 0 -1px 0 var(--h-control-line); }
.zs-h-tabind > i:nth-child(2) { left: 0; width: 100px; transform-origin: 0 50%; box-shadow: inset 0 1px 0 var(--h-control-line), inset 0 -1px 0 var(--h-control-line); }
.zs-h-tabind > i:nth-child(3) { left: 0; width: 18px; border-radius: 0 18px 18px 0; box-shadow: inset -1px 0 0 var(--h-control-line), inset 0 1px 0 var(--h-control-line), inset 0 -1px 0 var(--h-control-line); }

/* ---- the ward's plan ---- */
.zs-h-ward { left: 340px; top: 252px; width: 720px; height: 446px; }
.zs-h-ward .zs-h-ptitle { left: 28px; top: 33px; }
.zs-h-ward .zs-h-seg { right: 28px; top: 26px; }
.zs-h-plan { left: 28px; top: 78px; width: 664px; height: 300px; }
.zs-h-plan > svg { position: absolute; left: 0; top: 0; width: 664px; height: 300px; }
.zs-h-room { fill: rgba(255, 255, 255, 0.4); stroke: none; }
.zs-h-hall { fill: rgba(232, 237, 245, 0.5); stroke: none; }
.zs-h-wall { stroke: rgba(20, 40, 80, 0.15); stroke-width: 1.1; stroke-linecap: square; }
.zs-h-gap { fill: #f2f4f8; stroke: none; }
.zs-h-door { stroke: rgba(20, 40, 80, 0.13); stroke-width: 1; }
.zs-h-desk { fill: rgba(255, 255, 255, 0.72); stroke: rgba(20, 40, 80, 0.11); stroke-width: 1; }
.zs-h-label { position: absolute; font-size: 10.5px; line-height: 14px; color: rgba(74, 90, 125, 0.8); white-space: nowrap; transform: translateX(-50%); }
.zs-h-bed { position: absolute; width: 28px; height: 38px; transition: opacity 280ms var(--h-ease); }
.zs-h-ly { position: absolute; inset: 0; border-radius: 7px; opacity: 0; transition: opacity 420ms var(--h-ease); }
.zs-h-ly.is-on { opacity: 1; }
.zs-h-ly.is-top { z-index: 1; }
.zs-h-ly.is-pre { opacity: 0; transition: none; }
.zs-h-ly::before { content: ""; position: absolute; left: 5px; right: 5px; top: 4px; height: 5px; border-radius: 2px; }
.zs-h-bed.is-down .zs-h-ly::before { top: auto; bottom: 4px; }
.zs-h-ly span { position: absolute; left: 0; right: 0; top: 17px; text-align: center; font-size: 10.5px; line-height: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.zs-h-bed.is-down .zs-h-ly span { top: 9px; }
.zs-h-occ { background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px rgba(20, 40, 80, 0.12); color: var(--h-fg-2); }
.zs-h-occ::before { background: #c8d0de; }
.zs-h-out { background: #fbe6e9; box-shadow: inset 0 0 0 1px rgba(201, 56, 76, 0.3); color: var(--h-accent-text); }
.zs-h-out::before { background: #e04a5c; }
.zs-h-clean { background: #e3e8f0; box-shadow: inset 0 0 0 1px rgba(20, 40, 80, 0.1); color: var(--h-fg-3); }
.zs-h-clean::before { background: #a4b1c8; }
.zs-h-in { background: #dbe5f2; box-shadow: inset 0 0 0 1px rgba(79, 106, 147, 0.36); color: #3b5273; }
.zs-h-in::before { background: #6f8cb5; }
.zs-h-free { background: #ffffff; box-shadow: inset 0 0 0 1.5px var(--h-ok); color: var(--h-ok); }
.zs-h-free::before { background: var(--h-ok); }
.zs-h-ring { position: absolute; inset: -5px; border-radius: 11px; box-shadow: 0 0 0 2px var(--h-accent), 0 0 0 6px rgba(201, 56, 76, 0.12); opacity: 0; transform: scale(1.14); transition: opacity 280ms var(--h-out), transform 280ms var(--h-out); }
.zs-h-bed.is-hit .zs-h-ring { opacity: 1; transform: none; }
.zs-h-plan.is-asking .zs-h-bed:not(.is-hit) { opacity: 0.42; }
.zs-h-flag { position: absolute; z-index: 2; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 999px; box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(0.6); transition: opacity 280ms var(--h-out), transform 280ms var(--h-out); }
.zs-h-flag svg { width: 10px; height: 10px; color: #fff; stroke-width: 2.6; }
.zs-h-flag.is-on { opacity: 1; transform: none; }
.zs-h-flag.is-ask { background: var(--h-accent); }
.zs-h-flag.is-ok { background: var(--h-ok); }
.zs-h-legend { left: 28px; top: 394px; display: flex; gap: 8px; }
.zs-h-legend .zs-h-badge { gap: 7px; }
.zs-h-legend .zs-h-badge::before { display: none; }
.zs-h-legend .zs-h-badge > i { width: 8px; height: 11px; border-radius: 2px; margin: 0; }
.zs-h-legend .zs-h-swap { color: var(--h-fg-3); font-family: var(--h-mono); font-size: 11px; font-weight: 400; }

/* ---- the operating rooms ---- */
.zs-h-th { left: 340px; top: 722px; width: 720px; height: 330px; }
.zs-h-th .zs-h-ptitle { left: 28px; top: 33px; }
.zs-h-th .zs-h-badge { right: 28px; top: 32px; }
.zs-h-axis { left: 140px; top: 76px; width: 552px; height: 14px; }
.zs-h-axis span { position: absolute; top: 0; transform: translateX(-50%); font: 400 11px/14px var(--h-mono); color: var(--h-fg-3); }
.zs-h-grid { left: 140px; top: 98px; width: 552px; height: 240px; }
.zs-h-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--h-line); }
.zs-h-lane { left: 28px; width: 104px; height: 30px; }
.zs-h-lane b { display: block; font-size: 13px; line-height: 15px; }
.zs-h-lane small { display: block; font-size: 11.5px; line-height: 14px; color: var(--h-fg-3); white-space: nowrap; }
.zs-h-case { height: 30px; padding: 0 9px; border-radius: 9px; font-size: 12px; font-weight: 500; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 640ms var(--h-out), opacity 280ms var(--h-ease); }
.zs-h-case.is-done { background: rgba(255, 255, 255, 0.32); box-shadow: inset 0 0 0 1px var(--h-line); color: rgba(74, 90, 125, 0.85); font-weight: 400; }
.zs-h-case.is-now { background: #56688a; color: #fff; }
.zs-h-case.is-next { background: rgba(255, 255, 255, 0.82); box-shadow: inset 0 0 0 1px var(--h-control-line); color: var(--h-fg-2); }
.zs-h-case.is-off { background: transparent; outline: 1px dashed rgba(20, 40, 80, 0.26); outline-offset: -1px; color: var(--h-fg-3); font-weight: 400; }
.zs-h-case.is-late { padding: 0; background: rgba(201, 56, 76, 0.22); }
.zs-h-case.is-gone { opacity: 0; }
.zs-h-th .zs-h-now { z-index: 0; top: 92px; width: 1.5px; height: 250px; background: var(--h-accent); }
.zs-h-now span { position: absolute; left: 50%; top: -15px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--h-accent); color: #fff; font: 500 10.5px/18px var(--h-mono); transform: translateX(-50%); }

/* ---- waiting on you: the approval ---- */
.zs-h-wait { left: 1084px; top: 252px; width: 444px; height: 279px; }
.zs-h-wait .zs-h-marker { left: 28px; top: 30px; }
.zs-h-state { right: 28px; top: 26px; display: grid; }
.zs-h-state > span { grid-area: 1 / 1; justify-self: end; transition: opacity 280ms var(--h-out), transform 280ms var(--h-out); }
.zs-h-state > span.is-out { opacity: 0; transform: translateY(-5px); transition-duration: 180ms; }
.zs-h-state > span.is-pre { opacity: 0; transform: translateY(5px); transition: none; }
.zs-h-wtitle { left: 28px; top: 58px; font: 400 23px/28px var(--h-serif); letter-spacing: -0.005em; white-space: nowrap; }
.zs-h-wbody { left: 28px; top: 92px; width: 388px; font-size: 14px; line-height: 21px; color: var(--h-fg-2); }
.zs-h-prop { left: 28px; top: 142px; display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 21px; white-space: nowrap; }
.zs-h-prop small { font-size: 13px; color: var(--h-fg-3); }
.zs-h-chips { left: 28px; top: 175px; display: flex; gap: 6px; }
.zs-h-chip { display: inline-flex; height: 24px; align-items: center; gap: 6px; padding: 0 10px 0 8px; border-radius: 999px; background: var(--h-control); box-shadow: inset 0 0 0 1px var(--h-control-line); font-size: 12px; font-weight: 500; color: var(--h-fg-2); white-space: nowrap; }
.zs-h-chip svg { width: 13px; height: 13px; color: var(--h-fg-3); stroke-width: 1.8; }
.zs-h-wfoot { left: 28px; top: 213px; width: 388px; height: 40px; }
.zs-h-wacts, .zs-h-wdone { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; transition: opacity 280ms var(--h-out), transform 280ms var(--h-out); }
.zs-h-wacts .zs-h-from { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--h-fg-3); white-space: nowrap; }
.zs-h-wacts .zs-h-from .zs-h-av { width: 26px; height: 26px; background: rgba(255, 255, 255, 0.7); color: var(--h-fg-2); }
.zs-h-wacts .zs-h-from .zs-h-av svg { width: 14px; height: 14px; }
.zs-h-wdone { opacity: 0; transform: translateY(6px); gap: 10px; font-size: 14px; }
.zs-h-wdone .zs-h-tick { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 999px; background: var(--h-ok-soft); color: var(--h-ok); }
.zs-h-wdone .zs-h-tick svg { width: 14px; height: 14px; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 420ms var(--h-out) 120ms; }
.zs-h-wdone small { margin-left: auto; font-family: var(--h-mono); font-size: 11px; color: var(--h-fg-3); }
.zs-h-wait.is-done .zs-h-wacts { opacity: 0; transform: translateY(-6px); transition-duration: 180ms; }
.zs-h-wait.is-done .zs-h-wdone { opacity: 1; transform: none; transition-delay: 120ms; }
.zs-h-wait.is-done .zs-h-tick svg { stroke-dashoffset: 0; }

/* ---- agents ---- */
.zs-h-ag { left: 1084px; top: 555px; width: 444px; height: 480px; }
.zs-h-ag .zs-h-ptitle { left: 28px; top: 33px; }
.zs-h-ag .zs-h-seg { right: 28px; top: 26px; }
.zs-h-roster { left: 28px; top: 76px; width: 388px; }
.zs-h-agent { position: relative; display: flex; height: 46px; align-items: center; gap: 12px; border-top: 1px solid var(--h-line); }
.zs-h-agent:first-child { border-top: 0; }
.zs-h-agent .zs-h-av { position: relative; background: rgba(255, 255, 255, 0.72); color: var(--h-fg-2); }
.zs-h-agent .zs-h-av svg { width: 16px; height: 16px; }
.zs-h-pulse { position: absolute; inset: -1px; border-radius: 999px; box-shadow: 0 0 0 1.5px var(--h-ice); opacity: 0; }
.zs-h-agent > span:nth-child(2) { position: relative; display: grid; min-width: 0; flex: 1; }
.zs-h-agent b { font-size: 13.5px; line-height: 18px; }
.zs-h-sub { display: grid; font-size: 12px; line-height: 17px; color: var(--h-fg-3); white-space: nowrap; }
.zs-h-sub > span { grid-area: 1 / 1; transition: opacity 280ms var(--h-out), transform 280ms var(--h-out); }
.zs-h-sub > span.is-out { opacity: 0; transform: translateY(-5px); transition-duration: 180ms; }
.zs-h-sub > span.is-pre { opacity: 0; transform: translateY(5px); transition: none; }
.zs-h-astate { display: grid; }
.zs-h-astate > span { grid-area: 1 / 1; justify-self: end; transition: opacity 280ms var(--h-out), transform 280ms var(--h-out); }
.zs-h-astate > span.is-out { opacity: 0; transform: translateY(-5px); transition-duration: 180ms; }
.zs-h-astate > span.is-pre { opacity: 0; transform: translateY(5px); transition: none; }
.zs-h-steps { position: absolute; right: 0; top: 25px; display: flex; gap: 3px; opacity: 0; transition: opacity 280ms var(--h-out); }
.zs-h-agent.is-prog .zs-h-steps { opacity: 1; }
.zs-h-steps > i { position: relative; width: 8px; height: 4px; overflow: hidden; border-radius: 999px; background: var(--h-control-line); }
.zs-h-steps > i > b { position: absolute; inset: 0; border-radius: inherit; background: var(--h-ok); transform: scaleX(0); transform-origin: 0 50%; transition: transform 280ms var(--h-out); }
.zs-h-steps > i.is-on > b { transform: none; }
.zs-h-steps.is-snap > i > b { transition: none; }
.zs-h-actlabel { left: 28px; top: 270px; display: flex; width: 388px; justify-content: space-between; font-size: 13px; font-weight: 500; line-height: 18px; color: var(--h-fg-2); }
.zs-h-actlabel small { font-weight: 400; color: var(--h-fg-3); }
.zs-h-feed { left: 28px; top: 296px; width: 388px; height: 184px; overflow: hidden; }
.zs-h-step { position: absolute; left: 0; top: 0; display: flex; width: 388px; gap: 10px; padding: 8px 0 10px; border-top: 1px solid var(--h-line); transition: transform 280ms var(--h-out), opacity 280ms var(--h-out); }
.zs-h-step.is-pre { opacity: 0; transition: none; }
.zs-h-step.is-gone { opacity: 0; }
.zs-h-step > i { display: grid; flex: none; width: 22px; height: 22px; margin-top: 1px; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--h-control-line); color: var(--h-fg-3); font-size: 9.5px; font-weight: 600; }
.zs-h-step > i svg { width: 12px; height: 12px; stroke-width: 1.8; }
.zs-h-step > i.is-person { background: rgba(196, 205, 219, 0.71); color: var(--h-fg); }
.zs-h-step > span { flex: 1; font-size: 13px; line-height: 19px; color: var(--h-fg-2); }
.zs-h-step > span b { font-weight: 500; }
.zs-h-step u { text-decoration: underline; text-decoration-color: var(--h-line-strong); text-underline-offset: 3px; color: var(--h-fg); }
.zs-h-step > small { flex: none; margin-top: 2px; font: 400 11px/17px var(--h-mono); color: var(--h-fg-3); }

/* ---- the command menu, over a scrim ---- */
.zs-h-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(10, 14, 24, 0.16); opacity: 0; transition: opacity 180ms var(--h-in); }
.zs-h-scrim.is-on { opacity: 1; transition: opacity 200ms ease-out; }
.zs-h-cmd { left: 520px; top: 120px; z-index: 6; width: 560px; height: 362px; opacity: 0; transform: translateY(8px) scale(0.985); transition: opacity 180ms var(--h-in), transform 180ms var(--h-in); }
.zs-h-cmd.is-on { opacity: 1; transform: none; transition: opacity 200ms var(--h-out), transform 280ms var(--h-out); }
.zs-h-cmd.is-pre { opacity: 0; transform: translateY(12px) scale(0.98); transition: none; }
.zs-h-cin { left: 0; top: 0; width: 560px; height: 58px; }
.zs-h-cin > svg { position: absolute; left: 18px; top: 20px; width: 18px; height: 18px; color: var(--h-fg-3); stroke-width: 1.7; }
.zs-h-cq { position: absolute; left: 50px; top: 0; height: 58px; display: flex; align-items: center; font-size: 16px; white-space: nowrap; }
.zs-h-cph { position: absolute; left: 0; top: 18px; line-height: 22px; color: var(--h-fg-3); }
.zs-h-cq.is-typing .zs-h-cph, .zs-h-cq.is-sent .zs-h-cph { opacity: 0; }
.zs-h-caret { display: inline-block; width: 1.5px; height: 20px; margin-left: 1px; background: var(--h-fg); }
.zs-h-cq.is-sent .zs-h-caret { opacity: 0; }
.zs-h-cin .zs-h-key { position: absolute; right: 16px; top: 18px; }
.zs-h-clist { left: 0; top: 58px; width: 560px; height: 262px; padding: 6px; border-top: 1px solid var(--h-line); }
.zs-h-cgroup { padding: 8px 10px 6px; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--h-fg-3); }
.zs-h-answer { position: relative; height: 92px; padding: 2px 12px 0; }
.zs-h-think { position: absolute; left: 12px; top: 4px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--h-fg-3); opacity: 0; transition: opacity 180ms var(--h-in); }
.zs-h-think.is-on { opacity: 1; transition: opacity 200ms var(--h-out); }
.zs-h-dots { display: flex; gap: 4px; }
.zs-h-dots i { width: 5px; height: 5px; border-radius: 999px; background: var(--h-ok); opacity: 0.25; }
.zs-h-atext { font-size: 14.5px; line-height: 22px; color: var(--h-fg); }
.zs-h-word { opacity: 0; transition: opacity 280ms var(--h-out); }
.zs-h-word.is-on { opacity: 1; }
.zs-h-srcs { display: flex; gap: 6px; margin-top: 10px; }
.zs-h-srcs .zs-h-chip { opacity: 0; transform: translateY(4px); transition: opacity 280ms var(--h-out), transform 280ms var(--h-out); }
.zs-h-srcs .zs-h-chip.is-on { opacity: 1; transform: none; }
.zs-h-citem { display: flex; height: 44px; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 12px; font-size: 14px; }
.zs-h-citem > svg { width: 18px; height: 18px; flex: none; color: var(--h-fg-3); }
.zs-h-citem > .zs-h-ctext { flex: 1; min-width: 0; }
.zs-h-citem small { display: block; font-size: 12px; line-height: 15px; color: var(--h-fg-3); }
.zs-h-citem.is-active { background: var(--h-control-hover); box-shadow: 0 1px 2px rgba(10, 17, 32, 0.06); }
.zs-h-citem.is-active > svg { color: var(--h-accent); }
.zs-h-citem .zs-h-key.is-pressed { background: var(--h-control-line); }
.zs-h-cfoot { left: 0; top: 320px; display: flex; width: 560px; height: 42px; align-items: center; gap: 16px; padding: 0 16px; border-top: 1px solid var(--h-line); font-size: 12px; color: var(--h-fg-3); }
.zs-h-cfoot > span { display: flex; align-items: center; gap: 6px; }

/* ---- a row's menu ---- */
.zs-h-menu { z-index: 7; width: 236px; height: 169px; transform-origin: 100% 0; opacity: 0; transform: translateY(-4px) scale(0.98); transition: opacity 140ms var(--h-in), transform 140ms var(--h-in); }
.zs-h-menu.zs-h-glass { border-radius: 16px; }
.zs-h-menu.is-on { opacity: 1; transform: none; transition: opacity 200ms var(--h-out), transform 260ms var(--h-out); }
.zs-h-mlist { left: 6px; top: 6px; width: 224px; }
.zs-h-mitem { display: flex; height: 36px; align-items: center; gap: 10px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; color: var(--h-fg); white-space: nowrap; }
.zs-h-mitem > svg { width: 16px; height: 16px; flex: none; color: var(--h-fg-3); }
.zs-h-mitem kbd { margin-left: auto; font: 400 11px/1 var(--h-mono); color: var(--h-fg-3); }
.zs-h-mitem.is-hover { background: var(--h-control-hover); box-shadow: inset 0 0 0 1px var(--h-control-line); }
.zs-h-msep { height: 1px; margin: 6px; background: var(--h-line); }

/* ---- the toast ---- */
.zs-h-toast { left: 0; right: 0; bottom: 22px; z-index: 8; width: max-content; height: 44px; margin: 0 auto; border-radius: 999px; opacity: 0; transform: translateY(14px) scale(0.96); --y: 934px; }
.zs-h-toast::before { left: calc((100% - 1600px) / 2); }
.zs-h-toast.is-on { opacity: 1; transform: none; transition: opacity 280ms var(--h-out), transform 280ms var(--h-out); }
.zs-h-toast.is-leaving { opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 180ms var(--h-in), transform 180ms var(--h-in); }
.zs-h-toast > span { position: relative; display: flex; height: 44px; align-items: center; gap: 10px; padding: 0 18px 0 14px; font-size: 14px; white-space: nowrap; }
.zs-h-toast > span > i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 999px; background: var(--h-ok-soft); color: var(--h-ok); }
.zs-h-toast > span > i svg { width: 12px; height: 12px; stroke-width: 2.2; }

/* ---- the pointer: macOS's arrow, moved by transform ---- */
.zs-h-cursor { position: absolute; left: 0; top: 0; z-index: 9; width: 20px; height: 28px; opacity: 0; transition: opacity 180ms var(--h-ease); filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.32)); will-change: transform; }
.zs-h-cursor.is-on { opacity: 1; }
.zs-h-cursor svg { width: 20px; height: 28px; overflow: visible; }

/* text that changes in place: the old line lifts away while the new one rises in */
.zs-h-swap { display: inline-grid; }
.zs-h-swap > span { grid-area: 1 / 1; transition: opacity 280ms var(--h-out), transform 280ms var(--h-out); }
.zs-h-swap > span.is-out { opacity: 0; transform: translateY(-0.3em); transition-duration: 180ms; }
.zs-h-swap > span.is-pre { opacity: 0; transform: translateY(0.3em); transition: none; }

@media (prefers-reduced-motion: reduce) {
  .zs-h * { transition: none !important; }
}