#ai-chat-widget-root {
  --aicw-color: #1a1a1a;
  --aicw-color-contrast: #ffffff;
  --aicw-activator-color: var(--aicw-color);
  --aicw-activator-color-contrast: var(--aicw-color-contrast);
  --aicw-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --aicw-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  position: fixed;
  z-index: 2147483000;
  font-family: var(--aicw-font-family);
}

/* Two-axis positioning: horizontal (left/center/right) and vertical
   (lowest/higher/highest) are independent theme-editor overrides — see
   mergeSettings() in ai-chat-widget.js. Center has no vertical-stack
   pairing concern since the panel always opens above the bubble. */
#ai-chat-widget-root.aicw-h-right {
  right: 20px;
}

#ai-chat-widget-root.aicw-h-left {
  left: 20px;
}

#ai-chat-widget-root.aicw-h-center {
  left: 50%;
  transform: translateX(-50%);
}

#ai-chat-widget-root.aicw-v-lowest {
  bottom: 20px;
}

#ai-chat-widget-root.aicw-v-higher {
  bottom: 90px;
}

#ai-chat-widget-root.aicw-v-highest {
  bottom: 160px;
}


/* Themes commonly set font-family directly on p/button/input/textarea (and
   form controls never inherit font-family from an ancestor by default in
   the browser's own UA stylesheet), which otherwise overrides the
   inherited value from #ai-chat-widget-root above. Force it explicitly on
   every element so the widget can't pick up the theme's font. */
#ai-chat-widget-root,
#ai-chat-widget-root * {
  font-family: var(--aicw-font-family);
}

/* Many themes apply a global *:focus-visible outline/box-shadow built from
   theme color variables (e.g. --color-foreground) that don't necessarily
   resolve sensibly inside the widget. Override with the widget's own
   focus style instead of inheriting the theme's. */
#ai-chat-widget-root :focus-visible {
  outline: 2px solid var(--aicw-color);
  outline-offset: 2px;
  box-shadow: none;
}

/* The message input sits inside its own bordered pill (.aicw-form), so it
   doesn't need — and shouldn't show — the widget-wide focus outline above. */
#ai-chat-widget-root .aicw-input:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}

.aicw-bubble {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--aicw-activator-color);
  color: var(--aicw-activator-color-contrast);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.aicw-bubble-labeled {
  width: auto;
  padding: 0 18px 0 16px;
  border-radius: 999px;
}

.aicw-bubble-label {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.aicw-bubble svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.aicw-bubble-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.aicw-panel {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: #fafafa;
  border-radius: var(--aicw-radius, 20px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Was `display: none` -> `flex`, which cannot transition, so the panel hard-
     cut into place while the admin preview (chat-widget-preview.module.css)
     already faded — the merchant's preview was smoother than what shoppers
     actually got. visibility rather than display keeps it out of the
     accessibility tree and untabbable while hidden, and unlike display it
     animates. The delay on visibility holds the panel present for the length
     of the fade-out, then removes it. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.96) translateY(8px);
  /* Grows from the launcher bubble it belongs to, not from nowhere. */
  transform-origin: bottom right;
  transition:
    opacity 150ms var(--aicw-ease-out),
    transform 150ms var(--aicw-ease-out),
    visibility 0s linear 150ms;
}

#ai-chat-widget-root.aicw-h-left .aicw-panel {
  right: auto;
  left: 0;
  transform-origin: bottom left;
}

/* The centred panel is positioned *by* a transform, so the entrance scale has
   to be appended to it — a bare `scale()` here would drop the -50% and shove
   the panel half a width to the right for the length of the animation. */
#ai-chat-widget-root.aicw-h-center .aicw-panel {
  right: auto;
  left: 50%;
  transform: translateX(-50%) scale(0.96) translateY(8px);
  transform-origin: bottom center;
}

#ai-chat-widget-root.aicw-h-center.aicw-open .aicw-panel {
  transform: translateX(-50%);
}

#ai-chat-widget-root.aicw-open .aicw-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 220ms var(--aicw-ease-out),
    transform 220ms var(--aicw-ease-out),
    visibility 0s;
}

/* The contact gate has far less content than a live conversation — hug it
   instead of stretching to the fixed chat height, which left a big dead gap
   between the header and the form. .aicw-panel anchors via `bottom`, so
   shrinking height still grows the panel upward from the bubble. */
.aicw-panel.aicw-show-gate {
  height: auto;
  max-height: calc(100vh - 120px);
}

.aicw-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.aicw-header-titles {
  min-width: 0;
}

.aicw-header-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.aicw-header-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.aicw-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.aicw-icon-button {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: #374151;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aicw-icon-button:hover:not(:disabled) {
  background: #f9fafb;
}

.aicw-icon-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.aicw-icon-button svg {
  width: 16px;
  height: 16px;
}

.aicw-gate {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
}

.aicw-panel.aicw-show-gate .aicw-gate {
  display: flex;
}

.aicw-panel.aicw-show-gate .aicw-viewport,
.aicw-panel.aicw-show-gate .aicw-form {
  display: none;
}

.aicw-gate-intro {
  margin: 0 0 4px;
  font-size: 13px;
  color: #555;
}

.aicw-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #333;
}

.aicw-field input {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
}

/* Overrides the widget-wide focus-visible outline+offset (see above) —
   these already read as bordered fields, so focus should just darken that
   border rather than draw a detached ring around it. */
#ai-chat-widget-root .aicw-field input:focus-visible {
  outline: none;
  border-color: var(--aicw-color);
  box-shadow: none;
}

.aicw-gate-error {
  margin: 0;
  font-size: 12px;
  color: #c0392b;
}

.aicw-gate-submit {
  background: var(--aicw-color);
  color: var(--aicw-color-contrast);
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
}

.aicw-viewport {
  flex: 1;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.aicw-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 32px 20px;
}

.aicw-empty-state[hidden] {
  display: none;
}

.aicw-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f3f4f6;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.aicw-empty-icon svg {
  width: 22px;
  height: 22px;
}

.aicw-empty-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

.aicw-empty-subtitle {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  max-width: 240px;
}

/* Guided workflow topic buttons — additive to the empty state, not a
   replacement, so free-form typing stays available alongside them. */
.aicw-topics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  margin-top: 16px;
}

.aicw-topics[hidden] {
  display: none;
}

.aicw-topic-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--aicw-radius, 12px);
  padding: 10px 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.aicw-topic-button:hover,
.aicw-topic-button:focus-visible {
  border-color: var(--aicw-color);
}

.aicw-topic-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

.aicw-topic-description {
  font-size: 12px;
  color: #6b7280;
}

.aicw-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.aicw-messages[hidden] {
  display: none;
}

.aicw-scroll-bottom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.aicw-scroll-bottom svg {
  width: 16px;
  height: 16px;
}

.aicw-scroll-bottom[hidden] {
  display: flex;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

.aicw-message {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Figma: https://www.figma.com/design/rofOs7HDouBaGx36STSZuP/PluginsShopify?node-id=365-3015 —
   the assistant reads as plain text (no bubble), while the shopper's own
   messages keep the dark pill from .aicw-message-user below. */
.aicw-message-assistant {
  align-self: stretch;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #1a1a1a;
}

.aicw-message-user {
  align-self: flex-end;
  background: var(--aicw-color);
  color: var(--aicw-color-contrast);
}

.aicw-message-agent {
  align-self: flex-start;
  background: #eaf7ee;
  color: #1a1a1a;
  border: 1px solid #bfe6cb;
}

.aicw-message-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.aicw-message-paragraph {
  margin: 0 0 6px;
  word-break: break-word;
}

.aicw-message-paragraph:last-child {
  margin-bottom: 0;
}

.aicw-message-list {
  margin: 0 0 6px;
  padding-left: 18px;
}

.aicw-message-list:last-child {
  margin-bottom: 0;
}

.aicw-message-list li {
  margin-bottom: 2px;
}

.aicw-message-video {
  display: block;
  max-width: 100%;
  width: 100%;
  border-radius: 10px;
  margin-top: 6px;
}

.aicw-message-image {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  margin-top: 6px;
}

.aicw-message-agent::before {
  content: "Support agent";
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #2f8a4b;
  margin-bottom: 3px;
}

/* A pending (not-yet-sent) attachment — sits between the message list and
   the input row so the shopper can see/remove it before hitting send. */
.aicw-attachment-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 8px;
  padding: 6px;
  border-radius: 12px;
  background: #f3f4f6;
}

.aicw-attachment-preview[hidden] {
  display: none;
}

.aicw-attachment-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.aicw-attachment-thumb[hidden] {
  display: none;
}

.aicw-attachment-error {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #dc2626;
}

.aicw-attachment-error[hidden] {
  display: none;
}

.aicw-attachment-remove {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: #374151;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}

.aicw-attachment-remove svg {
  width: 14px;
  height: 14px;
}

/* Figma: https://www.figma.com/design/rofOs7HDouBaGx36STSZuP/PluginsShopify?node-id=365-3015 —
   a single horizontal row (attach, input, send) instead of the input
   stacked over a separate actions row. */
.aicw-form {
  margin: 12px;
  margin-top: 0;
  padding: 6px;
  border-radius: 16px;
  background: #f3f4f6;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.aicw-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a1a;
  resize: none;
  min-height: 24px;
  max-height: 100px;
  padding: 3px 0;
  overflow-y: auto;
}

.aicw-input::placeholder {
  color: rgba(26, 26, 26, 0.4);
}

.aicw-send {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--aicw-color);
  color: var(--aicw-color-contrast);
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aicw-send svg {
  width: 16px;
  height: 16px;
}

.aicw-send:disabled {
  opacity: 0.5;
  cursor: default;
}

/* A full-width sibling message (see .aicw-messages), not a child of a
   .aicw-message bubble, so it isn't capped by the bubble's 85% max-width. */
.aicw-product-message {
  width: 100%;
}

/* A workflow question's preset answers, rendered as chips under the
   assistant's bubble — same full-width-sibling reasoning as
   .aicw-product-message above. */
.aicw-workflow-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.aicw-workflow-option {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--aicw-radius, 12px);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.aicw-workflow-option:hover,
.aicw-workflow-option:focus-visible {
  border-color: var(--aicw-color);
}

.aicw-workflow-option-other {
  color: #6b7280;
}

.aicw-product-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  max-width: 100%;
}

/* In-chat suggestion card — Figma: https://www.figma.com/design/rofOs7HDouBaGx36STSZuP/PluginsShopify?node-id=365-2906
   ("Products list" block). Flat gray fill, no border/shadow. */
.aicw-product-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 120px;
  gap: 18px;
  padding: 8px;
  border-radius: var(--aicw-radius, 12px);
  text-decoration: none;
  color: #1a1a1a;
  background: #f3f4f6;
}

.aicw-product-image,
.aicw-product-image-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  /* Inset one step from the card's own corner so the image doesn't read as a
     square pasted into a rounded tile. Derived from --aicw-radius rather than
     fixed, because that value is the merchant's corner-style choice — a
     hardcoded round image would contradict a shop that picked square. max()
     guards the theme editor's border-radius slider reaching 0. */
  border-radius: max(0px, calc(var(--aicw-radius, 12px) - 4px));
}

.aicw-product-image {
  object-fit: cover;
}

.aicw-product-image-placeholder {
  background: #e5e7eb;
}

.aicw-product-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aicw-product-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aicw-product-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.aicw-product-price {
  font-weight: 400;
}

.aicw-product-out-of-stock {
  font-size: 12px;
  font-weight: 500;
  color: #dc2626;
}

.aicw-featured-products {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.aicw-featured-products[hidden] {
  display: none;
}

/* Pre-chat browsing strip — Figma: https://www.figma.com/design/rofOs7HDouBaGx36STSZuP/PluginsShopify?node-id=365-2838.
   Smaller and elevated (white + shadow) rather than the in-chat card's flat
   gray fill above, since it sits inside a fixed-height panel over the
   message list and needs to read as a distinct, compact browsing aid. */
.aicw-featured-products .aicw-product-card {
  width: 76px;
  flex: 0 0 76px;
  gap: 8px;
  padding: 6px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.08);
}

.aicw-featured-products .aicw-product-info {
  gap: 2px;
}

.aicw-featured-products .aicw-product-title {
  font-size: 9px;
}

.aicw-featured-products .aicw-product-meta {
  font-size: 8px;
  gap: 2px;
}

.aicw-featured-products .aicw-product-out-of-stock {
  font-size: 8px;
}

.aicw-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.aicw-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.4;
  animation: aicw-typing-bounce 1.2s infinite ease-in-out;
}

.aicw-typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.aicw-typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes aicw-typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Neither this file nor the admin preview honoured prefers-reduced-motion at
   all. Gentler rather than none: a shopper who asks for reduced motion still
   needs to see that the panel opened and that the assistant is working, so
   opacity is kept and only the movement is dropped. */
@media (prefers-reduced-motion: reduce) {
  .aicw-panel {
    transform: none;
    transition:
      opacity 100ms linear,
      visibility 0s linear 100ms;
  }

  /* Still needs its positioning transform — that's layout, not motion. */
  #ai-chat-widget-root.aicw-h-center .aicw-panel {
    transform: translateX(-50%);
  }

  #ai-chat-widget-root.aicw-open .aicw-panel,
  #ai-chat-widget-root.aicw-h-center.aicw-open .aicw-panel {
    transition:
      opacity 100ms linear,
      visibility 0s;
  }

  .aicw-scroll-bottom {
    transition: opacity 100ms linear;
  }

  .aicw-scroll-bottom[hidden] {
    transform: none;
  }

  /* Held at the keyframes' own resting opacities instead of removed — the
     dots are the only signal that the assistant is still working, so
     `animation: none` alone would read as a frozen, broken chat. */
  .aicw-typing-dot {
    animation: none;
    opacity: 0.4;
  }

  .aicw-typing-dot:nth-child(2) {
    opacity: 0.7;
  }

  .aicw-typing-dot:nth-child(3) {
    opacity: 1;
  }
}

/* ---- Proactive message peek ----------------------------------------
   The teaser that appears next to the bubble when a proactive rule fires.
   Deliberately not part of .aicw-panel: it shows *before* the contact gate,
   at a point where no conversation exists yet, so it must not look like a
   message in a transcript. Anchors the same way the panel does (see
   .aicw-panel and the .aicw-h-* overrides above). */
.aicw-peek {
  position: absolute;
  bottom: 72px;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 4px 4px 4px 14px;
  background: #ffffff;
  border-radius: var(--aicw-radius, 20px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 30px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  transition:
    opacity 0.2s var(--aicw-ease-out),
    transform 0.2s var(--aicw-ease-out);
}

#ai-chat-widget-root.aicw-h-left .aicw-peek {
  right: auto;
  left: 0;
  transform-origin: bottom left;
}

/* Matches the centred panel: the position itself is a transform, so the
   entrance has to be appended to it rather than replacing it. */
#ai-chat-widget-root.aicw-h-center .aicw-peek {
  right: auto;
  left: 50%;
  transform: translateX(-50%) translateY(8px) scale(0.96);
  transform-origin: bottom center;
}

.aicw-peek.aicw-peek-in {
  opacity: 1;
  transform: none;
}

#ai-chat-widget-root.aicw-h-center .aicw-peek.aicw-peek-in {
  transform: translateX(-50%);
}

/* The panel opening is the shopper's answer to the peek, so it never needs
   to animate out — it's removed outright. */
.aicw-peek-text {
  flex: 1;
  padding: 8px 0;
  border: 0;
  background: none;
  color: #1a1a1a;
  font-family: inherit;
  font-size: var(--aicw-font-size, 14px);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.aicw-peek-dismiss {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #6b7280;
  cursor: pointer;
}

.aicw-peek-dismiss:hover {
  background: rgba(0, 0, 0, 0.06);
}

.aicw-peek-dismiss svg {
  width: 14px;
  height: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .aicw-peek {
    transition: none;
  }
}