/* Front-desk chatbot: launcher pill + panel.
   Kept in one shared file rather than inlined in all 28 pages, because unlike
   the promo card this markup was not already on the site. Uses the same
   variables the pages declare in :root, so it stays on-palette if those move. */

/* Sits to the left of the floating WhatsApp button (58px circle, z 60), not on
   top of it, so both calls to action are reachable with one thumb. */
.chat-cta {
  position: fixed; bottom: 22px; right: 92px; z-index: 61;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; border: 1.5px solid #f2a900;
  background: #1c1917;  /* BUILD 80: dark with the site's yellow (Eric) */
  color: #f2a900; cursor: pointer; font-family: inherit;
  /* BUILD 151 (Eric, 2026-09-08): the pill was far bigger than it needed to be and dominated
     the hero photo. Down to about half the area -- still legible, no longer the loudest thing
     on the page. */
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 7px 13px; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  transition: border-color .15s, transform .15s, box-shadow .2s, background .15s;
}

.chat-cta:hover {
  background: #2a2624;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(242, 169, 0, .2), 0 0 22px rgba(242, 169, 0, .45), 0 4px 16px rgba(0, 0, 0, .45);
}

.chat-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 169, 0, .35), 0 0 26px rgba(242, 169, 0, .55);
}

/* Added by assets/chatbot.js on click, removed after 700ms: the panel opens
   elsewhere on the screen, so acknowledge the press on the button itself. */
.chat-cta.is-glowing {
  box-shadow: 0 0 0 4px rgba(242, 169, 0, .3), 0 0 32px rgba(242, 169, 0, .7), 0 4px 18px rgba(0, 0, 0, .5);
  border-color: var(--red-light);
}

.chat-cta-icon { display: inline-flex; color: #f2a900; }
.chat-cta-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; }

.chat-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  width: 380px; max-width: calc(100vw - 32px);
  height: min(560px, calc(100vh - 44px));
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  color: var(--off-white);
}

.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: #000; border-bottom: 1px solid var(--line);
}

.chat-head-icon { display: inline-flex; color: var(--red); flex-shrink: 0; }
.chat-head-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }

.chat-head-text { min-width: 0; flex: 1; }

.chat-head-text strong {
  display: block; font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; letter-spacing: .02em; color: var(--off-white);
}

.chat-head-text span { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; }

/* The widget carries its own EN/ES switch: somebody who lands on the English
   page and would rather read Spanish should not have to find the header toggle
   and reload the page first. */
.chat-lang {
  flex-shrink: 0; font: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: transparent; color: var(--steel);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 4px 8px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.chat-lang:hover { border-color: var(--red); color: var(--red-light); background: rgba(242, 169, 0, .12); }

.chat-close {
  flex-shrink: 0; background: none; border: 0; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px;
}

.chat-close:hover { color: var(--off-white); }

.chat-log {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: #050506;
}

.chat-msg { max-width: 88%; padding: 11px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.55; }
.chat-msg p { margin: 0 0 8px; }
.chat-msg p:last-child { margin-bottom: 0; }

.chat-msg-bot {
  align-self: flex-start; background: var(--panel);
  border: 1px solid var(--line); border-bottom-left-radius: 3px;
}

.chat-msg-user {
  align-self: flex-end; background: var(--red); color: #121212; font-weight: 500;
  border-bottom-right-radius: 3px;
}

.chat-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.chat-chips-intro {
  flex-basis: 100%; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}

/* Small, quiet and square-ish. Big saturated pills read as a generic AI widget
   bolted onto the page; a hairline border and near-body-size text make these
   read as the shop's own links. */
.chat-chip {
  font: inherit; font-size: 12.5px; line-height: 1.35; text-align: left;
  background: var(--panel); color: var(--steel);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 10px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.chat-chip:hover { border-color: var(--red); background: rgba(242, 169, 0, .1); color: var(--red-light); }

/* One action per answer carries the accent; the rest are outlined. A row of
   three solid gold buttons is what makes a widget look generated. */
.chat-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.chat-action {
  font: inherit; font-size: 12.5px; font-weight: 600;
  background: transparent; color: var(--steel);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 11px; cursor: pointer; text-align: center;
}

.chat-action:first-child { background: var(--red); border-color: var(--red); color: #121212; }
.chat-action:first-child:hover { background: var(--red-light); border-color: var(--red-light); }
.chat-action:hover { border-color: var(--red); color: var(--red-light); }

/* BUILD 220: "Read the full answer" under a generated reply. It is a link to
   the section, not an action, so it stays quiet -- underlined text, no pill --
   and it must not inherit :first-child's solid fill just for being alone in
   its row. */
.chat-more { margin-top: -6px; }
.chat-more .chat-action-more,
.chat-more .chat-action-more:first-child {
  background: transparent; border: 0; padding: 2px 0;
  color: var(--red-light); text-decoration: underline; text-underline-offset: 3px;
  font-size: 12px; font-weight: 600;
}
.chat-more .chat-action-more:hover { color: #fff; }

/* BUILD 220: the trailing spacer that lets a short reply be pinned to the top
   of the log (see pinTop in chatbot.js). Invisible, takes no gap. */
.chat-spacer { flex: 0 0 auto; margin: 0; padding: 0; }

.chat-input { display: flex; gap: 8px; padding: 12px 14px 6px; background: var(--panel); }

.chat-input input {
  flex: 1; font: inherit; font-size: 14.5px; color: var(--off-white);
  background: #000; border: 1.5px solid var(--line);
  border-radius: 8px; padding: 9px 11px; min-width: 0;
}

.chat-input input:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(242, 169, 0, .2);
}

.chat-send {
  flex-shrink: 0; font: inherit; font-size: 12.5px; font-weight: 700;
  background: var(--red); color: #121212; border: 0; border-radius: 6px;
  padding: 8px 14px; cursor: pointer;
}

.chat-send:hover { background: var(--red-light); }

.chat-disclaimer {
  margin: 0; padding: 4px 14px 12px; background: var(--panel);
  font-size: 11.5px; color: var(--muted); text-align: center;
}

@media (max-width: 760px) {
  .chat-cta { font-size: 11px; padding: 10px 14px; gap: 7px; right: 88px; bottom: 22px; }
  .chat-cta-icon svg { width: 16px; height: 16px; }
  .chat-panel {
    right: 0; left: 0; bottom: 0; width: auto; max-width: none;
    height: min(78vh, calc(100vh - 60px));
    border-radius: 14px 14px 0 0;
  }
  /* The panel covers the corner while it is open, so the WhatsApp float and
     the launcher cannot end up half-hidden behind it. */
  body.chat-open .wa-float,
  body.chat-open .chat-cta { display: none; }
}