.gj_cc-ai-widget {
  --gj-ai-widget-surface: var(--card, #ffffff);
  --gj-ai-widget-accent: var(--info-foreground, #00539f);
  --gj-ai-widget-text: var(--neutral-foreground, #525252);
  --gj-ai-widget-border: #ccf7ff;

  align-items: center;
  background: var(--gj-ai-widget-surface);
  border: 2px dashed var(--gj-ai-widget-border);
  border-radius: 16px;
  box-sizing: border-box;
  display: inline-flex;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  gap: 10px;
  padding: 12px 16px;
}

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

.gj_cc-ai-widget__dot {
  background: linear-gradient(135deg, #46b0f6 0%, #52b5ab 64%, #3fdd4a 100%);
  border-radius: 50%;
  flex-shrink: 0;
  height: 12px;
  width: 12px;
}

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

.gj_cc-ai-widget__title {
  color: var(--gj-ai-widget-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.gj_cc-ai-widget__hint {
  color: var(--gj-ai-widget-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.gj_cc-ai-widget-portal {
  bottom: max(16px, env(safe-area-inset-bottom));
  max-width: var(--gj-ai-widget-embed-max-width, 420px);
  pointer-events: none;
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  visibility: hidden;
  width: calc(100vw - 32px);
  z-index: 2147483000;
}

.gj_cc-ai-widget-portal[data-gj-ai-open='true'] {
  pointer-events: auto;
  visibility: visible;
}

.gj_cc-ai-widget-embed {
  max-width: var(--gj-ai-widget-embed-max-width, 420px);
  /* Avoid opacity, containment, and clipping ancestors: WebKit can lose a
     cross-origin iframe's composited layer after focus or internal updates. */
  width: 100%;
}

/* Fallback shadow when shell chrome is off (iframe-only expanded state). */
.gj_cc-ai-widget-embed[data-gj-ai-embed-expanded='true']:not([data-gj-ai-shell='true']) {
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

/* Figma "Book with AI - Open" shell — card chrome around Avoca while expanded. */
.gj_cc-ai-widget-shell {
  --gj-ai-shell-surface: var(--card, #ffffff);
  --gj-ai-shell-title: var(--info-foreground, #00539f);
  --gj-ai-shell-minimize: var(--foreground, #262626);
  --gj-ai-shell-border: #ccf7ff;
  --gj-ai-shell-shadow: -9px 8px 14.6px 0px rgba(96, 183, 255, 0.25),
    11px -5px 11.3px 0px rgba(160, 255, 156, 0.25);

  background: var(--gj-ai-shell-surface);
  border: 2px solid var(--gj-ai-shell-border);
  border-radius: 4px;
  box-shadow: var(--gj-ai-shell-shadow);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  gap: 12px;
  padding: 16px 12px 12px;
}

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

.gj_cc-ai-widget-shell__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  width: 100%;
}

.gj_cc-ai-widget-shell__brand {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

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

.gj_cc-ai-widget-shell__sparkle,
.gj_cc-ai-widget-shell__icon-img {
  display: block;
  height: 20px;
  width: 20px;
}

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

.gj_cc-ai-widget-shell__title {
  color: var(--gj-ai-shell-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-widget-shell__minimize {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 80px;
  color: var(--gj-ai-shell-minimize);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  margin: 0;
  padding: 4px;
}

.gj_cc-ai-widget-shell__minimize:hover {
  background: rgba(0, 0, 0, 0.05);
}

.gj_cc-ai-widget-shell__minimize:focus-visible {
  outline: 2px solid var(--gj-ai-shell-title);
  outline-offset: 2px;
}

.gj_cc-ai-widget-shell__minus,
.gj_cc-ai-widget-shell__minimize-img {
  display: block;
  height: 20px;
  width: 20px;
}

.gj_cc-ai-widget-shell__minus {
  height: 2px;
  width: 16px;
}

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

.gj_cc-ai-widget-embed__frame {
  background: transparent;
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.gj_cc-ai-widget-embed__frame-stack {
  min-height: 0;
  position: relative;
  width: 100%;
}

.gj_cc-ai-widget-embed__loading {
  align-items: center;
  background: var(--card, #ffffff);
  color: var(--neutral-foreground, #525252);
  display: flex;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  inset: 0;
  justify-content: center;
  line-height: 20px;
  position: absolute;
}

.gj_cc-ai-widget-embed:not([data-gj-ai-shell='true']) .gj_cc-ai-widget-embed__frame {
  border-radius: 16px;
}

.gj_cc-ai-widget-shell .gj_cc-ai-widget-embed__frame {
  border-radius: 4px;
}

@media (max-width: 767px) {
  .gj_cc-ai-widget-portal {
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    max-width: none;
    right: max(12px, env(safe-area-inset-right));
    width: auto;
  }
}

