/*
 * Kelly's Assistant - chat window styles (AI Chat for WooCommerce v3).
 * Calm design system: flat surfaces, hairline borders, teal base, orange for
 * the main action, Montserrat. Every selector starts with .kdc so theme and
 * Additional CSS rules for the old v2 widget (.ai-chat-*) never apply.
 * Contrast: body text #0f1d24 and muted #54646d on white pass WCAG AA.
 */

.kdc {
  --kdc-teal: #073e50;
  --kdc-teal-d: #052d3a;
  --kdc-orange: #eb9309;
  --kdc-orange-d: #d4850a;
  --kdc-cream: #efebdd;
  --kdc-bg: #f7f5f0;
  --kdc-ink: #0f1d24;
  --kdc-muted: #54646d;
  --kdc-line: rgba(7, 62, 80, 0.12);
  --kdc-radius: 12px;
  --kdc-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--kdc-font);
  color: var(--kdc-ink);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
}
.kdc *,
.kdc *::before,
.kdc *::after {
  box-sizing: border-box;
}

/* Reset theme styles on the window's own controls */
.kdc button,
.kdc textarea,
.kdc a {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  text-shadow: none;
}
.kdc button {
  margin: 0;
  min-height: 0;
  width: auto;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.kdc button:focus-visible,
.kdc a:focus-visible,
.kdc textarea:focus-visible {
  outline: 2px solid var(--kdc-orange);
  outline-offset: 2px;
}
.kdc p {
  margin: 0 0 8px;
}
.kdc p:last-child {
  margin-bottom: 0;
}
.kdc img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* ---------------------------------------------------------------
   Floating mode: button in the corner, panel above it
   #ai-chat-root keeps v2's id so Additional CSS can still lift it
   above the mobile sticky add-to-cart bar.
   --------------------------------------------------------------- */
#ai-chat-root.kdc-floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99990;
}
.kdc .kdc-launcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 26px;
  background: var(--kdc-teal);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 6px 18px rgba(7, 62, 80, 0.22);
}
.kdc .kdc-launcher:hover {
  background: var(--kdc-teal-d);
  transform: translateY(-2px);
}
.kdc-floating.is-open .kdc-launcher {
  background: var(--kdc-teal-d);
}

.kdc-floating .kdc-panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 384px;
  height: min(640px, calc(100vh - 120px));
  display: none;
  box-shadow: 0 16px 40px rgba(7, 62, 80, 0.18);
}
.kdc-floating .kdc-panel.is-open {
  display: flex;
}

/* Inline mode (FAQ page) */
.kdc-inline .kdc-panel {
  display: flex;
  width: 100%;
  height: 560px;
}

/* ---------------------------------------------------------------
   Panel
   --------------------------------------------------------------- */
.kdc .kdc-panel {
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--kdc-line);
  border-radius: 16px;
  overflow: hidden;
}

.kdc .kdc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  background: var(--kdc-teal-d);
  color: var(--kdc-cream);
  flex: 0 0 auto;
}
.kdc .kdc-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--kdc-orange);
  color: var(--kdc-teal-d);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.kdc .kdc-titles {
  flex: 1 1 auto;
  min-width: 0;
}
.kdc .kdc-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.kdc .kdc-subtitle {
  font-size: 12px;
  color: rgba(239, 235, 221, 0.78);
}
.kdc .kdc-icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--kdc-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kdc .kdc-icon-btn:hover {
  background: rgba(239, 235, 221, 0.12);
}

.kdc .kdc-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  background: var(--kdc-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
}

/* Welcome */
.kdc .kdc-welcome {
  background: #fff;
  border: 1px solid var(--kdc-line);
  border-radius: var(--kdc-radius);
  padding: 16px;
}
.kdc .kdc-welcome-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--kdc-teal);
  margin-bottom: 6px;
}
.kdc .kdc-welcome-text {
  color: var(--kdc-muted);
  font-size: 13px;
  margin: 0 0 12px;
}

/* Messages */
.kdc .kdc-msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}
.kdc .kdc-msg-user {
  align-items: flex-end;
}
.kdc .kdc-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.kdc .kdc-msg-user .kdc-bubble {
  background: var(--kdc-teal);
  color: #fff;
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
}
.kdc .kdc-msg-bot .kdc-bubble {
  background: #fff;
  border: 1px solid var(--kdc-line);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.kdc .kdc-bubble-error {
  border-color: rgba(196, 66, 26, 0.35);
}
.kdc .kdc-list {
  margin: 4px 0 8px;
  padding-left: 18px;
}
.kdc .kdc-list li {
  margin: 0 0 4px;
}
.kdc .kdc-link {
  color: var(--kdc-teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kdc .kdc-link:hover {
  color: var(--kdc-orange-d);
}

/* Typing indicator */
.kdc .kdc-typing {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--kdc-muted);
  font-size: 13px;
}
.kdc .kdc-dots {
  display: inline-flex;
  gap: 4px;
}
.kdc .kdc-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kdc-teal);
  opacity: 0.35;
  animation: kdcDot 1.2s infinite ease-in-out;
}
.kdc .kdc-dots i:nth-child(2) { animation-delay: 0.15s; }
.kdc .kdc-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes kdcDot {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* Chips (starters and suggestions) */
.kdc .kdc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kdc .kdc-chip {
  padding: 8px 12px;
  border: 1px solid var(--kdc-line);
  border-radius: 8px;
  background: #fff;
  color: var(--kdc-teal);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kdc .kdc-chip:hover {
  border-color: var(--kdc-teal);
  background: #fbfaf7;
}

/* Cards */
.kdc .kdc-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.kdc .kdc-card {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--kdc-line);
  border-radius: var(--kdc-radius);
}
.kdc .kdc-card-img {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.kdc .kdc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kdc .kdc-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kdc .kdc-card-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kdc-ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kdc .kdc-card-name:hover {
  color: var(--kdc-teal);
  text-decoration: underline;
}
.kdc .kdc-card-meta {
  font-size: 12px;
  color: var(--kdc-muted);
}
.kdc .kdc-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  font-size: 12px;
  color: var(--kdc-muted);
}
.kdc .kdc-card-price strong {
  font-size: 16px;
  font-weight: 800;
  color: var(--kdc-teal);
}
.kdc .kdc-card-unit {
  margin-left: 2px;
}
.kdc .kdc-card-deal {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--kdc-ink);
  margin-top: 2px;
}
.kdc .kdc-chip-deal {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--kdc-orange);
  color: var(--kdc-ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}
.kdc .kdc-card-dealtext {
  line-height: 1.4;
}
.kdc .kdc-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.kdc .kdc-card-note {
  font-size: 12px;
  color: var(--kdc-muted);
}
.kdc .kdc-card-note:empty {
  display: none;
}
.kdc .kdc-oos {
  font-size: 12px;
  font-weight: 700;
  color: #9c3a20;
}

/* Quantity stepper */
.kdc .kdc-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--kdc-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.kdc .kdc-step {
  width: 32px;
  height: 34px;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--kdc-teal);
  font-size: 18px;
  font-weight: 700;
}
.kdc .kdc-step:hover {
  background: var(--kdc-bg);
}
.kdc .kdc-step-count {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

/* Buttons */
.kdc .kdc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.kdc .kdc-btn-add {
  flex: 1 1 auto;
  border: 0;
  background: var(--kdc-orange);
  color: var(--kdc-ink);
}
.kdc .kdc-btn-add:hover {
  background: var(--kdc-orange-d);
}
.kdc .kdc-btn-add.is-busy {
  opacity: 0.75;
  cursor: progress;
}
.kdc .kdc-btn-add.is-done {
  background: var(--kdc-teal);
  color: #fff;
}
.kdc .kdc-btn-ghost {
  border: 1px solid var(--kdc-line);
  background: #fff;
  color: var(--kdc-teal);
}
.kdc .kdc-btn-ghost:hover {
  border-color: var(--kdc-teal);
}

/* Talk to our team */
.kdc .kdc-contact {
  width: 100%;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--kdc-line);
  border-left: 3px solid var(--kdc-orange);
  border-radius: var(--kdc-radius);
}
.kdc .kdc-contact-title {
  font-weight: 800;
  color: var(--kdc-teal);
  font-size: 14px;
}
.kdc .kdc-contact-hours {
  font-size: 12px;
  color: var(--kdc-muted);
  margin: 2px 0 8px;
}
.kdc .kdc-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Composer */
.kdc .kdc-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--kdc-line);
  background: #fff;
  margin: 0;
  flex: 0 0 auto;
}
.kdc .kdc-input {
  flex: 1 1 auto;
  min-height: 42px;
  max-height: 120px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--kdc-line);
  border-radius: 10px;
  background: #fff;
  color: var(--kdc-ink);
  font-size: 16px; /* 16px stops iPhones zooming in */
  line-height: 1.4;
  resize: none;
  outline: none;
}
.kdc .kdc-input:focus {
  border-color: var(--kdc-teal);
}
.kdc .kdc-input::placeholder {
  color: var(--kdc-muted);
}
.kdc .kdc-send {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--kdc-orange);
  color: var(--kdc-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kdc .kdc-send:hover {
  background: var(--kdc-orange-d);
}
.kdc .kdc-send[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.kdc .kdc-foot {
  padding: 0 12px 10px;
  background: #fff;
  font-size: 11px;
  color: var(--kdc-muted);
  flex: 0 0 auto;
}

/* The theme styles form controls (widths, borders, focus colours) with
   strong selectors. The composer's layout is pinned here so the text box
   always takes the row and the send button stays a 42px square. */
.kdc .kdc-form .kdc-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--kdc-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}
.kdc .kdc-form .kdc-input:focus {
  border-color: var(--kdc-teal) !important;
  box-shadow: 0 0 0 3px rgba(7, 62, 80, 0.12) !important;
  outline: none !important;
}
.kdc .kdc-form .kdc-send {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
}

/* Screen-reader-only live region */
.kdc .kdc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Phones: round button only; the open panel fills the screen
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  #ai-chat-root.kdc-floating {
    right: 14px;
    bottom: 14px;
  }
  /* The root is the panel's stacking context, so it rises too. */
  #ai-chat-root.kdc-floating.is-open {
    z-index: 2147483000;
  }
  .kdc .kdc-launcher {
    width: 52px;
    padding: 0;
    justify-content: center;
  }
  .kdc .kdc-launcher-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .kdc-floating .kdc-panel.is-open {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    /* above the sticky site header, which otherwise covers the chat */
    z-index: 2147483000;
  }
  .kdc-floating.is-open .kdc-launcher {
    display: none;
  }
  .kdc-inline .kdc-panel {
    height: 520px;
  }
  .kdc .kdc-bubble {
    max-width: 92%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kdc *,
  .kdc *::before,
  .kdc *::after {
    animation: none !important;
    transition: none !important;
  }
  .kdc .kdc-launcher:hover {
    transform: none;
  }
}