/* ============================================================================
   widget.css : Magpies chat widget styling
   ----------------------------------------------------------------------------
   Brand tokens. Mirrored in calendar.html so both manager and customer
   surfaces share one palette. When tokens change here, update there.
   ============================================================================ */
.magpies-widget {
  --brand-yellow:    #fec300;  /* primary brand chrome */
  --brand-brown:     #3a2a14;  /* deep accent: user bubble, avatar, buttons */
  --ink:             #2b2418;  /* primary body text */
  --ink-muted:       #8a7e6d;  /* secondary text */
  --card:            #ffffff;  /* white surface */
  --surface-soft:    #fdfbf6;  /* warm cream surface (used by calendar) */
}

.magpies-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2147483000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.mag-bubble {
  background: var(--brand-yellow);
  color: #000;
  border: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s, box-shadow 0.15s;
}
.mag-bubble:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.mag-panel {
  width: 380px;
  height: 560px;
  max-height: calc(100vh - 48px);
  background: var(--brand-yellow);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The HTML5 `hidden` attribute should hide the panel, but `display: flex`
   above overrides the user-agent default `display: none`. This rule
   restores the expected behavior so panel.hidden = true actually hides
   the panel. Without this, minimize and close visually appear to do
   nothing. */
.mag-panel[hidden] {
  display: none !important;
}
@media (max-width: 480px) {
  .mag-panel {
    width: calc(100vw - 32px);
    height: calc(100vh - 48px);
  }
}

.mag-header {
  background: var(--brand-yellow);
  color: #000;
  padding: 10px 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mag-title {
  font-weight: 600;
  font-size: 15px;
  color: #000;
}
.mag-close {
  background: transparent;
  color: #000;
  border: none;
  cursor: pointer;
  padding: 0;
  /* 44x44 meets WCAG 2.5.5 AAA target size — important for touch and for
     users with motor impairments. SVG icon is centered inside. */
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mag-close svg {
  display: block;
}
.mag-close:hover,
.mag-close:focus-visible {
  background: rgba(0, 0, 0, 0.08);
  outline: none;
}
.mag-close:focus-visible {
  box-shadow: 0 0 0 2px #000;
}

/* Visually-hidden text for screen readers — kept off-screen but still
   announced. Used for the textarea label. */
.mag-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus indicator on the chat-trigger bubble — visible for keyboard users.
   The :hover style already covers mouse users. */
.mag-bubble:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* Send button needs a visible focus ring too. */
.mag-form button:focus-visible {
  outline: 2px solid var(--brand-yellow);
  outline-offset: 2px;
}

.mag-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--brand-yellow);
}

.mag-logo {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 8px;
}

.mag-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.mag-assistant {
  background: #fff;
  color: #000;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  /* Row wrapper now controls horizontal alignment; assistant bubbles
     inside .mag-row no longer set align-self. */
}
/* Links inside assistant bubbles (e.g. the catering info-sheet PDF). Break
   anywhere so long URLs can't overflow the narrow bubble. */
.mag-msg a {
  color: inherit;
  text-decoration: underline;
  word-break: break-all;
}

/* Assistant row: avatar + bubble side-by-side. The row, not the bubble,
   is what aligns to the left of the scroll. align-items: flex-end keeps
   the avatar visually anchored to the bubble's bottom corner — the
   conventional "speaker icon" position. */
.mag-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 92%;
}
.mag-row-assistant { align-self: flex-start; }
.mag-row .mag-msg { max-width: 100%; }

/* Avatar mark — small brown disc with the brand yellow "M". Identifies
   the speaker at a glance without competing with the bubble content.
   Sized to be present but not loud (28px). */
.mag-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-brown);
  color: var(--brand-yellow);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* User bubble: warm dark brown with white text. Distinct from the white
   assistant bubble at a glance, so the eye tracks speaker by color (not
   just alignment). Brown ties into the brand's warm/artisan tone and
   foreshadows the planned brand-unification with the calendar palette.
   Contrast: ~13.3:1 (AAA). */
.mag-user {
  background: var(--brand-brown);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
/* Typing indicator bubble. The bubble itself uses the standard assistant
   styling; the three animated dots inside replace the previous static
   "..." text. Pattern is the iMessage / WhatsApp wave: each dot fades up
   and lifts slightly, staggered 0.18s, total cycle 1.4s. Reduced-motion
   users see a static low-opacity row instead of the bounce. */
.mag-thinking {
  /* Slightly tighter padding so the dots sit centered without the bubble
     looking taller than a real message. */
  padding: 12px 14px;
}
.mag-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 14px;
}
.mag-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #555;
  opacity: 0.35;
  animation: mag-typing-bounce 1.4s infinite ease-in-out;
}
.mag-typing-dot:nth-child(1) { animation-delay: 0s; }
.mag-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.mag-typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes mag-typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%          { opacity: 1;    transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .mag-typing-dot { animation: none; opacity: 0.7; }
}

/* Starter chips — quick-action pills shown under the opener on a fresh
   session to lower the barrier of typing the first message. Removed the
   moment the first real user message lands. The chips align left under
   the opener (which also aligns left) so they read as part of the
   assistant's invitation, not as the user's choices. */
.mag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
  max-width: 90%;
  margin-top: -2px;
  /* Indent so chips align with assistant bubble content (past the
     avatar column: 28px avatar + 6px gap). They read as a continuation
     of the opener, not as their own thing. */
  margin-left: 34px;
}
.mag-chip {
  background: #fff;
  color: var(--brand-brown);
  border: 1px solid rgba(58, 42, 20, 0.25);
  border-radius: 999px;
  padding: 7px 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.mag-chip:hover {
  background: var(--brand-brown);
  color: #fff;
  border-color: var(--brand-brown);
}
.mag-chip:focus-visible {
  outline: 2px solid var(--brand-brown);
  outline-offset: 2px;
}

.mag-img-bubble {
  padding: 6px;
  max-width: 90%;
}
.mag-product-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
}

.mag-form {
  display: flex;
  padding: 12px;
  gap: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  background: var(--brand-yellow);
}
.mag-form textarea {
  flex: 1;
  resize: none;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
  min-height: 96px;
  max-height: 200px;
  line-height: 1.4;
  background: #fff;
  color: #000;
}
.mag-form textarea:focus {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.mag-form button {
  background: #000;
  color: var(--brand-yellow);
  border: none;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mag-form button:hover {
  background: #222;
}

/* Privacy notice strip at the bottom of the panel. Subtle but legible:
   small text on the brand yellow, with enough contrast to meet WCAG AA.
   The previous rgba(0,0,0,0.55) blended to ~#725800 which only hit a
   4.18:1 ratio against var(--brand-yellow) (below the 4.5:1 AA threshold for normal
   text). At 0.70 alpha the effective color is dark enough to clear AA
   while still reading as "fine print" rather than primary content. */
.mag-privacy {
  padding: 6px 12px 10px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.70);
  background: var(--brand-yellow);
  text-align: center;
}

/* "Email me this chat" transcript control — sits in the yellow footer band
   under the privacy note. The toggle reveals an inline email field (the
   confirm step) before the transcript is sent. */
.mag-transcript {
  padding: 0 12px 10px;
  background: var(--brand-yellow);
  text-align: center;
}
.mag-transcript-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.72);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
}
.mag-transcript-toggle:hover,
.mag-transcript-toggle:focus-visible { color: #000; }
.mag-transcript-form {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.mag-transcript-form[hidden] { display: none; }
.mag-transcript-email {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 220px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  padding: 6px 9px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--ink);
}
.mag-transcript-email:focus {
  outline: 2px solid var(--brand-brown);
  outline-offset: 1px;
}
.mag-transcript-send {
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: var(--brand-brown);
  color: var(--brand-yellow);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}
.mag-transcript-send:disabled { opacity: 0.6; cursor: default; }
.mag-transcript-cancel {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.6);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.mag-transcript-cancel:hover { color: #000; }
.mag-transcript-status {
  font-size: 11px;
  line-height: 1.35;
  margin-top: 4px;
  color: rgba(0, 0, 0, 0.7);
}
.mag-transcript-status.ok { color: #1c6b2e; font-weight: 700; }
.mag-transcript-status.error { color: #9a1c1c; font-weight: 700; }