/* AI chat widget (inc/ai-chat). Self-contained: no dependency on the theme bundle. */
.maneks-ai-chat {
  /* Brand colour: every brand stylesheet (assets/inc/css/brands/<SITE_PREFIX>.css)
     sets --primary-color on :root (PP blue, NS/SS navy, NP purple, BB dark). The
     bubble, header and buttons follow it; the fallback only shows on a shop
     without a brand file. */
  --mac-accent: var(--primary-color, #1878f6);
  --mac-accent-dark: color-mix(in srgb, var(--mac-accent), #000 18%);
  --mac-bg: #ffffff;
  --mac-surface: #f4f5f7;
  --mac-text: #1e2124;
  --mac-muted: #6b7280;
  --mac-user: color-mix(in srgb, var(--mac-accent) 12%, #ffffff);
  --mac-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  --mac-bottom: 20px;
  --mac-right: 20px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  color: var(--mac-text);
}

/* --mac-bottom is raised by js/ai-chat.js only while something else sits at the
   bottom of the screen (the sticky add-to-cart bar after scrolling on product
   pages, the floating cart button when the shop enables it). Otherwise the
   bubble stays in the corner, 20px from the bottom, on every page. */

.mac-bubble {
  position: fixed;
  right: var(--mac-right);
  bottom: var(--mac-bottom);
  z-index: 99990;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--mac-accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}
.mac-bubble:hover { background: var(--mac-accent-dark); transform: translateY(-1px); }
.mac-bubble:focus-visible { outline: 3px solid #1e2124; outline-offset: 3px; }
.maneks-ai-chat.is-open .mac-bubble { background: #d9dbe0; color: var(--mac-text); }

.mac-teaser {
  position: fixed;
  right: var(--mac-right);
  bottom: calc(var(--mac-bottom) + 72px);
  z-index: 99989;
  max-width: 260px;
  padding: 12px 14px;
  background: var(--mac-bg);
  border-radius: 14px;
  box-shadow: var(--mac-shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mac-teaser.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.mac-teaser.is-hidden { display: none; }
.mac-teaser__name { font-size: 12px; color: var(--mac-muted); display: flex; align-items: center; gap: 6px; }
.mac-teaser__text { font-weight: 600; margin-top: 2px; }

/* The e-mail card: shown inside the message list when a visitor leaves a chat
   that has no order yet. Quiet by design — it must read as an offer, not a gate. */
.mac-emailcard {
  margin-top: 4px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: var(--mac-bg, #fff);
}
.mac-emailcard__text { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.mac-emailcard__row { display: flex; gap: 6px; }
.mac-emailcard__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: var(--mac-text);
}
.mac-emailcard__input:focus { outline: 2px solid var(--mac-accent); outline-offset: 1px; }
.mac-emailcard__input[aria-invalid="true"] { border-color: #c0392b; }
.mac-emailcard__send {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--mac-accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.mac-emailcard__send:hover { background: var(--mac-accent-dark); }
.mac-emailcard__send:disabled { opacity: 0.6; cursor: default; }

/* The confirm button under a bill. Customers read the bill and believed the
   order was already placed; this is the one obvious next step, so it is the
   one full-width accent button in the chat — and since 29.9 the ONLY way an
   order is placed (a typed yes is asked to tap it). It disappears as soon as
   anything else is sent, and comes back while the bill still stands. */
.mac-confirm {
  align-self: stretch;
  min-height: 44px;
  margin-top: 2px;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--mac-accent);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mac-confirm:hover { background: var(--mac-accent-dark); }
.mac-confirm:focus-visible { outline: 3px solid #1e2124; outline-offset: 2px; }
.mac-confirm:disabled { opacity: 0.6; cursor: default; }

.mac-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  flex: 0 0 auto;
}
.mac-dot--light { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }

.mac-panel {
  position: fixed;
  right: var(--mac-right);
  bottom: calc(var(--mac-bottom) + 72px);
  z-index: 99991;
  width: 380px;
  max-width: calc(100vw - 2 * var(--mac-right));
  height: 560px;
  max-height: calc(100vh - var(--mac-bottom) - 90px);
  display: flex;
  flex-direction: column;
  background: var(--mac-bg);
  border-radius: 16px;
  box-shadow: var(--mac-shadow);
  overflow: hidden;
}
.mac-panel[hidden] { display: none; }

.mac-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  background: var(--mac-accent);
  color: #fff;
}
.mac-header__title { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.mac-close {
  border: 0;
  background: transparent;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mac-close:hover { background: rgba(255, 255, 255, 0.18); }
.mac-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mac-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  background: var(--mac-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
}
.mac-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.mac-msg a { color: var(--mac-accent-dark); text-decoration: underline; }
.mac-msg--assistant {
  align-self: flex-start;
  background: var(--mac-bg);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.mac-msg--user {
  align-self: flex-end;
  background: var(--mac-user);
  border-bottom-right-radius: 4px;
}
.mac-msg--system {
  align-self: center;
  max-width: 100%;
  font-size: 13px;
  text-align: center;
  background: transparent;
  color: var(--mac-muted);
  padding: 4px 8px;
}
.mac-msg--error { color: #b42318; background: #fee4e2; border-radius: 10px; }
.mac-msg--success { color: #067647; background: #dcfae6; border-radius: 10px; font-weight: 600; }
.mac-msg--typing { color: var(--mac-muted); font-style: italic; }

.mac-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #e5e7eb;
  background: var(--mac-bg);
}
.mac-input {
  flex: 1 1 auto;
  min-height: 42px;
  max-height: 120px;
  resize: none;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font: inherit;
  line-height: 1.4;
  color: var(--mac-text);
  background: var(--mac-bg);
}
.mac-input:focus { outline: 2px solid var(--mac-accent); outline-offset: 0; border-color: var(--mac-accent); }
.mac-input:disabled { background: var(--mac-surface); color: var(--mac-muted); }
.mac-send {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--mac-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.mac-send:hover { background: var(--mac-accent-dark); }
.mac-send:disabled { background: #d1d5db; cursor: not-allowed; }
.mac-send:focus-visible { outline: 2px solid var(--mac-text); outline-offset: 2px; }

.mac-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px 8px;
  background: var(--mac-bg);
  font-size: 11px;
  color: var(--mac-muted);
}
.mac-newchat {
  display: none;
  border: 0;
  background: transparent;
  color: var(--mac-accent-dark);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.mac-newchat.is-visible { display: inline; }

@media (max-width: 480px) {
  .mac-panel {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .maneks-ai-chat.is-open .mac-bubble,
  .maneks-ai-chat.is-open .mac-teaser { display: none; }
  .mac-input { font-size: 16px; } /* prevents iOS zoom */
}

@media (prefers-reduced-motion: reduce) {
  .mac-bubble, .mac-teaser { transition: none; }
}