/* ==========================================================================
   CITRUSTACK — site assistant

   The panel runs on two different token sets: the main site's shipping-record
   system (css/styles.css) and the /launch/ offer page (css/launch.css), which
   names its colours differently and is rounded and shadowed where the main
   site is square and flat.

   So the component maps everything it needs onto its own --c-* names once, at
   the root, taking whichever token the host page happens to define. The radius
   and shadow tokens resolve to 0 / none on the main site and to real values on
   /launch/ — one rule, and the widget speaks each page's own idiom.
   ========================================================================== */
.chat-launcher,
.chat-panel {
  /* colour */
  --c-ink:          var(--ink, #100F0C);
  --c-panel:        var(--ink-panel, var(--night-2, #191713));
  --c-paper:        var(--paper, var(--bg, #F3F1EA));
  --c-on-paper:     var(--on-paper, var(--ink, #100F0C));
  --c-on-ink:       var(--on-ink, var(--on-night, #F3F1EA));
  --c-on-ink-mute:  var(--on-ink-mute, var(--on-night-soft, #9E998C));
  --c-rule-ink:     var(--rule-ink, var(--line-night, rgba(243, 241, 234, .18)));
  --c-citrus:       var(--citrus, #FF4D00);
  --c-citrus-text:  var(--citrus-text, #B83100);

  /* type + motion */
  --c-label:        var(--fs-label, .72rem);
  --c-ease:         var(--ease, cubic-bezier(.4, 0, .2, 1));
  --c-ease-out:     var(--ease-out, var(--ease, cubic-bezier(.16, 1, .3, 1)));

  /* shape — square and flat unless the host page says otherwise */
  --c-radius:       var(--r-lg, 0);
  --c-radius-sm:    var(--r-sm, 0);
  --c-radius-pill:  var(--r-pill, 0);
  --c-shadow:       var(--shadow-lg, none);

  /* the panel's own rhythm */
  --c-pad: 1.25rem;

  /* Form controls don't inherit a font, and only styles.css resets them —
     without this the composer falls back to the UA font on /launch/. */
  font-family: var(--sans, 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif);
}

.chat-close,
.chat-send,
.chat-suggest button,
.chat-form textarea { font-family: inherit; }

/* ------------------------------------------------------------------ launcher */
.chat-launcher {
  position: fixed;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  z-index: 90;

  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1.25rem;
  border: 1px solid var(--c-ink);
  border-radius: var(--c-radius-pill);
  box-shadow: var(--c-shadow);
  background: var(--c-ink);
  color: var(--c-paper);

  font-size: var(--c-label);
  font-variation-settings: 'wdth' 82, 'wght' 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  cursor: pointer;

  transition: background .35s var(--c-ease), color .35s var(--c-ease),
              transform .45s var(--c-ease-out), opacity .3s var(--c-ease);
}
.chat-launcher:hover,
.chat-launcher:focus-visible { background: var(--c-citrus); color: var(--c-ink); border-color: var(--c-citrus); }
.chat-launcher:focus-visible { outline: 2px solid var(--c-citrus); outline-offset: 3px; }

/* The citrus mark. Square on the main site, a dot where the page is rounded. */
.chat-launcher__mark {
  width: 10px; height: 10px;
  border-radius: var(--c-radius-pill);
  background: var(--c-citrus);
  flex: none;
}
.chat-launcher:hover .chat-launcher__mark,
.chat-launcher:focus-visible .chat-launcher__mark { background: var(--c-ink); }

.chat-launcher.is-open { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------- the panel */
.chat-panel {
  position: fixed;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  z-index: 95;

  width: min(400px, calc(100vw - 2rem));
  height: min(620px, calc(100dvh - 2rem));

  display: flex;
  flex-direction: column;
  overflow: hidden;              /* so a radius actually clips the children */
  background: var(--c-ink);
  color: var(--c-on-ink);
  border: 1px solid var(--c-ink);
  border-top: 3px solid var(--c-citrus);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);

  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s var(--c-ease), transform .45s var(--c-ease-out);
}
.chat-panel[hidden] { display: none; }
.chat-panel.is-open { opacity: 1; transform: none; }

/* On a phone the panel is the page — a 400px card floating over content is
   a worse reading surface than the whole screen. */
@media (max-width: 620px) {
  .chat-panel {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; height: 100dvh;
    border: 0; border-top: 3px solid var(--c-citrus);
    border-radius: 0;
  }
}

/* ------------------------------------------------------------------- header */
.chat-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem var(--c-pad) .95rem;
  border-bottom: 1px solid var(--c-rule-ink);
}
.chat-head__title { font-size: var(--c-label); color: var(--c-paper); }
.chat-head__meta {
  font-size: .68rem;
  font-variation-settings: 'wdth' 80, 'wght' 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-on-ink-mute);
  margin-left: auto;
}
.chat-close {
  border: 0; background: none; padding: .2rem .35rem; margin: -.2rem -.35rem -.2rem auto;
  color: var(--c-on-ink-mute); cursor: pointer; line-height: 1;
  font-size: var(--c-label);
  font-variation-settings: 'wdth' 80, 'wght' 650;
  text-transform: uppercase; letter-spacing: .14em;
  transition: color .3s var(--c-ease);
}
.chat-close:hover, .chat-close:focus-visible { color: var(--c-citrus); }

/* --------------------------------------------------------------- transcript */
.chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.15rem var(--c-pad);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  font-size: .95rem;
  line-height: 1.6;
}
/* A short thread sits on the composer instead of hanging from the header. */
.chat-log > :first-child { margin-top: auto; }

.chat-msg { max-width: 92%; }
.chat-msg p { margin: 0 0 .6rem; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg ul { margin: .5rem 0; display: grid; gap: .3rem; }
.chat-msg li { padding-left: 1rem; position: relative; }
.chat-msg li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 1px; background: var(--c-citrus);
}
.chat-msg strong { font-variation-settings: 'wdth' 100, 'wght' 700; }
.chat-msg a {
  color: var(--c-paper);
  background-image: linear-gradient(var(--c-citrus), var(--c-citrus));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 1px;
}
.chat-msg a:hover, .chat-msg a:focus-visible { color: var(--c-citrus); }

/* The visitor's own turn is stamped on paper so the two voices never blur. */
.chat-msg--you {
  align-self: flex-end;
  background: var(--c-paper);
  color: var(--c-on-paper);
  border-radius: var(--c-radius-sm);
  padding: .7rem .9rem;
  max-width: 88%;
}
.chat-msg--you a { color: var(--c-citrus-text); background-image: linear-gradient(var(--c-citrus-text), var(--c-citrus-text)); }

.chat-msg--bot { color: var(--c-on-ink); }
.chat-msg--note {
  color: var(--c-on-ink-mute);
  font-size: .82rem;
  border-left: 1px solid var(--c-citrus);
  padding-left: .8rem;
  max-width: 100%;
}

/* Three squares marching while the model composes. */
.chat-typing { display: inline-flex; gap: 5px; padding: .25rem 0; }
.chat-typing i {
  width: 6px; height: 6px;
  border-radius: var(--c-radius-pill);
  background: var(--c-citrus);
  animation: chat-tick 1.1s infinite;
}
.chat-typing i:nth-child(2) { animation-delay: .18s; }
.chat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes chat-tick { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* Caret while text streams in, so a slow answer still reads as alive. */
.chat-msg--streaming::after {
  content: ''; display: inline-block; vertical-align: -1px;
  width: 7px; height: 1em; margin-left: 3px;
  background: var(--c-citrus);
  animation: chat-caret 1s steps(1) infinite;
}
@keyframes chat-caret { 50% { opacity: 0; } }

/* -------------------------------------------------------------- suggestions */
.chat-suggest {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: 0 var(--c-pad) .9rem;
}
.chat-suggest[hidden] { display: none; }
.chat-suggest button {
  border: 1px solid var(--c-rule-ink);
  border-radius: var(--c-radius-pill);
  background: none;
  color: var(--c-on-ink-mute);
  padding: .5rem .7rem;
  font-size: .7rem;
  font-variation-settings: 'wdth' 84, 'wght' 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  transition: color .3s var(--c-ease), border-color .3s var(--c-ease);
}
.chat-suggest button:hover,
.chat-suggest button:focus-visible { color: var(--c-citrus); border-color: var(--c-citrus); }

/* ---------------------------------------------------------------- composer */
.chat-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-top: 1px solid var(--c-rule-ink);
}
.chat-form textarea {
  flex: 1 1 auto;
  border: 0;
  background: none;
  color: var(--c-on-ink);
  padding: 1rem var(--c-pad);
  resize: none;
  min-height: 3.4rem;
  max-height: 8rem;
  font-size: .95rem;
  line-height: 1.5;
}
.chat-form textarea::placeholder { color: var(--c-on-ink-mute); }
.chat-form textarea:focus-visible { outline: 2px solid var(--c-citrus); outline-offset: -2px; }

.chat-send {
  flex: none;
  border: 0;
  border-left: 1px solid var(--c-rule-ink);
  background: var(--c-citrus);
  color: var(--c-ink);
  width: 3.6rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .3s var(--c-ease), color .3s var(--c-ease);
}
.chat-send svg { width: 16px; height: 16px; }
.chat-send:hover:not(:disabled), .chat-send:focus-visible { background: var(--c-paper); }
.chat-send:disabled { background: var(--c-panel); color: var(--c-on-ink-mute); cursor: default; }
.chat-send:focus-visible { outline: 2px solid var(--c-paper); outline-offset: -4px; }

.chat-foot {
  padding: .55rem var(--c-pad) .7rem;
  border-top: 1px solid var(--c-rule-ink);
  font-size: .64rem;
  font-variation-settings: 'wdth' 80, 'wght' 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-on-ink-mute);
  display: flex; gap: .8rem; flex-wrap: wrap;
}
.chat-foot a { color: var(--c-on-ink-mute); }
.chat-foot a:hover, .chat-foot a:focus-visible { color: var(--c-citrus); }

/* The block on /assistant/ that the page component drops into. */
.chat-mount { margin-top: clamp(2rem, 4vw, 3.25rem); }

/* -------------------------------------------------------- the /assistant/ page
   The same component, unpinned: a block in the page flow that fills the
   reading column instead of floating over it. */
.chat--page {
  position: static;
  width: 100%;
  height: min(58dvh, 560px);
  min-height: 420px;
  opacity: 1;
  transform: none;
  --c-pad: clamp(1.25rem, 3vw, 2rem);
}
.chat--page .chat-close { display: none; }
/* A reading column inside the wider shell: across a 1100px panel the two
   voices would otherwise sit at opposite ends of the room. */
.chat--page .chat-log,
.chat--page .chat-suggest { max-width: 74ch; margin-inline: auto; width: 100%; }
.chat--page .chat-msg--you { max-width: 52ch; }

@media (max-width: 620px) {
  .chat--page {
    position: static;
    height: 76dvh; min-height: 420px;
    border: 1px solid var(--c-ink);
    border-top: 3px solid var(--c-citrus);
    border-radius: var(--c-radius);
  }
}

/* ------------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  .chat-launcher,
  .chat-panel { transition: none; }
  .chat-launcher.is-open { transform: none; }
  .chat-panel { transform: none; }
  .chat-typing i,
  .chat-msg--streaming::after { animation: none; }
  .chat-msg--streaming::after { opacity: .6; }
}

/* Printing a chat panel is never what anyone wanted. */
@media print {
  .chat-launcher, .chat-panel:not(.chat--page) { display: none !important; }
}