/* Hero right half: the rotating Snappy demo (HeroRight.tsx). Imported after hero.css, before responsive.css. */
.hv2 .hero-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Narrow side padding: this column is only 40% wide. */
  padding: 7rem 2rem 3rem;
  background: #ffffff;
  min-width: 0;
}

.hv2 .hero-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
  max-width: 620px;
  height: clamp(520px, 66vh, 640px);
  position: relative;
}

.hv2 .chat-stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hv2 .chat-stage::-webkit-scrollbar {
  display: none;
}

.hv2 .beat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  animation: beatIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes beatIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hv2 .chat-human {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: none;
  animation: slide-in-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hv2 .human-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
  flex-shrink: 0;
  border: 2px solid #ffffff;
  outline: 1px solid rgba(0, 0, 0, 0.08);
}

.hv2 .human-bubble {
  background: #f6f6f7;
  border-radius: 22px;
  border-top-left-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-main);
  letter-spacing: -0.2px;
  line-height: 1.5;
  max-width: 400px;
}

.hv2 .chat-ai {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  animation: slide-in-right 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.06s both;
}
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hv2 .ai-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.hv2 .ai-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  flex-shrink: 0;
  overflow: visible;
}
.hv2 .ai-avatar svg {
  width: 32px;
  height: 32px;
  display: block;
}
.hv2 .ai-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@keyframes askAiBlink {
  0%,
  85%,
  100% {
    transform: scaleY(1);
  }
  90%,
  95% {
    transform: scaleY(0.08);
  }
}
.hv2 .ask-ai-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: askAiBlink 2s ease-in-out infinite;
}

.hv2 .typing-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 42px;
  flex: none;
  padding: 4px 0;
}
.hv2 .typing-indicator .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a9a9a;
  animation: typing-bounce 1.4s infinite;
}
.hv2 .typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.hv2 .typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-8px);
  }
}

.hv2 .ai-response-text {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: -0.1px;
  margin-left: 42px;
  max-width: 460px;
  line-height: 1.5;
  display: block;
  flex: none;
}
.hv2 .ai-response-text strong {
  color: var(--text-main);
  font-weight: 600;
}

/* Card shell shared by every scripted answer. */
.hv2 .sn-card {
  margin-left: 42px;
  width: calc(100% - 42px);
  max-width: 500px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  padding: 12px;
  animation: cardIn 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  flex: none;
}
@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Follow-up chips */
.hv2 .beat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 42px;
  max-width: 500px;
  flex: none;
}
.hv2 .beat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: var(--text-main);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.12s ease;
}
.hv2 .beat-chip i {
  font-size: 12px;
}
.hv2 .beat-chip:hover {
  background: var(--text-main);
  border-color: var(--text-main);
  color: #ffffff;
}
.hv2 .beat-chip:active {
  transform: scale(0.97);
}

/* Commission savings bars */
.hv2 .sav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.hv2 .sav-label {
  flex: none;
  width: 40px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hv2 .sav-track {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: #f1f1f1;
  overflow: hidden;
}
.hv2 .sav-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--text-main);
}
.hv2 .sav-fill--lime {
  background: var(--primary-green);
}
.hv2 .sav-amt {
  flex: none;
  width: 58px;
  text-align: right;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.hv2 .sav-keep {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f1f1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.hv2 .sav-keep span {
  font-size: 12px;
  color: var(--text-muted);
}
.hv2 .sav-keep strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
}

/* Market stat grid */
.hv2 .stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #ededed;
  border-radius: 12px;
  overflow: hidden;
}
.hv2 .stat-cell {
  background: #ffffff;
  padding: 10px 12px;
}
.hv2 .stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.hv2 .stat-value {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hv2 .stat-delta {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 6px;
  border-radius: 99px;
  background: #f2f2f2;
  color: #555555;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Saved home + comment thread */
.hv2 .saved-head {
  display: flex;
  gap: 10px;
  align-items: center;
}
.hv2 .saved-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: #f1f1f1;
}
.hv2 .saved-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.25;
}
.hv2 .saved-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.hv2 .comment-thread {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f1f1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hv2 .cmt {
  display: flex;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
}
.hv2 .cmt-who {
  flex: none;
  width: 48px;
  padding-top: 1px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.hv2 .cmt--snappy .cmt-who {
  color: var(--text-main);
}
.hv2 .cmt-body {
  flex: 1;
  color: #333333;
}
.hv2 .cmt--snappy .cmt-body {
  background: #f7f8f4;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 6px 9px;
}

/* Buy now vs wait comparison */
.hv2 .cmp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #ededed;
  border-radius: 12px;
  overflow: hidden;
}
.hv2 .cmp-col {
  background: #ffffff;
  padding: 12px;
}
.hv2 .cmp-col--alt {
  background: #fafafa;
}
.hv2 .cmp-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--text-main);
}
.hv2 .cmp-col--alt .cmp-head {
  color: var(--text-muted);
}
.hv2 .cmp-line {
  font-size: 11.5px;
  line-height: 1.35;
  margin-bottom: 8px;
  color: #222222;
}
.hv2 .cmp-line:last-child {
  margin-bottom: 0;
}
.hv2 .cmp-line em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.hv2 .cmp-foot {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #f1f1f1;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Title insurance cost breakdown */
.hv2 .cost-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  padding: 4px 0;
  color: #444444;
}
.hv2 .cost-line .num {
  font-variant-numeric: tabular-nums;
}
.hv2 .cost-line--total {
  margin-top: 6px;
  padding-top: 9px;
  border-top: 1px solid #ededed;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}
.hv2 .cost-range {
  margin-top: 12px;
}
.hv2 .cost-range-track {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: #f1f1f1;
}
.hv2 .cost-range-band {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 99px;
  background: var(--primary-green);
}
.hv2 .cost-range-pin {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--text-main);
  border: 2.5px solid #ffffff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.hv2 .cost-range-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
}

/* Listings carousel (compact, inside .sn-card). Scroll-snap track driven by useCarousel. */
.hv2 .sn-card .houses-carousel-wrapper {
  margin-left: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
  padding: 0 4px;
}
.hv2 .sn-card .houses-carousel {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: 10px;
  position: relative;
}
.hv2 .sn-card .houses-carousel::-webkit-scrollbar {
  display: none;
}
.hv2 .sn-card .house-card {
  flex: 0 0 calc((100% - 10px) / 2);
  min-width: 0;
  scroll-snap-align: start;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  transition:
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.3s ease;
}
.hv2 .sn-card .house-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 0, 0, 0.18);
}
.hv2 .sn-card .house-card-image {
  width: 100%;
  height: 68px;
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  background-size: cover;
  background-position: center;
}
.hv2 .sn-card .house-card-image .image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
  z-index: 1;
}
.hv2 .sn-card .house-card-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.hv2 .sn-card .house-card-price {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--text-main);
  line-height: 1.2;
}
.hv2 .sn-card .house-card-location {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.hv2 .sn-card .house-card-location i {
  font-size: 10px;
  flex: none;
}
.hv2 .sn-card .house-card-stats {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding-top: 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 10px;
  color: #555555;
}
.hv2 .sn-card .house-card-stats span {
  display: flex;
  align-items: center;
  gap: 2px;
}
.hv2 .sn-card .house-card-stats i {
  font-size: 10px;
  color: var(--text-muted);
}

.hv2 .sn-card .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  color: var(--text-main);
  font-size: 11px;
  opacity: 1;
  pointer-events: auto;
  transition: all 0.25s ease;
}
.hv2 .sn-card .carousel-arrow:hover {
  background: var(--primary-green);
  border-color: var(--primary-green);
  transform: translateY(-50%);
}
.hv2 .sn-card .carousel-arrow.prev {
  left: -6px;
}
.hv2 .sn-card .carousel-arrow.next {
  right: -6px;
}

.hv2 .sn-card .houses-dots {
  display: flex;
  /* 24px buttons add invisible hit area; offset so the dots sit where they did before. */
  margin-top: -1px;
  margin-left: -6px;
}
/* 24x24 tap target (Lighthouse touch-target size). The visible dot and the active pill are
   pseudo-elements and only their opacity animates, so the animation stays on the compositor
   (animating width/border-radius was flagged as non-composited). */
.hv2 .sn-card .houses-dot {
  position: relative;
  width: 24px;
  height: 24px;
  background: none;
  padding: 0;
  border: none;
  cursor: pointer;
}
.hv2 .sn-card .houses-dot::before,
.hv2 .sn-card .houses-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 5px;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}
.hv2 .sn-card .houses-dot::before {
  width: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
}
.hv2 .sn-card .houses-dot::after {
  width: 14px;
  border-radius: 4px;
  background: var(--primary-green);
  opacity: 0;
}
.hv2 .sn-card .houses-dot.active::before {
  opacity: 0;
}
.hv2 .sn-card .houses-dot.active::after {
  opacity: 1;
}

/* Agent card */
.hv2 .agent-hero {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f1f1;
}
.hv2 .agent-hero-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #f1f1f1;
  flex: none;
}
.hv2 .agent-hero-info {
  min-width: 0;
  flex: 1;
}
.hv2 .agent-hero-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.2;
  flex-wrap: wrap;
}
.hv2 .agent-hero-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--text-main);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hv2 .agent-hero-verified i {
  font-size: 10px;
  color: var(--primary-green);
}
.hv2 .agent-hero-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hv2 .agent-hero-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.hv2 .agent-hero-rating i {
  color: #f5a623;
  font-size: 11px;
}
.hv2 .agent-hero-rating strong {
  color: var(--text-main);
  font-weight: 600;
}
.hv2 .agent-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #f1f1f1;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 12px;
}
.hv2 .agent-stat {
  background: #ffffff;
  padding: 8px 10px;
  text-align: center;
}
.hv2 .agent-stat strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
.hv2 .agent-stat span {
  display: block;
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.hv2 .agent-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--text-main);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  /* Also rendered as a link (Contact opens the agent's profile). */
  text-decoration: none;
  transition:
    background 0.2s ease,
    transform 0.12s ease;
}
.hv2 .agent-cta:hover {
  background: #000000;
}
.hv2 .agent-cta:active {
  transform: scale(0.98);
}
.hv2 .agent-cta i {
  font-size: 12px;
}

/* Caption card (closes each group of three) */
.hv2 .caption-card {
  position: relative;
  margin-left: 42px;
  width: calc(100% - 42px);
  max-width: 500px;
  padding: 34px 26px 28px;
  border-radius: 20px;
  background: var(--text-main);
  color: #ffffff;
  overflow: hidden;
  text-align: center;
  animation: cardIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  flex: none;
}
.hv2 .caption-snappy {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  animation: captionFloat 4s ease-in-out infinite;
}
@keyframes captionFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
.hv2 .caption-snappy svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hv2 .caption-card h3 {
  position: relative;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.7px;
  line-height: 1.25;
  margin: 0 auto 8px;
  max-width: 340px;
  color: #ffffff;
}
.hv2 .caption-card h3 .hi {
  color: var(--primary-green);
}
.hv2 .caption-sub {
  position: relative;
  font-size: 13px;
  letter-spacing: -0.1px;
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 20px;
}
.hv2 .caption-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  position: relative;
}
.hv2 .caption-features span {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.82);
}
.hv2 .caption-features span::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-green);
  margin-right: 6px;
}

/* Arrows + progress dots under the chat */
.hv2 .chat-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 14px;
  flex: none;
}
.hv2 .chat-dots-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hv2 .chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  border: none;
  cursor: pointer;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.hv2 .chat-dot.active {
  width: 28px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.1);
}
.hv2 .chat-dot .progress-fill {
  position: absolute;
  inset: 0;
  background: var(--primary-green);
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(0);
}
.hv2 .chat-dot.active .progress-fill {
  animation: progress-fill 6s linear forwards;
}
@keyframes progress-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.hv2 .chat-dot:hover:not(.active) {
  background: rgba(0, 0, 0, 0.3);
  transform: scale(1.2);
}

.hv2 .chat-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
.hv2 .chat-arrow:hover {
  background: var(--text-main);
  border-color: var(--text-main);
  color: #ffffff;
}
.hv2 .chat-arrow:active {
  transform: scale(0.93);
}

@media (prefers-reduced-motion: reduce) {
  .hv2 .beat,
  .hv2 .chat-human,
  .hv2 .chat-ai,
  .hv2 .sn-card,
  .hv2 .caption-card,
  .hv2 .caption-snappy {
    animation: none;
  }
}

/* Hero house cards: taller photos, and a darker green for the progress indicators (active card dot,
   chat progress bar) so they read on the white panel. Set as overrides so they apply to both the dot
   versions (pill on the button or on ::after); --primary-green is redefined only inside these elements. */
.hv2 .sn-card .house-card-image {
  height: 100px;
}
.hv2 .sn-card .houses-dot,
.hv2 .chat-dot {
  --primary-green: #9fc72a;
}

/* Thread mode (HeroRight): Q&As stack and scroll inside the 30% panel instead of rotating one at a time. */
.hv2 .hero-chat--thread {
  max-width: 100%;
  height: calc(100vh - 11rem);
  min-height: 480px;
  max-height: 760px;
}
.hv2 .hero-chat--thread .chat-stage {
  gap: 22px;
  padding-right: 8px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #d4d4d8 transparent;
}
.hv2 .hero-chat--thread .chat-stage::-webkit-scrollbar {
  display: block;
  width: 8px;
}
.hv2 .hero-chat--thread .chat-stage::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 99px;
  border: 2px solid #ffffff;
}
.hv2 .hero-chat--thread .chat-human,
.hv2 .hero-chat--thread .chat-ai {
  flex: none;
}

/* Human row on the right with a dark bubble, Snappy on the left. */
.hv2 .hero-chat--thread .chat-human {
  justify-content: flex-end;
  animation-name: slide-in-right;
}
.hv2 .hero-chat--thread .human-avatar {
  order: 2;
  width: 34px;
  height: 34px;
  font-size: 15px;
}
.hv2 .hero-chat--thread .human-bubble {
  order: 1;
  background: #111111;
  color: #ffffff;
  border-radius: 20px;
  border-top-right-radius: 6px;
  font-size: 13.5px;
  max-width: 85%;
}
.hv2 .hero-chat--thread .chat-ai {
  animation-name: slide-in-left;
}

/* Like / dislike / copy / read aloud under each answer. */
.hv2 .ai-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 42px;
  margin-top: 2px;
  animation: cardIn 0.35s ease both;
}
.hv2 .ai-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #9a9a9a;
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}
.hv2 .ai-action-btn:hover,
.hv2 .ai-action-btn.is-active {
  background: #f2f2f3;
  color: var(--text-main);
}
.hv2 .ai-action-btn:active {
  transform: scale(0.92);
}
.hv2 .ai-action-btn.like.is-active i {
  color: #16a34a;
}
.hv2 .ai-action-btn.dislike.is-active i {
  color: #dc2626;
}
.hv2 .ai-action-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: #111111;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.hv2 .ai-action-btn[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hv2 .ai-actions {
    animation: none;
  }
}

/* Desktop: the hero image spans the whole hero and the chat sits on its right
   as a white card. The image and overlay live in HeroLeft; dropping the left
   column's positioning makes them cover .hero-new instead. Below 901px the
   columns stack and keep the old layout (image behind the search only). */
@media (min-width: 901px) {
  .hv2 .hero-new {
    isolation: isolate;
    background: #0d0d0d;
  }
  .hv2 .hero-new > .hero-left {
    position: static;
    background: transparent;
  }
  .hv2 .hero-new > .hero-right {
    position: relative;
    z-index: 2;
    background: transparent;
  }
  .hv2 .hero-right .hero-chat {
    box-sizing: border-box;
    padding: 20px 16px 16px 20px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
}