/* ============================================================
   Velvet Massage - visitor support chat widget
   Dark editorial, oxblood and gold, matching the site.
   Namespaced with amc- / #amc- to avoid clashing with site.css.
   The Velvet tokens are repeated here (same values as site.css)
   so the widget still carries the brand when embedded alone.

   THESE VALUES ARE NOT DECORATIVE DUPLICATION, they are load-order critical.
   index.html loads site.css and THEN widget.css, so this :root block wins for
   the whole document, not just for the widget. When site.css was darkened to
   #0E0002 and this block was left behind, every surface on the live site kept
   the old lighter oxblood: the site.css edit was real, served, and completely
   invisible, because --oxblood was reassigned three files later. Suite 20 now
   asserts these are identical to site.css so the next darkening cannot drift.
   ============================================================ */

:root {
  /* ---- Velvet brand tokens ---- */
  --oxblood:    #140003;
  --wine:       #38080E;
  --wine-lift:  #4A1018;
  --gold:       #C9A45C;
  --gold-bright:#E3C88A;
  --gold-deep:  #8E6E33;
  --ivory:      #F2E9DC;
  --muted:      #BCA697;

  /* ---- widget-local names, mapped onto the Velvet scheme ---- */
  --amc-black:    var(--oxblood);
  --amc-card:     var(--wine);
  --amc-card-2:   var(--wine-lift);
  --amc-ivory:    var(--ivory);
  --amc-muted:    var(--muted);
  --amc-gold:     var(--gold);
  --amc-gold-deep:var(--gold-deep);
  --amc-gold-soft:var(--gold-bright);
  --amc-hairline: rgba(201, 164, 92, 0.18);

  --amc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --amc-font: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}

/* ---------- Launcher ---------- */

#amc-launcher {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 54px;
  padding: 0 20px 0 16px;
  border: 1px solid rgba(227, 200, 138, 0.35);
  border-radius: 999px;
  background: var(--amc-black);
  color: var(--amc-gold-soft);
  font-family: var(--amc-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
  transition: background 0.3s var(--amc-ease), color 0.3s var(--amc-ease),
              border-color 0.3s var(--amc-ease), transform 0.3s var(--amc-ease),
              box-shadow 0.3s var(--amc-ease);
}
#amc-launcher:hover {
  background: var(--amc-gold);
  border-color: var(--amc-gold);
  color: var(--amc-black);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(201, 164, 92, 0.45);
}
#amc-launcher:focus-visible {
  outline: 2px solid var(--amc-gold-soft);
  outline-offset: 3px;
}
#amc-launcher svg { width: 20px; height: 20px; flex-shrink: 0; }
.amc-launcher-label { white-space: nowrap; }

/* soft, slow attention pulse while there are unread replies */
#amc-launcher.amc-unread {
  animation: amc-pulse 2.4s var(--amc-ease) infinite;
}
@keyframes amc-pulse {
  0%   { box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(201, 164, 92, 0.45); }
  70%  { box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6), 0 0 0 16px rgba(201, 164, 92, 0); }
  100% { box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(201, 164, 92, 0); }
}

/* unread count badge.
   It hangs off the OUTER end of the pill, the end nearest the screen edge, so
   it reads as a count pinned to the button rather than a stray dot dropped in
   the page. With the launcher on the left that outer end is the left one, and
   the badge then sits over the chat icon, which is the stronger notification
   pattern anyway. At left: -4px against a launcher at left: 20px it still
   keeps 16px of clearance from the viewport, so it cannot be clipped. */
#amc-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--amc-gold);
  color: var(--amc-black);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--amc-black);
  box-shadow: 0 2px 8px rgba(201, 164, 92, 0.5);
}
#amc-launcher.amc-unread #amc-badge { display: inline-flex; }

/* ---------- Panel ---------- */

#amc-panel {
  position: fixed;
  left: 20px;
  bottom: 88px;
  z-index: 2147483000;
  width: 372px;
  max-width: calc(100vw - 40px);
  height: 560px;
  max-height: calc(100vh - 128px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--amc-card);
  border: 1px solid var(--amc-hairline);
  border-radius: 16px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
  font-family: var(--amc-font);
  color: var(--amc-ivory);
  /* The panel has to grow out of the corner the launcher is actually in, which
     is now the bottom left. Left on bottom right it would unfold from the far
     side of itself and the entrance would read as a glitch rather than as the
     button opening. Not repeated in the mobile block below, so this one line
     covers every width. */
  transform-origin: bottom left;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--amc-ease),
              transform 0.3s var(--amc-ease),
              visibility 0.3s var(--amc-ease);
}
#amc-panel.amc-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}
/* The one automatic greeting arrives a touch slower than a click, and it does
   NOT cross-fade.

   WHY. A cross-fade means that for the length of the animation the panel is
   partly transparent and the page is legible through it. Nobody minds that on
   an open the visitor asked for. On the automatic one they did not ask for, a
   camera caught the homepage hero reading straight through the panel and it
   looked like a rendering fault rather than an entrance. Opacity is therefore
   left out of the transition here: the panel is solid from its first painted
   frame and only its position and scale animate. Same timing, same easing,
   nothing showing through. */
#amc-panel.amc-auto {
  transition: transform 0.45s var(--amc-ease),
              visibility 0.45s var(--amc-ease);
}

/* ---------- Header ---------- */

#amc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 14px 15px 16px;
  /* Re-derived with the rest of the palette: #3D0F1C and #4A3A1B were the old
     lighter wine and a brownish gold, both from before the artwork was sampled.
     135deg -> 225deg is the mirror of the same sheen, nothing more: the header
     still brightens towards the panel's OUTER bottom corner, which moved to the
     left with the widget. The three stops and their percentages are untouched
     on purpose, since they are the sampled values this comment is about. */
  background: linear-gradient(225deg, #16060B 0%, #38080E 58%, #4A1018 100%);
  color: var(--amc-ivory);
  border-bottom: 1px solid var(--amc-hairline);
}
#amc-avatar {
  /* 38px -> 46px. The mark is the brand and it was the smallest thing in the
     header; it is now the largest. */
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  /* THE ORB IS THE FALLBACK, NOT THE DEFAULT. These two lines only paint when
     there is no image, because the same element then holds the studio initials
     and dark letters need a ground. With the lotus in place both are dropped
     by the rule below. */
  background: radial-gradient(circle at 34% 30%, var(--amc-gold-soft), var(--amc-gold) 62%, var(--amc-gold-deep));
  box-shadow: 0 0 16px 1px rgba(201, 164, 92, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* THE LOTUS ALONE. No disc, no glow, no gold ring: the owner asked for the mark
   and nothing around it. */
#amc-avatar:has(img) {
  background: none;
  box-shadow: none;
  border-radius: 0;
}
#amc-avatar span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--amc-black);
}
/* the studio's own mark, filling the space it used to sit inside */
#amc-avatar span, #amc-avatar span:has(img) { display: flex; }
#amc-avatar span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* padding 4px -> 0. Four pixels each side of a 38px box was a fifth of the
     mark given away to a disc that is no longer there. */
  padding: 0;
  box-sizing: border-box;
  /* WHAT MAKES IT POP, now the gold disc is not doing it. The lotus is deep red
     on a dark red header, so it is separated by a shadow underneath it rather
     than by a ring around it: the mark reads as lifted off the bar instead of
     stuck to it, and nothing is added to the artwork itself. */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 10px rgba(226, 72, 63, 0.28));
}
#amc-header-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#amc-title { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
#amc-subtitle {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: 12.5px; color: var(--amc-muted);
}
#amc-subtitle i {
  width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%;
  background: #9BD4A2; box-shadow: 0 0 8px 1px rgba(155, 212, 162, 0.8);
  display: inline-block;
}
#amc-close {
  flex-shrink: 0; width: 34px; height: 34px; border: none; border-radius: 50%;
  cursor: pointer; background: rgba(242, 233, 220, 0.07); color: var(--amc-ivory);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--amc-ease), transform 0.2s var(--amc-ease);
}
#amc-close:hover { background: rgba(242, 233, 220, 0.16); transform: rotate(90deg); }
#amc-close:focus-visible { outline: 2px solid var(--amc-gold-soft); outline-offset: 2px; }
#amc-close svg { width: 18px; height: 18px; }

/* ---------- Messages ---------- */

#amc-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* The gold bloom sits in the panel's outer top corner, away from the page and
     towards the screen edge. That corner is the top left now the widget is on
     the left, so the anchor moves with it (100% 0% -> 0% 0%). */
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(201, 164, 92, 0.06), transparent 60%),
    var(--amc-card);
  scroll-behavior: smooth;
}
#amc-messages::-webkit-scrollbar { width: 8px; }
#amc-messages::-webkit-scrollbar-thumb { background: rgba(227, 200, 138, 0.2); border-radius: 999px; }
#amc-messages::-webkit-scrollbar-track { background: transparent; }

.amc-greeting {
  align-self: center;
  max-width: 88%;
  margin: 4px 0 6px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--amc-muted);
}

.amc-msg {
  max-width: 82%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 14px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  /* Replies are sent with real line breaks (the studio composer offers
     Shift + Enter), so they must survive here too. Without this the
     breaks collapse to spaces and a formatted reply reads as one run-on
     line to the visitor. */
  white-space: pre-wrap;
  animation: amc-msg-in 0.3s var(--amc-ease);
}
.amc-msg.amc-visitor {
  align-self: flex-end;
  background: var(--amc-gold);
  color: var(--amc-black);
  border-bottom-right-radius: 4px;
}
.amc-msg.amc-owner {
  align-self: flex-start;
  background: var(--amc-card-2);
  color: var(--amc-ivory);
  border: 1px solid var(--amc-hairline);
  border-bottom-left-radius: 4px;
}
@keyframes amc-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- The assistant in the thread ---------- */

/* a quiet name above studio-side messages whenever the voice changes */
.amc-sender {
  align-self: flex-start;
  margin: 4px 2px -4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amc-gold-soft);
  opacity: 0.85;
}

/* the assistant's bubble: the studio side still, one degree warmer at the edge */
.amc-msg.amc-bot { border-color: rgba(201, 164, 92, 0.32); }

/* tappable option chips under an assistant message */
.amc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  max-width: 88%;
  margin: -2px 0 2px;
  animation: amc-msg-in 0.3s var(--amc-ease);
}
.amc-chips-label {
  flex-basis: 100%;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amc-muted);
}
.amc-chip {
  border: 1px solid rgba(201, 164, 92, 0.45);
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(201, 164, 92, 0.06);
  color: var(--amc-gold-soft);
  font-family: var(--amc-font);
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s var(--amc-ease), color 0.25s var(--amc-ease),
              border-color 0.25s var(--amc-ease), transform 0.25s var(--amc-ease);
}
.amc-chip:hover:not(:disabled) {
  background: var(--amc-gold);
  border-color: var(--amc-gold);
  color: var(--amc-black);
  transform: translateY(-1px);
}
.amc-chip:focus-visible { outline: 2px solid var(--amc-gold-soft); outline-offset: 2px; }
.amc-chips.amc-spent .amc-chip { opacity: 0.4; cursor: default; }

/* the chips as THE menu, inside the message bubble: one card on screen, the
   prompt on top and the choices under it, said once. These are the numbered
   rows the assistant used to print as text as well, which told the visitor
   everything twice. Numbered to match what typing that number picks. */
.amc-msg.amc-menu-card { max-width: 92%; }
.amc-menu-prompt { margin-bottom: 8px; }
.amc-chips.amc-menu {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  align-self: stretch;
  max-width: none;
  margin: 0;
  animation: none;
}
.amc-chips.amc-menu .amc-chip { border-radius: 12px; display: block; width: 100%; }

/* typing indicator: three soft dots in an assistant-side bubble */
.amc-typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 13px 16px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: var(--amc-card-2);
  border: 1px solid rgba(201, 164, 92, 0.32);
  animation: amc-msg-in 0.3s var(--amc-ease);
}
.amc-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amc-gold-soft);
  opacity: 0.35;
  animation: amc-typing-dot 1.2s var(--amc-ease) infinite;
}
.amc-typing i:nth-child(2) { animation-delay: 0.15s; }
.amc-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes amc-typing-dot {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* ---------- Talk to a person ---------- */

#amc-tools {
  display: flex;
  justify-content: flex-end;
  padding: 7px 14px 0;
  background: var(--amc-card);
  border-top: 1px solid var(--amc-hairline);
}
#amc-panel.amc-locked #amc-tools { display: none; }
/* the tools row carries the hairline, so the composer under it does not repeat it */
#amc-tools ~ #amc-form { border-top: none; padding-top: 8px; }
#amc-human {
  border: none;
  background: none;
  padding: 2px 0;
  color: var(--amc-muted);
  font-family: var(--amc-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s var(--amc-ease);
}
#amc-human:hover { color: var(--amc-gold-soft); }
#amc-human:focus-visible { outline: 2px solid var(--amc-gold-soft); outline-offset: 2px; }

/* connection lost: the presence dot cools until the socket returns */
#amc-subtitle.amc-off i {
  background: #C98A7F;
  box-shadow: 0 0 8px 1px rgba(201, 138, 127, 0.7);
}

/* ---------- Capture-first gate ---------- */

#amc-gate {
  display: none;
  flex-direction: column;
  padding: 16px;
  border-top: 1px solid var(--amc-hairline);
  background: var(--amc-card);
}
#amc-panel.amc-locked #amc-gate { display: flex; }
#amc-panel.amc-locked #amc-form { display: none; }

#amc-gate-title {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--amc-ivory);
}
.amc-gate-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amc-gold-soft);
  margin: 8px 0 4px;
}
#amc-gate input {
  border: 1px solid var(--amc-hairline);
  border-radius: 10px;
  padding: 10px 13px;
  background: rgba(242, 233, 220, 0.04);
  color: var(--amc-ivory);
  font-family: inherit;
  /* 14px -> 16px. Below 16px mobile Safari zooms the whole page in on focus and
     never zooms back out, which on a chat widget means the visitor is magnified
     and scrolling sideways from their very first message. The two fields here are
     the capture gate (name and phone) and the composer, so both were affected. */
  font-size: 16px;
  outline: none;
  transition: border-color 0.25s var(--amc-ease), background 0.25s var(--amc-ease);
}
#amc-gate input:focus { border-color: var(--amc-gold); background: rgba(242, 233, 220, 0.07); }
#amc-gate input::placeholder { color: rgba(188, 166, 151, 0.6); }
#amc-gate-error {
  margin: 8px 0 0;
  min-height: 16px;
  font-size: 12.5px;
  color: #e08f7f;
}
#amc-gate-go {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--amc-gold);
  border-radius: 999px;
  background: transparent;
  color: var(--amc-gold-soft);
  font-family: var(--amc-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s var(--amc-ease), color 0.3s var(--amc-ease), transform 0.3s var(--amc-ease);
}
#amc-gate-go:hover { background: var(--amc-gold); color: var(--amc-black); transform: translateY(-1px); }

/* ---------- Composer ---------- */

#amc-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--amc-hairline);
  background: var(--amc-card);
}
#amc-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--amc-hairline);
  border-radius: 999px;
  padding: 11px 16px;
  background: rgba(242, 233, 220, 0.04);
  color: var(--amc-ivory);
  font-family: inherit;
  /* 14px -> 16px, same iOS focus-zoom threshold as the gate above. */
  font-size: 16px;
  outline: none;
  transition: border-color 0.25s var(--amc-ease), background 0.25s var(--amc-ease);
}
#amc-input:focus { border-color: var(--amc-gold); background: rgba(242, 233, 220, 0.07); }
#amc-input::placeholder { color: rgba(188, 166, 151, 0.6); }
#amc-send {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--amc-gold);
  color: var(--amc-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--amc-ease), transform 0.25s var(--amc-ease), opacity 0.25s var(--amc-ease);
}
#amc-send svg { width: 18px; height: 18px; }
#amc-send:hover:not(:disabled) { background: var(--amc-gold-soft); transform: translateY(-1px); }
#amc-send:disabled { opacity: 0.35; cursor: default; }

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
  #amc-panel {
    /* Both edges, no width. WHY NOT 100vw: 100vw counts the classic scrollbar
       and a fixed element's containing block does not, so calc(100vw - 24px)
       asked for a few pixels more than the panel had. Anchored right, that spill
       hung off the left edge where the browser clipped it silently. Anchored
       left, the same spill hangs off the right and gives the whole page a
       horizontal scrollbar. Naming both edges instead cannot overflow at any
       viewport, whatever the scrollbar is doing.
       The panel is still anchored at left: 12px and still capped by the shared
       max-width above, so on a 390px phone it measures 350px with 12px of air on
       the left and 28px on the right, the mirror of what it has always been.
       right: 12px is the floor, not the width: it is what stops the panel
       reaching the far edge if that cap is ever lifted. */
    left: 12px;
    right: 12px;
    max-height: 70vh;
    bottom: 84px;
  }
  #amc-launcher { left: 12px; bottom: 12px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  #amc-launcher, #amc-panel, #amc-close, #amc-send, #amc-gate-go { transition: none; }
  /* higher specificity than .amc-auto, so the automatic open never animates */
  #amc-panel.amc-auto { transition: none; }
  #amc-launcher.amc-unread { animation: none; }
  .amc-msg { animation: none; }
  #amc-messages { scroll-behavior: auto; }
  .amc-chip, #amc-human { transition: none; }
  .amc-chip:hover:not(:disabled) { transform: none; }
  .amc-chips, .amc-typing { animation: none; }
  .amc-typing i { animation: none; opacity: 0.6; }
}