/* ==========================================================================
   Jolly Assist chat widget. Uses the site's own tokens (red, ink, Barlow
   Condensed, Inter) so it reads as part of the site, not a bolt-on.
   ========================================================================== */

.jae-chat [hidden] { display: none !important; }

.jae-chat {
  --jae-red: var(--red, #d9291c);
  --jae-red-dark: var(--red-dark, #ae1f13);
  --jae-red-tint: var(--red-tint, #fdecea);
  --jae-ink: var(--ink, #0f1419);
  --jae-ink-2: var(--ink-2, #171e26);
  --jae-steel: var(--steel, #3d4754);
  --jae-slate: var(--slate, #667385);
  --jae-line: var(--line, #dfe3e8);
  --jae-paper: var(--paper, #f7f8f9);
  --jae-radius: var(--radius, 4px);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--jae-ink);
}

/* keep the back-to-top button clear of the chat launcher */
.to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* ---------------------------------------------------------- launcher -- */

.jae-launcher {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 140;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0 1.1rem 0 0.95rem;
  background: var(--jae-red);
  color: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: var(--shadow-md, 0 6px 24px rgba(15, 20, 25, 0.16));
  font: 600 0.95rem/1 var(--font-body, "Inter", system-ui, sans-serif);
  cursor: pointer;
  transition: background 0.15s;
}
.jae-launcher:hover { background: var(--jae-red-dark); }
.jae-launcher:focus-visible,
.jae-iconbtn:focus-visible,
.jae-chip:focus-visible,
.jae-btn:focus-visible,
.jae-send:focus-visible {
  outline: 3px solid var(--jae-ink);
  outline-offset: 2px;
}
.jae-icon { display: inline-flex; line-height: 0; }

/* ------------------------------------------------------------- panel -- */

.jae-panel {
  position: fixed;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 140;
  display: flex;
  flex-direction: column;
  width: min(390px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 100px));
  background: #fff;
  border: 1px solid var(--jae-line);
  border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 18px 48px rgba(15, 20, 25, 0.22));
  overflow: hidden;
  animation: jae-in 0.16s ease-out;
}
@keyframes jae-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.jae-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.7rem 0.8rem 0.9rem;
  background: var(--jae-ink);
  color: #fff;
  border-bottom: 3px solid var(--jae-red);
}
.jae-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--jae-red);
  border-radius: var(--jae-radius);
  font: 700 1.15rem/1 var(--font-display, "Barlow Condensed", "Arial Narrow", sans-serif);
  letter-spacing: 0.02em;
}
.jae-head__text { flex: 1; min-width: 0; }
.jae-head__name {
  font: 700 1.3rem/1.1 var(--font-display, "Barlow Condensed", "Arial Narrow", sans-serif);
  letter-spacing: 0.01em;
}
.jae-head__sub { font-size: 0.78rem; color: #b9c2cd; }
.jae-iconbtn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: var(--jae-radius);
  cursor: pointer;
}
.jae-iconbtn:hover { background: var(--jae-ink-2, #171e26); }
.jae-head .jae-iconbtn:focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------- log -- */

.jae-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 0.9rem 0.6rem;
  background: var(--jae-paper);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.jae-msg { display: flex; }
.jae-msg--bot { justify-content: flex-start; }
.jae-msg--user { justify-content: flex-end; }

.jae-bubble {
  max-width: 88%;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.jae-bubble > * + * { margin-top: 0.5rem; }
.jae-bubble p { margin: 0; }
.jae-msg--bot .jae-bubble {
  background: #fff;
  border: 1px solid var(--jae-line);
  border-top-left-radius: 2px;
}
.jae-msg--user .jae-bubble {
  background: var(--jae-red);
  color: #fff;
  border-top-right-radius: 2px;
}
.jae-msg--bot a { color: var(--jae-red-dark); font-weight: 500; }
.jae-card .jae-bubble { width: 100%; max-width: 100%; }

.jae-links { margin: 0; padding: 0; list-style: none; columns: 1; }
.jae-links li { padding: 0.2rem 0; border-top: 1px solid var(--jae-line); }
.jae-links li:first-child { border-top: 0; }

.jae-note { font-size: 0.8rem; color: var(--jae-steel); }

/* typing indicator */
.jae-dot {
  display: inline-block;
  width: 7px; height: 7px; margin: 0 2px;
  background: var(--jae-slate);
  border-radius: 50%;
  animation: jae-blink 1s infinite ease-in-out;
}
.jae-dot:nth-child(2) { animation-delay: 0.15s; }
.jae-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes jae-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* ------------------------------------------------------------ choices -- */

.jae-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-left: 0.1rem;
}
.jae-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.85rem;
  background: #fff;
  color: var(--jae-red-dark);
  border: 1.5px solid var(--jae-red);
  border-radius: var(--jae-radius);
  font: 500 0.9rem/1.25 var(--font-body, "Inter", system-ui, sans-serif);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.jae-chip:hover { background: var(--jae-red-tint); }

/* -------------------------------------------------------------- forms -- */

.jae-form { display: grid; gap: 0.7rem; }
.jae-field label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--jae-steel);
}
.jae-field input,
.jae-field select {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  background: #fff;
  color: var(--jae-ink);
  border: 1px solid #b7bfc8;
  border-radius: var(--jae-radius);
  font: 400 16px/1.3 var(--font-body, "Inter", system-ui, sans-serif); /* 16px stops iOS zoom */
}
.jae-field input:focus,
.jae-field select:focus {
  outline: 2px solid var(--jae-red);
  outline-offset: 0;
  border-color: var(--jae-red);
}
.jae-field select:disabled { background: var(--jae-paper); color: var(--jae-slate); }
.jae-field [aria-invalid="true"] { border-color: var(--jae-red); background: var(--jae-red-tint); }
.jae-err { min-height: 0; margin-top: 0.2rem; font-size: 0.8rem; color: var(--jae-red-dark); font-weight: 500; }
.jae-err:empty { display: none; }

.jae-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: var(--jae-radius);
  font: 600 0.95rem/1.2 var(--font-body, "Inter", system-ui, sans-serif);
  text-decoration: none;
  cursor: pointer;
}
.jae-btn--primary { background: var(--jae-red); color: #fff !important; border: 1.5px solid var(--jae-red); }
.jae-btn--primary:hover { background: var(--jae-red-dark); border-color: var(--jae-red-dark); }
.jae-btn--ghost { background: #fff; color: var(--jae-ink); border: 1.5px solid #b7bfc8; }
.jae-btn--ghost:hover { background: var(--jae-paper); }
.jae-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.jae-recap {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.8rem;
  font-size: 0.88rem;
}
.jae-recap dt { color: var(--jae-slate); }
.jae-recap dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ---------------------------------------------------------- composer -- */

.jae-composer {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--jae-line);
}
.jae-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid #b7bfc8;
  border-radius: var(--jae-radius);
  font: 400 16px/1.3 var(--font-body, "Inter", system-ui, sans-serif);
  color: var(--jae-ink);
}
.jae-input:focus { outline: 2px solid var(--jae-red); outline-offset: 0; border-color: var(--jae-red); }
.jae-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  min-height: 44px;
  background: var(--jae-ink);
  color: #fff;
  border: 0;
  border-radius: var(--jae-radius);
  cursor: pointer;
}
.jae-send:hover { background: var(--jae-red); }

/* ------------------------------------------------------------ mobile -- */

@media (max-width: 480px) {
  .jae-panel {
    right: 8px; left: 8px; bottom: 8px;
    width: auto;
    height: calc(100dvh - 16px);
    max-height: 720px;
  }
  .jae-open .jae-launcher { display: none; }
  .jae-launcher__label { display: none; }
  .jae-launcher { padding: 0; width: 52px; height: 52px; justify-content: center; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .jae-panel { animation: none; }
  .jae-dot { animation: none; opacity: 0.6; }
}

@media print { .jae-chat { display: none !important; } }