/* Cues: sync diagram drawing (js/diagram.js) and the product mock (js/product.js).
   Block placement (width, margin, the lazy reveal) lives in site.css; this file
   styles what the two scripts render into [data-diagram-mount] and
   [data-product-mount]. Every token has a literal fallback. */

/* =====================================================================
   1. Sync diagram (landing-page variant)
   ===================================================================== */
[data-diagram-mount] { position: relative; }
.sva-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sva-seam { stroke: #d5d9e1; stroke-width: 1px; stroke-dasharray: 4 5; }
.sva-level-ring { stroke: var(--sva-ring, #d9d6d4); stroke-width: 1.2px; }
.sva-piece { stroke: var(--sva-track, #7f9ceb); stroke-width: 1.4px; }
.sva-node { fill: var(--sva-agent, #4172ea); }
.sva-spoke { stroke-width: 1.2px; stroke-dasharray: 3 7; stroke-linecap: round; }
/* reduced motion: the level rings show on the static frame (kept as in the reference) */
@media (prefers-reduced-motion: reduce) { .sva-level-ring { stroke-opacity: .9 !important; } }

/* =====================================================================
   2. Product mock
   ===================================================================== */

/* After mount the block is exactly the frame's height (809 / 590); the
   placeholder min-height (811 / 590) only holds the space before that. */
[data-product-mount][data-product-ready] { min-height: 0; }

/* spring curves: Framer Motion springs sampled to linear() */
.pv-frame {
  --pv-spring-pop: cubic-bezier(.34, 1.56, .64, 1);
  --pv-spring-rot: cubic-bezier(.34, 1.56, .64, 1);
}
@supports (animation-timing-function: linear(0, 1)) {
  .pv-frame {
    /* scale spring: stiffness 480, damping 16, mass 0.7 (619 ms, peak 1.216) */
    --pv-spring-pop: linear(0, 0.073, 0.259, 0.481, 0.719, 0.914, 1.07, 1.164, 1.21, 1.212, 1.184, 1.14, 1.088, 1.042, 1.002, 0.975, 0.959, 0.954, 0.956, 0.964, 0.974, 0.985, 0.995, 1.002, 1.007, 1.01, 1.01, 1.009, 1.007, 1.004, 1.002, 1, 0.999, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 1, 1);
    /* rotate spring: stiffness 480, damping 18, mass 1 (745 ms) */
    --pv-spring-rot: linear(0, 0.081, 0.26, 0.5, 0.731, 0.943, 1.101, 1.195, 1.238, 1.233, 1.199, 1.145, 1.088, 1.033, 0.989, 0.961, 0.945, 0.942, 0.948, 0.96, 0.973, 0.987, 0.999, 1.007, 1.012, 1.014, 1.013, 1.011, 1.008, 1.004, 1.001, 0.999, 0.998, 0.997, 0.997, 0.997, 0.998, 0.999, 0.999, 1, 1);
  }
}

/* ---------- frame, well, scaler, scene ---------- */
.pv-frame, .pv-frame *, .pv-frame ::before, .pv-frame ::after { box-sizing: border-box; }
.pv-frame p { margin: 0; }
.pv-frame i { font-style: normal; }
.pv-frame { width: 100%; }
@media (min-width: 1024px) {
  .pv-frame { border-radius: 24px; border: .5px solid var(--border-strong, rgb(0 0 0 / .2)); padding: 8px; }
}
.pv-well {
  height: 809px;            /* border-box: 809 includes the 1 px borders */
  overflow: hidden;
  overflow: clip;
  border-radius: 16px;
  border: 1px solid var(--border-subtle, rgb(0 0 0 / .08));
  background: var(--surface-quaternary, #f0f0f0);
}
@media (min-width: 1024px) { .pv-well { height: 572px; border: 0; } }
.pv-scale { width: 100%; height: 100%; }
@media (min-width: 1024px) {
  .pv-scale { width: 166.6667%; height: 953px; transform: scale(.6); transform-origin: 0 0; }
}
.pv-scene {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  background: var(--surface-product-scene, rgb(0 0 0 / .04));
  font-family: var(--font-sans, "Geist", ui-sans-serif, system-ui, sans-serif);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  letter-spacing: -.04px;   /* -.0025em, inherited as -0.04px */
  word-spacing: normal;
  white-space: normal;
  font-synthesis: none;
  font-feature-settings: "liga" 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: rgb(0 0 0 / .87);
}
@media (min-width: 1024px) { .pv-scene { align-items: center; justify-content: center; padding: 96px; } }
/* Below 1024 the window starts 200 px left of the well (phones see the chat pane),
   and 32 px in from both sides from 640. */
.pv-winwrap { position: absolute; top: 32px; right: 32px; left: -200px; }
@media (min-width: 640px) { .pv-winwrap { left: 32px; } }
@media (min-width: 1024px) { .pv-winwrap { position: static; width: 100%; } }

/* ---------- window ---------- */
.pv-window {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  overflow: hidden;
  overflow: clip;
  height: 745px;
  width: max(100%, 578px);
  min-width: 0;
  background: rgb(255 255 255 / .8);
  border-radius: 10px;
  box-shadow: var(--shadow-app-window, 0 4px 16px -2px rgb(0 0 0 / .08), 0 12px 40px -8px rgb(0 0 0 / .16), 0 0 0 .5px rgb(0 0 0 / .02));
}
@media (min-width: 1024px) { .pv-window { width: 100%; } }
.pv-titlebar { position: relative; flex: none; width: 100%; height: 28px; overflow: hidden; overflow: clip; border-radius: 10px 10px 0 0; }
.pv-lights { position: absolute; left: 6px; top: 6px; display: flex; align-items: center; gap: 7px; padding: 3px; }
.pv-lights i { display: block; width: 10px; height: 10px; border-radius: 100px; border: .5px solid rgb(0 0 0 / .1); }
.pv-lights i:nth-child(1) { background: #ff736a; }
.pv-lights i:nth-child(2) { background: #febc2e; }
.pv-lights i:nth-child(3) { background: #19c332; }
.pv-title {
  position: absolute;
  left: calc(50% + .5px);
  top: 14px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font: 700 13px/normal -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  letter-spacing: -.052px;
  color: rgb(0 0 0 / .76);
}

.pv-ico {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.33;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pv-ico-fill { fill: currentColor; stroke: none; }

/* rail */
.pv-rail { position: absolute; left: 0; top: 28px; width: 48px; height: 717px; padding: 8px; display: flex; flex-direction: column; align-items: center; overflow: hidden; overflow: clip; }
.pv-rail-top { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 32px; }
.pv-logo { width: 32px; height: 32px; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px -2px rgb(0 0 0 / .08); display: grid; place-items: center; color: #282828; }
.pv-logo .pv-ico { width: 14px; height: 14px; }
.pv-rail-div { position: relative; width: 16px; height: 0; }
.pv-rail-div::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgb(0 0 0 / .035); } /* sampled: VP1400 */
.pv-rail-btns { display: flex; flex-direction: column; gap: 8px; }
.pv-rail-btn { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: rgb(0 0 0 / .45); }
.pv-rail-btn.pv-on { background: rgb(0 0 0 / .08); color: rgb(0 0 0 / .87); }

/* main area */
.pv-main { position: absolute; left: 48px; right: 0; top: 28px; bottom: 0; display: flex; align-items: center; gap: 6px; }

/* skeleton primitives */
.pv-sk { display: block; flex: none; border-radius: 3px; background: rgb(0 0 0 / .03); }
.pv-sk4 { background: rgb(0 0 0 / .04); }
.pv-sk6 { background: rgb(0 0 0 / .06); }
.pv-sk8 { background: rgb(0 0 0 / .08); }
.pv-sq16 { display: block; flex: none; width: 16px; height: 16px; border-radius: 3px; background: rgb(0 0 0 / .06); }
.pv-dot16 { display: block; flex: none; width: 16px; height: 16px; border-radius: 999px; background: rgb(0 0 0 / .06); }
.pv-pile { display: flex; align-items: center; margin-left: -3px; flex: none; }
.pv-pile i { display: block; width: 22px; height: 22px; border-radius: 999px; border: 3px solid #fff; background: #f0f0f0; margin-right: -8px; flex: none; }
.pv-pile i:last-child { margin-right: 0; }

/* sidebar */
.pv-side { flex: none; width: 280px; height: 100%; display: flex; flex-direction: column; overflow: hidden; overflow: clip; background: #fff; border-radius: 10px 6px 0 0; box-shadow: 0 2px 8px -2px rgb(0 0 0 / .08); }
.pv-side-head { flex: none; height: 48px; border-bottom: 1px solid rgb(0 0 0 / .03); padding: 12px 16px; display: flex; align-items: center; gap: 16px; }
.pv-side-head-l { flex: 1 0 0; min-width: 1px; display: flex; align-items: center; }
.pv-side-bar { width: 155px; height: 16px; }
.pv-icobox { padding: 4px; border-radius: 4px; flex: none; }
.pv-tiles { flex: none; display: flex; gap: 8px; padding: 16px 16px 12px; }
.pv-tiles i { display: block; flex: none; width: 64px; height: 64px; border-radius: 6px; background: rgb(0 0 0 / .03); }
.pv-list { flex: 1 0 0; min-height: 1px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px; width: 100%; }
.pv-grp { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.pv-g12 { gap: 12px; }
.pv-g4 { gap: 4px; }
.pv-r24 { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px; width: 100%; }
.pv-r32 { display: flex; align-items: center; gap: 8px; height: 32px; padding: 6px 8px; width: 100%; border-radius: 6px; }
.pv-r32.pv-ind { padding-left: 24px; gap: 12px; }
.pv-r32.pv-rg12 { gap: 12px; }
.pv-r32 .pv-in { flex: 1 0 0; min-width: 1px; display: flex; align-items: center; gap: 8px; }
.pv-w100 { width: 100px; height: 16px; min-width: 0; flex: 0 1 auto; }
.pv-badge { flex: none; width: 16px; height: 16px; border-radius: 12px; background: #2563eb; color: #fff; display: grid; place-items: center; font-weight: 500; font-size: 10px; line-height: 10px; }
.pv-sel { background: rgb(0 0 0 / .06); color: rgb(0 0 0 / .7); }
.pv-sel span { flex: 1 0 0; min-width: 1px; font-size: 14px; line-height: 20px; color: rgb(0 0 0 / .87); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 16px; display: flex; align-items: center; }
.pv-hr { position: relative; flex: none; width: 256px; height: 0; }
.pv-hr::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgb(0 0 0 / .01); } /* almost invisible (VP1400 254, W2000 255) */
.pv-conn { position: relative; flex: none; width: 34px; height: 32px; }
.pv-conn::before { content: ""; position: absolute; left: 17px; width: 1px; background: rgb(0 0 0 / .12); }
.pv-conn::after { content: ""; position: absolute; left: 17px; top: 16px; width: 7px; height: 1px; background: rgb(0 0 0 / .12); }
.pv-conn.pv-elbow::before { top: 4px; height: 13px; }
.pv-conn.pv-tee::before { top: 0; bottom: 0; }
.pv-conn.pv-end::before { top: -29px; height: 46px; }
.pv-stubrow { display: flex; align-items: flex-start; width: 100%; }
.pv-stubrow .pv-in { flex: 1 0 0; min-width: 1px; display: flex; align-items: center; gap: 6px; padding: 6px 0; align-self: stretch; }
.pv-stubrow .pv-pile { height: 16px; }
.pv-treerow { display: flex; align-items: center; gap: 8px; width: 100%; }
/* compact sidebar below 1024 (180 wide, header bar fills) */
.pv-compact .pv-side { width: 180px; }
.pv-compact .pv-side-bar { width: auto; flex: 1 0 0; }

/* chat pane */
.pv-pane { flex: 1 0 0; min-width: 1px; height: 100%; display: flex; align-items: flex-start; overflow: hidden; overflow: clip; background: #fff; border: 1px solid #fff; border-radius: 6px 0 0 0; box-shadow: 0 2px 8px -2px rgb(0 0 0 / .08); }
.pv-col { flex: 1 0 0; min-width: 350px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.pv-head { flex: none; width: 100%; height: 48px; border-bottom: 1px solid rgb(0 0 0 / .04); padding: 4px 16px; display: flex; align-items: center; gap: 40px; background: #fff; overflow: hidden; overflow: clip; }
.pv-head-l { flex: 1 0 0; min-width: 1px; display: flex; align-items: center; gap: 10px; height: 28px; }
.pv-head-ico { flex: none; width: 24px; height: 24px; border-radius: 4px; display: grid; place-items: center; color: rgb(0 0 0 / .7); }
.pv-head-title { max-height: 16px; overflow: hidden; display: flex; align-items: center; white-space: nowrap; font-size: 14px; line-height: 20px; color: rgb(0 0 0 / .87); }
.pv-head-r { width: 45px; height: 16px; }
.pv-body { flex: 1 0 0; min-height: 1px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; overflow: hidden; overflow: clip; }
.pv-msgs { flex: 1 0 0; min-height: 1px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-right: 16px; }
.pv-hist { flex: none; width: 100%; display: flex; flex-direction: column; gap: 8px; }

/* skeleton history rows */
.pv-skrow { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 6px 16px; width: 100%; }
.pv-skav { display: block; flex: none; width: 24px; height: 24px; border-radius: 99px; background: rgb(0 0 0 / .04); }
.pv-skcol { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pv-skcol .pv-nm { width: 57px; height: 12px; }
.pv-skcol .pv-tx { height: 20px; max-width: 100%; }
.pv-thr { position: absolute; left: 28px; width: 12px; }
.pv-thr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgb(0 0 0 / .12); }
.pv-thr::after { content: ""; position: absolute; left: 0; bottom: 0; width: 12px; height: 1px; background: rgb(0 0 0 / .12); }
.pv-skstub { position: relative; display: flex; align-items: center; gap: 2px; padding: 6px 16px; width: 100%; }
.pv-skstub .pv-sp { display: block; flex: none; width: 32px; height: 12px; }
.pv-skstub .pv-in { display: flex; align-items: center; gap: 8px; height: 16px; }
.pv-skstub .pv-pile i { background: #f5f5f4; border-color: #fdfdfc; }
.pv-skstub.pv-w .pv-pile i { background: #f0f0f0; border-color: #fff; }
.pv-skstub .pv-ring { position: absolute; left: 20.37px; top: 13.13px; width: 8px; height: 8px; border: 1px solid rgb(0 0 0 / .12); border-radius: 99px; }

/* composer */
.pv-composer { flex: none; width: 100%; padding: 16px; display: flex; flex-direction: column; align-items: center; }
.pv-cbox { width: 100%; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06); padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; overflow: clip; isolation: isolate; }
.pv-cin { height: 40px; padding: 0 4px; overflow: hidden; overflow: clip; white-space: nowrap; font-size: 14px; line-height: 20px; color: rgb(0 0 0 / .45); }
.pv-ctools { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pv-ctools-l { display: flex; align-items: center; gap: 12px; }
.pv-cbtns { display: flex; align-items: center; gap: 4px; height: 28px; }
.pv-cbtn { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: rgb(0 0 0 / .45); flex: none; }
.pv-cdiv { position: relative; width: 0; height: 16px; flex: none; }
.pv-cdiv::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 16px; background: rgb(0 0 0 / .035); } /* sampled: W2000 250 */
.pv-send { position: relative; width: 28px; height: 28px; border-radius: 6px; flex: none; color: rgb(0 0 0 / .87); }
.pv-send .pv-ico { position: absolute; left: 6px; top: 5.5px; }

/* ---------- live rows ---------- */
.pv-live { flex: none; width: 100%; }
.pv-day { padding: 0 0 8px 16px; }
.pv-day-row { display: flex; align-items: center; gap: 10px; height: 24px; }
.pv-day-side { flex: 1 0 0; min-width: 1px; display: flex; align-items: center; height: 10px; }
.pv-day-side .pv-tick { display: block; flex: none; width: 1px; height: 10px; border-radius: 999px; background: rgb(0 0 0 / .08); }
.pv-day-side .pv-ln { display: block; flex: 1 0 0; min-width: 1px; height: 1px; border-radius: 999px; background: rgb(0 0 0 / .08); }
.pv-cap10 { font-weight: 500; font-size: 10px; line-height: 14px; letter-spacing: .8px; text-transform: uppercase; color: rgb(0 0 0 / .55); white-space: nowrap; }
.pv-msg { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 6px 16px; width: 100%; }
.pv-av { flex: none; width: 24px; height: 24px; border-radius: 999px; overflow: hidden; overflow: clip; display: grid; place-items: center; }
.pv-av-you { background: #e7e5e4; color: #fafaf9; }
.pv-av-you .pv-ico { width: 16px; height: 16px; }
/* the assistant: a plain lilac disc with a 12 px filled circle (no vendor mark) */
.pv-av-ai { background: #f5f3ff; }
.pv-av-dot { display: block; width: 12px; height: 12px; border-radius: 999px; background: #7c3aed; }
.pv-mcol { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pv-mcol.pv-g4 { gap: 4px; }
.pv-nb { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
.pv-name { height: 12px; display: flex; align-items: center; white-space: nowrap; font-weight: 500; font-size: 14px; line-height: 20px; color: rgb(0 0 0 / .87); }
.pv-name.pv-name-ai { color: #7c3aed; }
.pv-text { width: 100%; font-size: 14px; line-height: 20px; color: rgb(0 0 0 / .87); overflow-wrap: break-word; word-break: break-word; }
.pv-text.pv-after-status { margin-top: -4px; }
.pv-caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 1px; vertical-align: -2px; background: rgb(0 0 0 / .36); animation: pv-caret .8s infinite; }
@keyframes pv-caret { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }
.pv-status { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pv-status.pv-first { margin-top: -1px; }
.pv-status.pv-after-text { margin-top: -4px; }
.pv-st-ic { position: relative; display: block; width: 16px; height: 16px; flex: none; color: rgb(0 0 0 / .45); }
.pv-st-tx { font-size: 14px; line-height: 20px; color: rgb(0 0 0 / .45); }
.pv-status.pv-busy .pv-st-tx {
  color: transparent;
  background: linear-gradient(90deg, rgb(0 0 0 / .45) 35%, rgb(0 0 0 / .14) 50%, rgb(0 0 0 / .45) 65%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: pv-shimmer 1.8s linear infinite;
}
@keyframes pv-shimmer { 0% { background-position: 130% 0; } to { background-position: -130% 0; } }
.pv-spin { animation: pv-spin .75s linear infinite; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
.pv-wiggle { animation: pv-wiggle 1.6s ease-in-out infinite; }
@keyframes pv-wiggle {
  0%, to { transform: none; }
  25% { transform: translate(2.5px, -2px) rotate(-8deg); }
  50% { transform: translate(-2px, 2px) rotate(6deg); }
  75% { transform: translate(1.5px, -1.5px) rotate(-4deg); }
}
.pv-chip {
  display: flex; align-items: center; gap: 8px; height: 24px; width: fit-content; max-width: 100%;
  padding: 0 12px 0 8px; overflow: hidden; overflow: clip; border-radius: 44px; background: #fff;
  box-shadow: 0 0 1px .5px rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08), 0 3px 6px -3px rgb(0 0 0 / .08);
}
.pv-chip-lead { display: flex; align-items: center; gap: 6px; flex: none; color: #2563eb; font-weight: 500; font-size: 12px; line-height: 18px; white-space: nowrap; }
.pv-chip-ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 18px; color: rgb(0 0 0 / .63); }
.pv-stub { display: flex; align-items: center; gap: 2px; padding: 6px 16px; width: 100%; }
.pv-stub .pv-sp { display: block; flex: none; width: 32px; height: 12px; }
.pv-stub .pv-in { display: flex; align-items: center; gap: 6px; height: 16px; border-radius: 4px; }
.pv-stub .pv-pile i { background: #eff6ff; display: grid; place-items: center; color: #2563eb; }
.pv-stub .pv-pile .pv-ico { width: 10px; height: 10px; stroke-width: 1.6; }
.pv-stub .pv-lbl { font-weight: 500; font-size: 12px; line-height: 18px; color: #2563eb; white-space: nowrap; }
.pv-hook { position: absolute; left: 20.5px; top: 42px; bottom: -21px; width: 20.5px; pointer-events: none; }
.pv-hook::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 3.5px; width: 1px; background: rgb(0 0 0 / .17); }
.pv-hook svg { position: absolute; left: 0; bottom: 0; width: 20.5px; height: 8px; }

/* ---------- "Your Cues" panel, docked at >=1024 ---------- */
.pv-dock { position: relative; flex: none; height: 100%; width: 0; overflow: hidden; transition: width .45s cubic-bezier(.16, 1, .3, 1); }
.pv-dock.pv-open { width: 350px; }
.pv-noanim, .pv-noanim * { transition: none !important; animation: none !important; }
.pv-panel {
  position: absolute; left: 0; top: 0; width: 350px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  overflow-x: hidden; overflow-x: clip; overflow-y: auto; scrollbar-width: none;
  background: #fff; border-left: 1px solid rgb(0 0 0 / .04);
}
.pv-panel::-webkit-scrollbar { display: none; }
.pv-ph { flex: none; width: 100%; height: 48px; border-bottom: 1px solid rgb(0 0 0 / .04); padding: 4px 16px; display: flex; align-items: center; gap: 16px; background: #fff; }
.pv-ph-l { flex: 1 0 0; min-width: 1px; display: flex; align-items: center; gap: 8px; color: rgb(0 0 0 / .87); }
.pv-ph-title { width: 192px; height: 20px; overflow: hidden; white-space: nowrap; font-size: 14px; line-height: 20px; color: rgb(0 0 0 / .87); }
.pv-ph .pv-x { display: block; color: rgb(0 0 0 / .45); }
.pv-pbody { flex: 1 0 0; min-height: 1px; width: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.pv-pbody.pv-nf { flex: none; min-height: 0; }
.pv-plist { display: flex; flex-direction: column; align-items: center; padding-top: 8px; width: 100%; }
.pv-prow { display: flex; align-items: flex-start; gap: 10px; padding: 8px 16px 6px; width: 100%; }
.pv-sep { display: flex; align-items: center; gap: 8px; padding: 8px 16px; width: 100%; }
.pv-sep .pv-lines { flex: 1 0 0; min-width: 1px; display: flex; align-items: center; }
.pv-sep .pv-ln { display: block; flex: 1 0 0; min-width: 1px; height: 1px; background: rgb(0 0 0 / .06); }
.pv-sep .pv-tick { display: block; flex: none; width: 1px; height: 10px; background: rgb(0 0 0 / .06); }
.pv-recs { width: 100%; }
.pv-rec { display: flex; align-items: flex-start; gap: 10px; padding: 8px 16px 6px; width: 100%; }
.pv-rtile { flex: none; width: 24px; height: 24px; border-radius: 6px; background: rgb(0 0 0 / .04); color: rgb(0 0 0 / .55); display: grid; place-items: center; }
.pv-rtile .pv-ico { width: 14px; height: 14px; }
.pv-rec.pv-new .pv-rtile { background: #eff6ff; color: #2563eb; }
.pv-rec.pv-new .pv-name { color: #2563eb; }
.pv-pfoot { flex: none; display: flex; align-items: center; gap: 8px; padding: 16px; width: 100%; }
.pv-pfoot .pv-lbl { font-size: 12px; line-height: 18px; color: rgb(0 0 0 / .55); white-space: nowrap; }

/* ---------- floating card below 1024 ---------- */
.pv-card { position: absolute; bottom: 16px; right: 16px; z-index: 30; width: calc(100% - 72px); max-width: 350px; pointer-events: none; display: none; }
.pv-card-in {
  display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 14px; background: #fff;
  box-shadow: 0 12px 44px -6px rgb(0 0 0 / .22), 0 0 0 1px rgb(0 0 0 / .06);
  transform: translateX(120%);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.pv-card.pv-open .pv-card-in { transform: none; }
.pv-card .pv-ph-title { width: auto; flex: 1 0 0; }
.pv-probe { position: absolute; visibility: hidden; inset: 0 0 auto 0; display: flex; flex-direction: column; }
@media (max-width: 1023px) {
  .pv-card { display: block; }
  .pv-dock { display: none; }
}

/* ---------- enter animations ---------- */
@keyframes pv-fade { from { opacity: 0; } }
@keyframes pv-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pv-pop-o { from { opacity: 0; } }
@keyframes pv-pop-s { from { scale: .3; } }
@keyframes pv-pop-r { from { rotate: -4deg; } }
.pv-a-fade { animation: pv-fade .18s ease-out both; }
.pv-a-rise { animation: pv-rise .4s cubic-bezier(.25, 1, .4, 1) both; }
.pv-a-pop { transform-origin: 20% 100%; animation: pv-pop-o .15s ease-out both, pv-pop-s .619s var(--pv-spring-pop) both, pv-pop-r .745s var(--pv-spring-rot) both; }
.pv-a-pop-l { transform-origin: 0 50%; animation: pv-pop-o .15s ease-out both, pv-pop-s .619s var(--pv-spring-pop) both, pv-pop-r .745s var(--pv-spring-rot) both; }

/* ---------- reduced motion: static frame, no shimmer, spinner, wiggle or caret ---------- */
@media (prefers-reduced-motion: reduce) {
  .pv-status.pv-busy .pv-st-tx { color: rgb(0 0 0 / .45); background: none; animation: none; }
  .pv-spin, .pv-wiggle, .pv-caret, .pv-a-fade, .pv-a-rise, .pv-a-pop, .pv-a-pop-l { animation: none; }
  .pv-dock, .pv-card-in { transition: none; }
}