.gj_cc-ai-helper {
  /* Figma variables (fall back to literal token values). */
  --gj-ai-helper-surface: var(--card, #ffffff);
  --gj-ai-helper-title: var(--info-foreground, #00539f);
  --gj-ai-helper-question: var(--neutral-foreground, #525252);
  /* Accent border + glow are not Figma variables — kept as literals. */
  --gj-ai-helper-border: #ccf7ff;
  --gj-ai-helper-shadow: -9px 8px 14.6px 0px rgba(96, 183, 255, 0.25),
    11px -5px 11.3px 0px rgba(160, 255, 156, 0.25);

  align-items: center;
  background: var(--gj-ai-helper-surface);
  border: 2px solid var(--gj-ai-helper-border);
  border-radius: 4px;
  box-shadow: var(--gj-ai-helper-shadow);
  box-sizing: border-box;
  display: inline-flex;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
  padding: 12px 16px;
  width: 333px;
}

.gj_cc-ai-helper *,
.gj_cc-ai-helper *::before,
.gj_cc-ai-helper *::after {
  box-sizing: border-box;
}

.gj_cc-ai-helper__main {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}

/* Reset native button styling so a clickable bar matches the link/span. */
button.gj_cc-ai-helper__main {
  background: transparent;
  border: 0;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
}

a.gj_cc-ai-helper__main,
button.gj_cc-ai-helper__main {
  cursor: pointer;
}

a.gj_cc-ai-helper__main:focus-visible,
button.gj_cc-ai-helper__main:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--gj-ai-helper-title);
  outline-offset: 2px;
}

.gj_cc-ai-helper__icon {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.gj_cc-ai-helper__sparkle,
.gj_cc-ai-helper__icon-img {
  display: block;
  height: 20px;
  width: 20px;
}

.gj_cc-ai-helper__icon-img {
  object-fit: contain;
}

.gj_cc-ai-helper__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gj_cc-ai-helper__title {
  color: var(--gj-ai-helper-title);
  font-size: var(--text-xs-font-size, 12px);
  font-weight: 700;
  line-height: var(--line-height-leading-4, 16px);
  word-break: break-word;
}

.gj_cc-ai-helper__question {
  color: var(--gj-ai-helper-question);
  font-size: var(--text-sm-font-size, 14px);
  font-style: italic;
  font-weight: 400;
  /* Reserve two lines so carousel length changes don't jump the bar. */
  line-height: var(--line-height-leading-5, 20px);
  min-height: calc(var(--line-height-leading-5, 20px) * 2);
  word-break: break-word;
}

.gj_cc-ai-helper__question-caret {
  animation: gj_cc-ai-helper-caret 1s step-end infinite;
  display: inline-block;
  font-style: normal;
  margin-left: 1px;
}

@keyframes gj_cc-ai-helper-caret {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gj_cc-ai-helper__question-caret {
    animation: none;
    display: none;
  }
}