/* VISUAL SEARCH
   Marketing mirrors the current product contract: Visual Search opens Frame in
   the workspace and returns the canonical evidence card. It is not a separate
   search product. The rotating fixture queries always resolve to matching
   imagery, and reduced-motion visitors keep the first completed result. */

.fs-vs {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 9vw, 124px) 0 clamp(82px, 10vw, 136px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 18% 42%, rgba(244, 86, 107, 0.08), transparent 38%),
    radial-gradient(circle at 82% 64%, rgba(36, 109, 101, 0.09), transparent 36%),
    #090e0d;
  scroll-margin-top: 92px;
}

.fs-vs::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 76% 58% at 50% 50%, #000, transparent 84%);
}

.fs-vs-wrap {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - clamp(40px, 8vw, 88px)));
  margin: 0 auto;
}

.fs-vs-intro {
  max-width: 920px;
  margin: 0 auto clamp(36px, 5vw, 58px);
  text-align: center;
}

.fs-vs-intro h2 {
  max-width: 16ch;
  margin: 0 auto;
  color: #f8f1e7;
  font-family: var(--font-display);
  font-size: clamp(2.55rem, 5.2vw, 4.4rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 0.97;
  text-wrap: balance;
}

.fs-vs-intro h2 span { color: #f4566b; }

.fs-vs-panel {
  --vs-surface: #0f1514;
  --vs-surface-2: #0c1211;
  --vs-raised: #151d1b;
  --vs-ink: #f8f1e7;
  --vs-ink-2: #d2ccc2;
  --vs-ink-3: #918b82;
  --vs-line: rgba(248, 241, 231, 0.12);
  --vs-line-strong: rgba(248, 241, 231, 0.2);
  --vs-coral: #f4566b;
  --vs-teal: #79c8bb;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(248, 241, 231, 0.16);
  border-radius: 18px;
  background: var(--vs-surface-2);
  box-shadow:
    0 42px 100px -62px rgba(0, 0, 0, 0.96),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.fs-vs-panel .fs-chrome {
  position: relative;
  z-index: 3;
  min-height: 45px;
  border-bottom-color: var(--vs-line);
  background: rgba(7, 11, 10, 0.92);
}

.fs-vs-panel .fs-chrome .lab { color: #777169; }

.fs-vs-workspace {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  height: 610px;
  background:
    linear-gradient(180deg, rgba(244, 86, 107, 0.025), transparent 32%),
    var(--vs-surface);
}

.fs-vs-rail {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 9px;
  padding: 13px 9px;
  border-right: 1px solid var(--vs-line);
  background: #0a100f;
}

.fs-vs-rail-mark,
.fs-vs-rail-item,
.fs-vs-rail-client {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.fs-vs-rail-mark {
  margin-bottom: 7px;
  background: rgba(244, 86, 107, 0.08);
}

.fs-vs-rail-mark img { display: block; width: 24px; height: 24px; }

.fs-vs-rail-item {
  position: relative;
  color: #6f756f;
  border: 1px solid transparent;
}

.fs-vs-rail-item svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fs-vs-rail-item.is-active {
  border-color: rgba(244, 86, 107, 0.28);
  background: rgba(244, 86, 107, 0.1);
  color: var(--vs-coral);
}

.fs-vs-rail-item.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  width: 2px;
  height: 18px;
  border-radius: 999px;
  background: var(--vs-coral);
}

.fs-vs-rail-spacer { flex: 1; }

.fs-vs-rail-client {
  border: 1px solid var(--vs-line-strong);
  background: var(--vs-raised);
  color: var(--vs-ink-2);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
}

.fs-vs-frame {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.fs-vs-frame-head {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 9px 17px;
  border-bottom: 1px solid var(--vs-line);
  background: rgba(12, 18, 17, 0.84);
}

.fs-vs-frame-avatar,
.fs-vs-reply-avatar {
  display: block;
  flex: none;
  background-repeat: no-repeat;
  background-image: url("/frame/frame-resting-sequence-v1.png");
  background-size: 600% 100%;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}

.fs-vs-frame-avatar { width: 42px; height: 42px; }
.fs-vs-reply-avatar { width: 34px; height: 34px; margin-top: 3px; }

.fs-vs-panel[data-fs-vs-phase="searching"] .fs-vs-frame-avatar,
.fs-vs-panel[data-fs-vs-phase="searching"] .fs-vs-reply-avatar {
  background-image: url("/frame/frame-work-sequences-v3.png");
  background-size: 600% 400%;
  background-position-y: 66.666%;
  animation: fs-vs-frame-work 1.4s steps(1, end) infinite;
}

.fs-vs-frame-name {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.fs-vs-frame-name strong {
  color: var(--vs-ink);
  font-size: 0.85rem;
  font-weight: 720;
}

.fs-vs-frame-name small {
  color: var(--vs-ink-3);
  font-size: 0.64rem;
}

.fs-vs-frame-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid var(--vs-line);
  border-radius: 999px;
  color: var(--vs-ink-3);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.04em;
}

.fs-vs-frame-mode i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vs-teal);
  box-shadow: 0 0 0 4px rgba(121, 200, 187, 0.08);
}

.fs-vs-thread {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: clamp(22px, 3.6vw, 38px) max(24px, calc((100% - 900px) / 2));
  background:
    linear-gradient(180deg, rgba(244, 86, 107, 0.035), transparent 190px),
    var(--vs-surface);
}

.fs-vs-user-message {
  align-self: flex-end;
  display: grid;
  gap: 3px;
  max-width: min(78%, 620px);
  padding: 11px 14px;
  border: 1px solid var(--vs-line);
  border-radius: 13px 13px 3px 13px;
  background: rgba(248, 241, 231, 0.055);
  color: var(--vs-ink-3);
  font-size: 0.72rem;
  line-height: 1.35;
}

.fs-vs-user-message q {
  min-height: 1.3em;
  color: var(--vs-ink);
  font-size: clamp(0.94rem, 1.55vw, 1.1rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  quotes: none;
}

.fs-vs-user-message q::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 0.12em;
  vertical-align: -0.08em;
  background: var(--vs-coral);
  animation: fs-vs-caret 900ms steps(1, end) infinite;
}

.fs-vs-frame-reply {
  width: min(100%, 920px);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.fs-vs-card {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 11px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--vs-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--vs-raised) 96%, var(--vs-surface-2));
  box-shadow: 0 2px 8px rgba(248, 241, 231, 0.035);
}

.fs-vs-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 30%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(244, 86, 107, 0.14), transparent);
  transform: skewX(-12deg);
}

.fs-vs-panel[data-fs-vs-phase="searching"] .fs-vs-card {
  border-color: rgba(244, 86, 107, 0.28);
}

.fs-vs-panel[data-fs-vs-phase="searching"] .fs-vs-card::after {
  opacity: 1;
  animation: fs-vs-scan 1.15s ease-in-out infinite;
}

.fs-vs-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.fs-vs-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(121, 200, 187, 0.2);
  border-radius: 10px;
  background: rgba(121, 200, 187, 0.08);
  color: var(--vs-teal);
}

.fs-vs-card-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.fs-vs-card-identity {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.fs-vs-card-identity small {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(121, 200, 187, 0.08);
  color: var(--vs-teal);
  font-size: 0.62rem;
  font-weight: 750;
}

.fs-vs-card-identity strong {
  overflow: hidden;
  color: var(--vs-ink);
  font-size: clamp(0.82rem, 1.4vw, 0.98rem);
  font-weight: 750;
  letter-spacing: -0.012em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-vs-card-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(121, 200, 187, 0.24);
  border-radius: 999px;
  background: rgba(121, 200, 187, 0.08);
  color: var(--vs-teal);
  font-size: 0.6rem;
  font-weight: 700;
}

.fs-vs-card-state i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.fs-vs-panel[data-fs-vs-phase="searching"] .fs-vs-card-state {
  border-color: rgba(244, 86, 107, 0.28);
  background: rgba(244, 86, 107, 0.08);
  color: var(--vs-coral);
}

.fs-vs-panel[data-fs-vs-phase="searching"] .fs-vs-card-state i {
  animation: fs-vs-pulse 900ms ease-in-out infinite;
}

.fs-vs-card-count {
  margin: 0;
  color: var(--vs-ink-3);
  font-size: 0.7rem;
}

.fs-vs-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fs-vs-panel[data-fs-vs-phase="searching"] .fs-vs-results {
  opacity: 0.42;
  transform: translateY(2px);
}

.fs-vs-hit {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(100px, 0.88fr) minmax(130px, 1.12fr);
  overflow: hidden;
  border: 1px solid var(--vs-line);
  border-radius: 10px;
  background: var(--vs-surface-2);
}

.fs-vs-hit[hidden] { display: none; }

.fs-vs-results[data-result-count="1"] .fs-vs-hit {
  grid-column: 1 / -1;
}

.fs-vs-shot {
  position: relative;
  min-height: 104px;
  overflow: hidden;
  background: #101615;
}

.fs-vs-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fs-vs-stamp {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 3px 6px;
  border: 1px solid rgba(248, 241, 231, 0.12);
  border-radius: 5px;
  background: rgba(8, 12, 11, 0.86);
  color: var(--vs-ink);
  font-family: var(--font-mono);
  font-size: 0.59rem;
  font-variant-numeric: tabular-nums;
}

.fs-vs-hit-body {
  min-width: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 10px 11px;
}

.fs-vs-hit-body strong {
  overflow: hidden;
  color: var(--vs-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-vs-hit-body small {
  overflow: hidden;
  color: var(--vs-ink-3);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-vs-hit-body > span {
  width: fit-content;
  margin-top: 5px;
  color: var(--vs-teal);
  font-size: 0.62rem;
  font-weight: 700;
}

.fs-vs-hit-body b { font-weight: inherit; }

.fs-vs-card-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 1px;
}

.fs-vs-card-actions span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  color: var(--vs-ink-2);
  font-size: 0.62rem;
  font-weight: 700;
}

.fs-vs-card-actions span:first-child {
  border-color: rgba(121, 200, 187, 0.24);
  background: rgba(121, 200, 187, 0.09);
  color: var(--vs-teal);
}

.fs-vs-composer {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  margin: 0 max(24px, calc((100% - 900px) / 2)) 16px;
  padding: 7px 8px 7px 10px;
  border: 1px solid var(--vs-line-strong);
  border-radius: 14px;
  background: var(--vs-raised);
  box-shadow: 0 16px 35px -25px rgba(0, 0, 0, 0.9);
  color: var(--vs-ink-3);
  font-size: 0.73rem;
}

.fs-vs-composer-plus {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  color: var(--vs-ink-2);
  font-size: 1rem;
}

.fs-vs-composer i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--vs-coral);
  color: #fff7f3;
}

.fs-vs-composer svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes fs-vs-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@keyframes fs-vs-frame-work {
  0%, 16% { background-position-x: 0%; }
  17%, 32% { background-position-x: 20%; }
  33%, 49% { background-position-x: 40%; }
  50%, 66% { background-position-x: 60%; }
  67%, 83% { background-position-x: 80%; }
  84%, 100% { background-position-x: 100%; }
}

@keyframes fs-vs-scan {
  from { left: -35%; }
  to { left: 112%; }
}

@keyframes fs-vs-pulse {
  0%, 100% { opacity: 0.38; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 800px) {
  .fs-vs-workspace { grid-template-columns: 52px minmax(0, 1fr); }
  .fs-vs-rail { padding-inline: 6px; }
  .fs-vs-rail-mark,
  .fs-vs-rail-item,
  .fs-vs-rail-client { width: 38px; height: 38px; }
  .fs-vs-thread { padding-inline: 18px; }
  .fs-vs-composer { margin-inline: 18px; }
  .fs-vs-hit { grid-template-columns: minmax(92px, 0.8fr) minmax(110px, 1.2fr); }
}

@media (max-width: 640px) {
  .fs-vs {
    padding-block: 68px 82px;
  }

  .fs-vs-wrap {
    width: min(100% - 28px, 1180px);
  }

  .fs-vs-intro {
    margin-bottom: 32px;
  }

  .fs-vs-intro h2 {
    max-width: 11ch;
    font-size: clamp(2.35rem, 12vw, 3.25rem);
    line-height: 0.96;
  }

  .fs-vs-panel { border-radius: 14px; }

  .fs-vs-panel .fs-chrome {
    min-height: 39px;
  }

  .fs-vs-panel .fs-chrome .lab {
    max-width: 55vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fs-vs-workspace {
    grid-template-columns: 44px minmax(0, 1fr);
    height: 610px;
  }

  .fs-vs-rail {
    gap: 6px;
    padding: 9px 4px;
  }

  .fs-vs-rail-mark,
  .fs-vs-rail-item,
  .fs-vs-rail-client {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .fs-vs-rail-mark img { width: 21px; height: 21px; }
  .fs-vs-rail-item svg { width: 16px; height: 16px; }
  .fs-vs-rail-item.is-active::before { left: -5px; }

  .fs-vs-frame-head {
    min-height: 54px;
    gap: 8px;
    padding: 7px 10px;
  }

  .fs-vs-frame-avatar { width: 36px; height: 36px; }
  .fs-vs-frame-name small { display: none; }
  .fs-vs-frame-mode { padding: 4px 7px; font-size: 0.49rem; }

  .fs-vs-thread {
    gap: 16px;
    padding: 16px 10px 13px;
  }

  .fs-vs-user-message {
    max-width: 94%;
    padding: 9px 11px;
  }

  .fs-vs-frame-reply {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 7px;
  }

  .fs-vs-reply-avatar { width: 26px; height: 26px; }

  .fs-vs-card {
    gap: 9px;
    padding: 10px;
    border-radius: 11px;
  }

  .fs-vs-card-head {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
  }

  .fs-vs-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }

  .fs-vs-card-icon svg { width: 16px; height: 16px; }
  .fs-vs-card-identity small { font-size: 0.55rem; }
  .fs-vs-card-identity strong { font-size: 0.76rem; white-space: normal; }
  .fs-vs-card-state { display: none; }

  .fs-vs-results,
  .fs-vs-results[data-result-count="1"] {
    grid-template-columns: 1fr;
  }

  .fs-vs-hit,
  .fs-vs-results[data-result-count="1"] .fs-vs-hit {
    grid-column: auto;
    grid-template-columns: minmax(88px, 0.78fr) minmax(105px, 1.22fr);
  }

  .fs-vs-shot { min-height: 92px; }
  .fs-vs-results[data-result-count="1"] .fs-vs-hit,
  .fs-vs-results[data-result-count="1"] .fs-vs-shot { min-height: 194px; }
  .fs-vs-hit-body { padding: 8px 9px; }
  .fs-vs-hit-body strong { font-size: 0.71rem; }
  .fs-vs-hit-body small { font-size: 0.49rem; }
  .fs-vs-card-actions span { min-height: 26px; padding: 4px 8px; font-size: 0.57rem; }

  .fs-vs-composer {
    grid-template-columns: 24px minmax(0, 1fr) 31px;
    min-height: 51px;
    margin: 0 10px 10px;
    padding: 6px 7px;
    font-size: 0.65rem;
  }

  .fs-vs-composer-plus { width: 23px; height: 23px; }
  .fs-vs-composer i { width: 31px; height: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-vs-query q::after,
  .fs-vs-user-message q::after,
  .fs-vs-panel[data-fs-vs-phase="searching"] .fs-vs-frame-avatar,
  .fs-vs-panel[data-fs-vs-phase="searching"] .fs-vs-reply-avatar,
  .fs-vs-panel[data-fs-vs-phase="searching"] .fs-vs-card::after,
  .fs-vs-panel[data-fs-vs-phase="searching"] .fs-vs-card-state i {
    animation: none;
  }

  .fs-vs-results { transition: none; }
}