/* ===== AG Support Chat — v0.2.2 ShipStation-style visual direction ===== */

.agsc-floating {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99999;
  font-family: inherit;
  transition: opacity .18s ease, transform .18s ease;
}

/* Hide the chat CTA while the Shoptimizer cart drawer is open so it never
   covers the View Basket / Checkout buttons. */
body.drawer-open .agsc-floating {
  display: none;
}

/* On mobile product pages, JavaScript adds this class only while the actual
   purchase control is on screen. The chat CTA then gets out of the way, but
   returns immediately once the customer scrolls past the basket action. */
@media (max-width: 767px) {
  .agsc-floating {
    right: 10px;
    bottom: 10px;
  }

  /* CommerceKit's sticky mobile purchase bar is independently fixed to the
     viewport. Keep chat directly above its measured height while it is shown. */
  html.agsc-mobile-sticky-atc-visible .agsc-floating {
    bottom: calc(var(--agsc-mobile-sticky-atc-height, 0px) + 12px);
  }

  /* Retain the original control-level guard too: when the in-page purchase
     button is visible, the chat CTA cannot obscure or intercept it. */
  html.agsc-product-purchase-visible .agsc-floating {
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
  }

  .agsc-toggle {
    gap: 7px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .agsc-toggle-icon,
  .agsc-toggle-icon svg {
    width: 18px;
    height: 18px;
  }

  .agsc-toggle-status {
    gap: 4px;
    padding-left: 7px;
  }

  .agsc-toggle-status-text {
    font-size: 11px;
  }

  .agsc-toggle-dot {
    width: 7px;
    height: 7px;
  }
}

.agsc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #004225;
  border-radius: 999px;
  padding: 14px 20px;
  background: #004225;
  color: #fff;
  font-weight: 650;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 12px 34px rgba(17,24,39,.20);
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}

.agsc-toggle:hover,
.agsc-toggle:focus {
  background: #005c34;
  border-color: #005c34;
  box-shadow: 0 16px 40px rgba(17,24,39,.26);
  transform: translateY(-2px);
  outline: none;
}

.agsc-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #fff;
  flex: 0 0 auto;
}

.agsc-toggle-icon svg {
  width: 22px;
  height: 22px;
}

.agsc-toggle-label {
  white-space: nowrap;
}

.agsc-toggle-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.3);
  flex: 0 0 auto;
}

.agsc-toggle-status-text {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.agsc-toggle-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #fff;
  flex: 0 0 auto;
}

.agsc-toggle-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #fff;
  animation: agsc-pulse 2s ease-out infinite;
}

@keyframes agsc-pulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}

.agsc-panel {
  position: absolute;
  right: 0;
  bottom: 60px;
  width: min(365px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 110px));
  background: #fff;
  color: #111827;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 7px;
  box-shadow: 0 20px 55px rgba(17,24,39,.24);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.agsc-embedded .agsc-panel {
  position: static;
  width: 100%;
  max-height: 720px;
  box-shadow: none;
}

/* ===== Header ===== */

.agsc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 0 13px 0 16px;
  background: #004225;
  color: #fff;
}

.agsc-header-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.agsc-header-mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #20d17d;
  flex: 0 0 auto;
}

.agsc-header-mark svg {
  width: 28px;
  height: 28px;
}

.agsc-header-mark img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.agsc-header strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agsc-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #d1fae5;
  font-size: 10px;
  font-weight: 650;
  vertical-align: middle;
}

.agsc-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agsc-close,
.agsc-reset {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .18s;
}

.agsc-close:hover,
.agsc-close:focus,
.agsc-reset:hover,
.agsc-reset:focus {
  background: rgba(255,255,255,.12);
  outline: none;
}

.agsc-close svg,
.agsc-reset svg {
  width: 18px;
  height: 18px;
}

/* ===== Message body ===== */

.agsc-body {
  padding: 0 12px 14px;
  overflow-y: auto;
  min-height: 260px;
  flex: 1 1 auto;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.agsc-body::-webkit-scrollbar { width: 6px; }
.agsc-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }

.agsc-consent-notice {
  margin: 49px -12px 21px;
  padding: 12px 30px;
  background: #f4f4f5;
  color: #111827;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
}

/* ===== Message row with avatar ===== */

.agsc-message-row,
.agsc-typing {
  display: flex;
  gap: 12px;
  margin: 0 0 5px;
  align-items: flex-start;
}

.agsc-message-row-user {
  flex-direction: row-reverse;
  align-items: flex-end;
}

.agsc-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 10px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  overflow: hidden;
  background: #fff;
}

.agsc-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 2px; box-sizing: border-box; }
.agsc-avatar-bot { color: #004225; }
.agsc-avatar-user { display: none; }

.agsc-message {
  max-width: 76%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.48;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agsc-message-bot {
  background: #f0f1f2;
  color: #111827;
  border-bottom-left-radius: 4px;
}

.agsc-message-user {
  margin-left: auto;
  background: #f0f1f2;
  color: #111827;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
}

.agsc-message-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 12px;
  margin-top: 7px;
  display: block;
}

.agsc-message-meta {
  color: #6b7280;
  font-size: 12px;
  line-height: 1.25;
  margin: 0 0 24px 42px;
}

.agsc-message-meta-bot strong,
.agsc-message-meta-bot { font-weight: 400; }
.agsc-message-meta-user { text-align: right; margin: 0 5px 24px 0; }

/* ===== Quick replies ===== */

.agsc-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -12px 0 20px 42px;
  max-width: calc(100% - 42px);
}

.agsc-quick-reply {
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}

.agsc-quick-reply:hover,
.agsc-quick-reply:focus {
  background: #f3f4f6;
  border-color: #9ca3af;
  outline: none;
}

.agsc-quick-reply:disabled,
.agsc-quick-reply.is-selected {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #d1d5db;
  cursor: default;
}

.agsc-quick-replies.is-used .agsc-quick-reply:not(.is-selected) {
  display: none;
}

.agsc-quick-replies.is-used .agsc-quick-reply.is-selected::before {
  content: "✓ ";
}

/* ===== Typing indicator ===== */

.agsc-typing-bubble {
  background: #f0f1f2;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 14px 16px;
  display: flex;
  gap: 5px;
  align-items: center;
}

.agsc-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6b7280;
  animation: agsc-typing-bounce 1.4s infinite ease-in-out both;
}

.agsc-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.agsc-typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes agsc-typing-bounce {
  0%, 80%, 100% { transform: scale(0.65); opacity: 0.45; }
  40% { transform: scale(1); opacity: 1; }
}

/* ===== Email form ===== */

.agsc-email-form,
.agsc-message-form { display: grid; gap: 10px; }

.agsc-email-form {
  margin: 0 0 12px 42px;
  padding: 0;
  border: 0;
  background: transparent;
}

.agsc-email-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
}

.agsc-email-form em { color: #6b7280; font-style: normal; font-weight: 400; }

.agsc input,
.agsc textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 11px;
  font: inherit;
  color: #111827;
  background: #fff;
}

.agsc input:focus,
.agsc textarea:focus {
  outline: none;
  border-color: #6b7280;
}

.agsc button[type="submit"] {
  border: 1px solid #111827;
  border-radius: 10px;
  padding: 10px 14px;
  background: #111827;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.agsc button[type="submit"]:hover,
.agsc button[type="submit"]:focus { background: #000; border-color: #000; outline: none; }

/* ===== Message composer ===== */

.agsc-message-form {
  grid-template-columns: 1fr;
  padding: 10px 12px 11px;
  background: #fff;
}

.agsc-attachment-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0;
}

.agsc-attachment-preview { position: relative; display: inline-flex; }
.agsc-attachment-preview img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; border: 1px solid #e5e7eb; }

.agsc-attachment-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(17,24,39,.12);
}

.agsc-input-container {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  border: 1px solid #111827;
  border-radius: 18px;
  background: #fff;
  padding: 8px 10px 7px;
  transition: border-color .18s, box-shadow .18s;
}

.agsc-input-container:focus-within {
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17,24,39,.06);
}

.agsc-input-container textarea {
  border: 0;
  border-radius: 0;
  padding: 6px 0 6px;
  min-height: 28px;
  max-height: 110px;
  resize: none;
  font-size: 14px;
  line-height: 1.45;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: #111827;
  box-shadow: none;
}

.agsc-input-container textarea:focus { outline: none; box-shadow: none; }
.agsc-input-container textarea::placeholder { color: #6b7280; }

.agsc-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.agsc-input-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.agsc-icon-btn,
.agsc-send-btn {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .18s, color .18s;
  flex-shrink: 0;
}

.agsc-icon-btn:hover,
.agsc-icon-btn:focus,
.agsc-send-btn:hover,
.agsc-send-btn:focus {
  background: #f3f4f6;
  color: #111827;
  outline: none;
}

.agsc .agsc-send-btn,
.agsc .agsc-send-btn[type="submit"] {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: #1f2937;
}

.agsc .agsc-send-btn:hover,
.agsc .agsc-send-btn:focus,
.agsc .agsc-send-btn[type="submit"]:hover,
.agsc .agsc-send-btn[type="submit"]:focus {
  background: #f3f4f6;
  color: #111827;
  border: 0;
  outline: none;
}

.agsc-icon-btn svg,
.agsc-send-btn svg { width: 20px; height: 20px; }
.agsc .agsc-send-btn:disabled,
.agsc .agsc-send-btn[type="submit"]:disabled { color: #d1d5db; cursor: not-allowed; background: transparent; }

/* ===== Emoji picker ===== */

.agsc-emoji-picker {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 12px;
  margin-bottom: 7px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(17,24,39,.14);
  padding: 8px;
  max-width: 260px;
  z-index: 10;
}

.agsc-emoji-picker.open { display: flex; flex-wrap: wrap; gap: 4px; }

.agsc-emoji-btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 19px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s;
}

.agsc-emoji-btn:hover { background: #f3f4f6; }

.agsc-privacy { margin: 0; color: #6b7280; font-size: 12px; line-height: 1.4; }
.agsc [hidden] { display: none !important; }

/* ===== Verification banner ===== */

.agsc-verify-banner {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-top: 1px solid #e5e7eb;
}

.agsc-verify-banner-pending {
  background: #fef3c7;
  color: #92400e;
}

.agsc-verify-banner-verified {
  background: #ecfdf5;
  color: #004225;
}

.agsc-message a.agsc-safe-tracking-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.agsc-message a.agsc-safe-tracking-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 520px) {
  .agsc-floating { right: 12px; bottom: 12px; }
  .agsc-panel { right: -2px; bottom: 58px; width: calc(100vw - 24px); height: min(640px, calc(100vh - 90px)); }
  .agsc-consent-notice { margin-top: 36px; }
  .agsc-toggle { padding: 10px 12px; font-size: 13px; }
}