/* Styles that predate the design system: the popup preview widget, the PDF export and a few
   scrollbar helpers, kept until the pages that use them are migrated (tasks.md 9.8).
   The custom properties are read by the popup preview components. */
#recomaze,
.recomaze-ui {
  --accent-foreground: 240 5.9% 10%;
  --wbm-primary: rgb(255, 147, 33);
  --wbm-primary-light: rgba(255, 147, 33, 0.5);
  --wbm-primary-ultra-light: rgba(255, 147, 33, 0.15);
  --wbm-secondary: rgb(109, 191, 81);
  --wbm-green: #0d7e13;
  --wbm-danger: #e31717;
  --wbm-gray-light: #e7e5e2;
  --wbm-black: rgb(28, 26, 23);
  --wbm-white: rgb(255, 255, 255);
  --wbm-default-font: 'Inter', sans-serif;
  --wbm-border-radius: 6px;
  --accent-pink-rgb: 143, 0, 96;
  --accent-blue-rgb: 4, 148, 247;
  --accent-pink-alpha: 1;
  --accent-blue-alpha: 1;
  --accent-foreground: 0 0% 98%;
}

.hide-scrollbar {
  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  &::-webkit-scrollbar-thumb {
    background: none;
  }
}

.custom-scrollbar {
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #cac7c7;
    border-radius: 3px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

.hide-scrollbar {
  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  &::-webkit-scrollbar-thumb {
    background: none;
  }
}

.custom-scrollbar {
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #cac7c7;
    border-radius: 3px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

.wbm-smart__blob,
.wbm-smart__blob svg,
.wbm-smart__blob-path {
  width: 100%;
  height: 100%;
}

.wbm-smart__blob {
  min-width: 100%;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wbm-smart__blob-path {
  animation: 6s ease-in-out infinite blob-morph;
}

.wbm-smart__blob-products-header > .wbm-smart__blob {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border: none;
  margin-right: 8px;
}

@keyframes blob-morph {
  0%,
  100% {
    d: path(
      'M37.5,-63.6C49.2,-58.3,59.6,-49.3,69.1,-38.1C78.7,-26.9,87.4,-13.5,84.2,-1.8C81.1,9.8,66,19.6,56.8,31.3C47.5,42.9,43.9,56.4,35.4,61.5C26.9,66.7,13.4,63.5,0,63.6C-13.5,63.7,-27.1,67,-39.3,64C-51.5,61,-62.5,51.7,-68.4,40C-74.3,28.3,-75.2,14.1,-72.9,1.3C-70.7,-11.5,-65.2,-23,-59.1,-34.4C-53,-45.8,-46.2,-57,-36.2,-63.3C-26.3,-69.5,-13.1,-70.9,-0.1,-70.7C12.9,-70.5,25.9,-68.9,37.5,-63.6Z'
    );
  }

  37% {
    d: path(
      'M40.3,-62.5C51.1,-57.2,59.7,-49.2,68.5,-38.8C77.4,-28.5,86.4,-15.9,83.3,-4.7C80.3,6.5,65.2,13.9,55.7,26.2C46.3,38.6,42.5,55.6,32.9,61.2C23.4,66.7,7.6,60.8,-5.8,61.3C-19.2,61.9,-38.4,68.8,-48.9,64.6C-59.4,60.4,-61.2,45,-68.3,32.4C-75.3,19.8,-87.6,9.9,-85.5,-3.2C-83.4,-16.3,-66.8,-32.6,-56.2,-46.7C-45.6,-60.8,-40.8,-72.7,-30.5,-70.9C-20.1,-69,-10,-53.4,-0.1,-52.6C10,-51.8,20,-65.5,40.3,-62.5Z'
    );
  }

  67% {
    d: path(
      'M36.5,-64.8C47.2,-58.5,55.3,-47.5,62.8,-36.4C70.3,-25.3,77.3,-14,74.8,-3.1C72.3,7.9,60.3,15.9,51.7,28C43.1,40.1,38,56.2,27.3,62.5C16.5,68.7,0.1,65.1,-13.4,61.4C-26.9,57.7,-37.6,53.9,-47.3,48.6C-57,43.2,-65.6,36.2,-68.7,27.4C-71.9,18.5,-69.7,7.8,-68.6,-3.8C-67.5,-15.4,-67.5,-30.8,-59.9,-41.4C-52.3,-52.1,-37.1,-57.9,-24.8,-63.4C-12.5,-68.9,-6.2,-73.9,3.3,-74.1C12.7,-74.2,25.3,-70.5,36.5,-64.8Z'
    );
  }
}

/* PDF Export - Hide badge styling, show only text */
.pdf-export .rounded-full[class*='bg-red'],
.pdf-report .rounded-full[class*='bg-red'],
.pdf-export .rounded-full[class*='bg-yellow'],
.pdf-report .rounded-full[class*='bg-yellow'],
.pdf-export .rounded-full[class*='bg-green'],
.pdf-report .rounded-full[class*='bg-green'],
.pdf-export .rounded-full[class*='bg-blue'],
.pdf-report .rounded-full[class*='bg-blue'],
.pdf-export span[class*='rounded-full'][class*='px-'],
.pdf-report span[class*='rounded-full'][class*='px-'],
.pdf-export span[class*='inline-block'][class*='rounded-full'],
.pdf-report span[class*='inline-block'][class*='rounded-full'] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.pdf-export span[class*='bg-red'],
.pdf-report span[class*='bg-red'] {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

.pdf-export span[class*='bg-yellow'],
.pdf-report span[class*='bg-yellow'] {
  color: #d97706 !important;
  font-weight: 700 !important;
}

.pdf-export span[class*='bg-green'],
.pdf-report span[class*='bg-green'] {
  color: #16a34a !important;
  font-weight: 700 !important;
}

.pdf-export span[class*='bg-blue'],
.pdf-report span[class*='bg-blue'] {
  color: #2563eb !important;
  font-weight: 700 !important;
}

.wbm-smart__btn-animated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  gap: 0.25em 0;
  background-color: #ffffff;
  /* Light theme */
  color: #444;
  /* Dark theme */
  /* color: #FFF; */
  font-size: 1rem;
  font-weight: 600;
  padding: 14px;
  border-radius: 18px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  text-decoration: none;
  /* box-shadow: rgba(202, 8, 234, 0.1) 0em 0.25em 0.5em 0.25em; */
  box-shadow: rgba(var(--accent-pink-rgb), 0.1) 0em 0.45em 0.8em 0.45em;
  transition: box-shadow 0.3s ease;
}

.wbm-smart__btn-animated-text-wrapper {
  display: inline-flex;
  overflow: hidden;
  /* white-space: nowrap; */
  /* max-width: 150px; */
  opacity: 1;
  transition:
    max-width 0.25s ease,
    opacity 0.2s ease;
}

/* Expanded state (with text) */
.wbm-smart__btn-animated-text-wrapper--visible {
  /* max-width: 150px; */
  opacity: 1;
}

/* Collapsed state (no text) */
.wbm-smart__btn-animated-text-wrapper--hidden {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
}

@keyframes wbm-smart__rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.wbm-smart__btn-animated::before {
  /* Light theme */
  /* background: conic-gradient(white 50%, #CA08EA, #0494F7, white); */
  background: conic-gradient(
    white 50%,
    rgba(var(--accent-pink-rgb), var(--accent-pink-alpha, 1)),
    rgba(var(--accent-blue-rgb), var(--accent-blue-alpha, 1)),
    white
  );
  /* Dark theme */
  /* background: conic-gradient(#282A36 50%, #B5057B, #41B9FA, rgba(40, 42, 54, 1)); */
  z-index: -2;
  width: 130%;
  min-height: 120%;
  aspect-ratio: 1;
  animation: wbm-smart__rotation 4s linear infinite;
}

.wbm-smart__btn-animated::after {
  inset: 4px;
  border-radius: 18px;
  /* Light theme */
  background-color: rgba(255, 255, 255, 0.9);
  /* Dark theme */
  /* background-color: rgba(0, 0, 0, 0.7); */
  backdrop-filter: blur(2em);
  z-index: -1;
  transition: opacity 0.3s ease;
}

.wbm-smart__btn-animated-arrow-icon {
  display: none;
}

.wbm-smart__btn-animated:hover > .wbm-smart__btn-animated-arrow-icon {
  display: flex;
}

.wbm-smart__btn-animated > img {
  height: 1.5em;
  width: 1.5em;
  object-fit: contain;
  user-select: none;
}

.wbm-smart__btn-animated > svg {
  height: 1.5em;
  width: 1.5em;
  object-fit: contain;
  user-select: none;
  opacity: 0.4;
}

.wbm-smart__btn-animated > svg:hover {
  opacity: 1;
}

.wbm-smart__btn-animated > span {
  padding: 0 0.75em;
  font-size: 12px;
  user-select: none;
  max-width: 150px;
  text-align: left;
}

.wbm-smart__btn-animated::after,
.wbm-smart__btn-animated::before {
  content: '';
  position: absolute;
}

.wbm-smart__btn-animated:hover,
.wbm-smart__btn-animated:focus {
  box-shadow: rgba(0, 0, 0, 0.25) 0em 0em 0.5em 0.125em;
}

@keyframes wbm-smart__pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }
}

.wbm-smart__pulse-animation {
  -webkit-animation: wbm-smart__pulse 1s infinite both;
  animation: wbm-smart__pulse 1s infinite both;
}

.wbm-smart__glow-text {
  font-size: 12px;
  font-weight: 600;
  max-width: 150px;
  min-width: 150px !important;
  color: #fff;
  font-family: var(--wbm-default-font);
  background: linear-gradient(
    135deg,
    rgba(var(--accent-pink-rgb), 1),
    rgba(var(--accent-blue-rgb), 1)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: left;
  filter: drop-shadow(0 2px 8px rgba(82, 43, 180, 0.3));
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.wbm-smart__custom-background {
  background: linear-gradient(
    180deg,
    rgba(var(--accent-blue-rgb), 0.55) 0%,
    rgba(var(--accent-pink-rgb), 0.55) 80%
  );
}

.wbm-smart__bg-pink {
  background: rgba(var(--accent-pink-rgb), 1);
}

.wbm-smart__card {
  position: relative;
  border-radius: 12px;
  /* height: -webkit-fill-available; */
  height: fit-content !important;
  /* min-height: 86px; */
  padding: 8px;
  border: 1.5x solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.02);
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  /* justify-content: center; */
  justify-content: space-between;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background 0.12s ease-out;
}

.wbm-smart__card:hover {
  border: 1px solid rgba(var(--accent-pink-rgb), 0.9);
}

.wbm-smart__card-still {
  border: none !important;
}

.wbm-smart__card-still:hover {
  border: none !important;
}

iframe[title='chat widget'] {
  /* adjust as needed */
  bottom: 10px !important;
  right: 10px !important;
}

.wbm-smart__placeholder-wrapper {
  position: relative;
  width: 100%;
}

.wbm-smart__animated-placeholder {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #475569;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  white-space: pre;
  z-index: 0;
}

.wbm-smart__blur-letter {
  filter: blur(1.2px);
  opacity: 1;
}

.wbm-smart__cursor {
  display: inline-block;
  margin-left: 1px;
  color: #334155;
  animation: wbm-smart__blink 1s steps(2, start) infinite;
}

@keyframes wbm-smart__blink {
  to {
    visibility: hidden;
  }
}

/* ── Launcher orb + nudge ── */

.recomaze-ai-launcher {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}

.recomaze-ai-launcher *,
.recomaze-ai-launcher *::before,
.recomaze-ai-launcher *::after {
  box-sizing: border-box;
}

.recomaze-ai-nudge {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  max-width: var(--recomaze-ai-nudge-max-width, 235px);
  min-width: 132px;
  width: max-content;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #f0ece5;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 8px 24px rgba(28, 26, 23, 0.12);
  cursor: pointer;
  transform-origin: bottom right;
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
    visibility 0s linear 0s;
}

.recomaze-ai-launcher--left .recomaze-ai-nudge {
  right: auto;
  left: 0;
  border-radius: 16px 16px 16px 4px;
  transform-origin: bottom left;
}

.recomaze-ai-nudge--hidden {
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
}

.recomaze-ai-nudge--intro {
  min-width: 178px;
}

.recomaze-ai-nudge-text {
  margin: 0;
  font-size: var(--recomaze-ai-nudge-font-size, 13px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgb(28, 26, 23);
  text-align: left;
}

.recomaze-ai-nudge-close {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 1px solid #efeaf2;
  border-radius: 999px;
  background: #ffffff;
  color: #9b96a0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(28, 26, 23, 0.1);
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  z-index: 1;
}

.recomaze-ai-launcher--left .recomaze-ai-nudge-close {
  left: auto;
  right: -8px;
}

.recomaze-ai-nudge-close:hover {
  color: rgb(
    var(--recomaze-ai-orb-primary-rgb, var(--accent-pink-rgb, 202, 8, 234))
  );
  border-color: rgba(
    var(--recomaze-ai-orb-primary-rgb, var(--accent-pink-rgb, 202, 8, 234)),
    0.35
  );
}

.recomaze-ai-nudge-close svg {
  width: 11px;
  height: 11px;
  display: block;
}

.recomaze-ai-nudge-intro {
  position: relative;
  width: 100%;
}

.recomaze-ai-nudge-intro-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
}

.recomaze-ai-nudge-intro-item--past {
  transform: translateY(-8px);
}

.recomaze-ai-nudge-intro-item--on {
  opacity: 1;
  transform: translateY(0);
}

.recomaze-ai-nudge-intro-text {
  font-size: var(--recomaze-ai-nudge-font-size, 13px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.recomaze-ai-orb {
  position: relative;
  display: block;
  width: var(--recomaze-ai-orb-size, 66px);
  height: var(--recomaze-ai-orb-size, 66px);
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.recomaze-ai-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--recomaze-ai-orb-radius, 21px);
  background: rgba(
    var(--recomaze-ai-orb-primary-rgb, var(--accent-pink-rgb, 202, 8, 234)),
    0.28
  );
  animation: recomaze-ai-orb-ring 2.6s ease-out infinite;
}

.recomaze-ai-orb-body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--recomaze-ai-orb-radius, 21px);
  overflow: hidden;
  box-shadow: 0 8px 22px
    rgba(
      var(--recomaze-ai-orb-primary-rgb, var(--accent-pink-rgb, 202, 8, 234)),
      0.24
    );
  transform: scale(1);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.recomaze-ai-orb:hover .recomaze-ai-orb-body {
  transform: scale(1.07);
}

.recomaze-ai-orb:active .recomaze-ai-orb-body {
  transform: scale(0.96);
}

.recomaze-ai-orb-gradient {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--recomaze-ai-orb-spin-size, 330px);
  height: var(--recomaze-ai-orb-spin-size, 330px);
  margin-top: calc(var(--recomaze-ai-orb-spin-size, 330px) / -2);
  margin-left: calc(var(--recomaze-ai-orb-spin-size, 330px) / -2);
  will-change: transform;
  animation: recomaze-ai-orb-spin 4s linear infinite;
  background: conic-gradient(
    from 90deg,
    #ffffff 0deg,
    #ffffff 90deg,
    var(--recomaze-ai-orb-primary, #8f0060) 142deg,
    var(--recomaze-ai-orb-secondary, #0494f7) 222deg,
    #ffffff 268deg,
    #ffffff 360deg
  );
}

.recomaze-ai-orb-face {
  position: absolute;
  inset: var(--recomaze-ai-orb-border, 3.5px);
  border-radius: var(--recomaze-ai-orb-face-radius, 17.5px);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recomaze-ai-orb-logo {
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
}

@keyframes recomaze-ai-orb-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes recomaze-ai-orb-ring {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70% {
    transform: scale(1.55);
    opacity: 0;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recomaze-ai-orb-gradient,
  .recomaze-ai-orb-ring {
    animation: none !important;
  }

  .recomaze-ai-nudge,
  .recomaze-ai-nudge-intro-item,
  .recomaze-ai-orb-body {
    transition: none !important;
  }
}

@keyframes rcm-boxin {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rcm-box1glow {
  0% {
    box-shadow: 0 0 0 0 rgba(200, 23, 93, 0);
  }
  45% {
    box-shadow:
      0 0 44px -8px rgba(200, 23, 93, 0.3),
      0 0 84px 4px rgba(123, 63, 228, 0.16);
  }
  100% {
    box-shadow:
      0 0 30px -10px rgba(200, 23, 93, 0.22),
      0 0 64px -8px rgba(123, 63, 228, 0.12);
  }
}
@keyframes rcm-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rcm-fadeup {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rcm-overlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rcm-dialog {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes rcm-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* AI Visibility scan lock: while a force scan is in flight, ONLY the
   CONTENT of real card surfaces (``bg-white`` boxes) blurs; the card's own
   background and border stay untouched. This is a plain filter on the
   card's children, NOT a backdrop layer: backdrop pseudos let the page
   background bleed into the frost and it reads as "blur behind + blur on
   the card". Bare background, headings, the header row and spacing never
   blur. Direct-child cards are excluded so nested cards don't compound
   their own children's blur. */
.scan-blur-content [class*='bg-white'] > :not([class*='bg-white']) {
  filter: blur(5px);
}

.scan-blur-veil::after {
  content: '';
  position: absolute;
  inset: 0 -60%;
  transform: translateX(-55%) skewX(-14deg);
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(200, 23, 93, 0.08) 47%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(200, 23, 93, 0.08) 53%,
    transparent 60%
  );
  animation: scan-blur-sweep 3s ease-in-out infinite;
}

@keyframes scan-blur-sweep {
  0% {
    transform: translateX(-55%) skewX(-14deg);
  }
  100% {
    transform: translateX(55%) skewX(-14deg);
  }
}

/* Rotating AEO / GEO message inside the scan banner: each swap remounts
   the paragraph (keyed by index) so this entry animation replays. */
.scan-marketing-fade {
  animation: scan-marketing-fade-in 0.6s ease-out;
}

@keyframes scan-marketing-fade-in {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-rcm-anim] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Company ID rail: the step the merchant should take next breathes until the
   two reads are behind them. The record is the page's whole point and first-
   time visitors read it as a wall of empty fields, so the one actionable row
   has to catch the eye on its own. */
.company-id-step-attention {
  animation: company-id-step-attention 2.4s ease-in-out infinite;
}

@keyframes company-id-step-attention {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(200, 23, 93, 0);
  }
  50% {
    box-shadow: 0 0 14px 1px rgba(200, 23, 93, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .company-id-step-attention {
    animation: none;
    box-shadow: 0 0 12px 1px rgba(200, 23, 93, 0.4);
  }
}

/* "There is more below" cue. On a short screen the Company ID page shows only
   the ring and the completeness card, with no edge of the next block peeking
   out to say the page continues - the bob is what says it. */
.scroll-cue-bob {
  animation: scroll-cue-bob 1.8s ease-in-out infinite;
}

@keyframes scroll-cue-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-bob {
    animation: none;
  }
}

/* AI Visibility data grid - a CSS grid rather than a Polaris DataTable, so a
   row can carry an expandable drawer without colSpan gymnastics. */
.vis-grid {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.vis-grid__head {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  grid-template-columns: var(--vis-cols);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
}

.vis-grid__row {
  display: grid;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  padding: 0.75rem 1rem;
  grid-template-columns: var(--vis-cols-sm);
}

.vis-grid__line {
  border-bottom: 1px solid #f0f1f3;
}

.vis-grid__line:last-child {
  border-bottom: none;
}

.vis-grid__line--interactive:hover {
  background: #f9fafb;
}

.vis-grid__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid #f0f1f3;
}

.vis-grid__expand {
  display: grid;
  gap: 1.25rem;
  padding: 0.75rem 1rem 1rem 2rem;
  border-top: 1px solid #f0f1f3;
  background: #f9fafb;
  animation: vis-row-expand 0.16s ease-out;
}

@keyframes vis-row-expand {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vis-grid__expand {
    animation: none;
  }
}

@media (min-width: 48em) {
  .vis-grid__head {
    display: grid;
  }

  .vis-grid__row {
    grid-template-columns: var(--vis-cols);
  }

  .vis-grid__expand {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px;
  }
}

/* AI Visibility content editor - the content stays stored as markdown, so the
   surface only styles what markdown can express. */
.vis-editor {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

.vis-editor--disabled {
  opacity: 0.6;
}

.vis-editor__toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  border-start-start-radius: 12px;
  border-start-end-radius: 12px;
  background: #f9fafb;
}

.vis-editor__divider {
  width: 1px;
  height: 20px;
  flex-shrink: 0;
  margin: 0 0.25rem;
  background: #e5e7eb;
}

.vis-editor__body {
  padding: 1rem 1.25rem;
}

.vis-editor .tiptap {
  min-height: 420px;
  outline: none;
  color: #111827;
  font-size: 15.5px;
  line-height: 1.72;
}
.vis-editor .tiptap > * + * {
  margin-top: 1em;
}
.vis-editor .tiptap h1,
.vis-editor .tiptap h2,
.vis-editor .tiptap h3,
.vis-editor .tiptap h4,
.vis-editor .tiptap h5,
.vis-editor .tiptap h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.vis-editor .tiptap h1 {
  margin-top: 1.5rem;
  font-size: 30px;
}
.vis-editor .tiptap h2 {
  margin-top: 2rem;
  font-size: 24px;
}
.vis-editor .tiptap h3 {
  margin-top: 1.5rem;
  font-size: 20px;
  font-weight: 600;
}
.vis-editor .tiptap h4 {
  margin-top: 1.25rem;
  font-size: 17px;
  font-weight: 600;
}
.vis-editor .tiptap a {
  color: #c8175d;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vis-editor .tiptap strong {
  font-weight: 700;
}
.vis-editor .tiptap ul,
.vis-editor .tiptap ol {
  padding-left: 1.5rem;
}
.vis-editor .tiptap ul {
  list-style: disc;
}
.vis-editor .tiptap ol {
  list-style: decimal;
}
.vis-editor .tiptap li + li {
  margin-top: 0.35em;
}
.vis-editor .tiptap li p {
  margin: 0;
}
.vis-editor .tiptap blockquote {
  border-left: 3px solid #c8175d;
  padding-left: 1rem;
  color: #6b7280;
}
.vis-editor .tiptap code {
  border-radius: 5px;
  background-color: #f9fafb;
  padding: 0.12em 0.36em;
  font-size: 0.9em;
}
.vis-editor .tiptap pre {
  overflow-x: auto;
  border-radius: 10px;
  background-color: #f9fafb;
  padding: 1rem;
  font-size: 14px;
  line-height: 1.6;
}
.vis-editor .tiptap pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}
.vis-editor .tiptap hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
}
.vis-editor .tiptap img {
  max-width: 100%;
  border-radius: 10px;
}

/* Task lists - the checkbox replaces the marker, so the disc has to go. */
.vis-editor .tiptap ul[data-type='taskList'] {
  padding-left: 0.25rem;
  list-style: none;
}
.vis-editor .tiptap ul[data-type='taskList'] li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.vis-editor .tiptap ul[data-type='taskList'] li > label {
  margin-top: 0.36em;
  user-select: none;
}

/* `border-collapse` keeps the grid one pixel wide at every junction. */
.vis-editor .tiptap table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
}
.vis-editor .tiptap th,
.vis-editor .tiptap td {
  position: relative;
  border: 1px solid #e5e7eb;
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.vis-editor .tiptap th {
  background-color: #f9fafb;
  font-weight: 600;
}
.vis-editor .tiptap .selectedCell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 23, 93, 0.14);
  pointer-events: none;
}
.vis-editor .tiptap .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #c8175d;
  pointer-events: none;
}