/* ==========================================================================
   JULIA CHAT — drop-in AI chat widget
   --------------------------------------------------------------------------
   Layout, proportions and interaction model are modelled on the Korean Air
   website chatbot (floating launcher -> docked panel -> header / virtualised
   message list / quick-reply chips / auto-growing composer).

   Every class is namespaced `jlc-` and no bare element selectors are used, so
   this sheet cannot collide with a host stylesheet — and a host stylesheet
   cannot reach in and break it.

   THEMING
   Each colour and font below is `var(--host-token, built-in default)`. Drop
   this on a site that already defines --accent, --foreground, --border and
   friends and the widget inherits that palette with no configuration. On a
   bare site the defaults take over and it still looks finished.

   To override explicitly, set the --jlc-* variables after this sheet loads:

     :root { --jlc-accent: #1A5490; --jlc-radius: 4px; --jlc-width: 380px; }
   ========================================================================== */

:root {
  /* ---- Inherited from the host site when it defines these ---- */
  --jlc-accent:            var(--accent, #B8860B);
  --jlc-accent-secondary:  var(--accent-secondary, #D4A84B);
  --jlc-accent-muted:      var(--accent-muted, rgba(184, 134, 11, 0.06));
  --jlc-foreground:        var(--foreground, #1A1A1A);
  --jlc-muted-foreground:  var(--muted-foreground, #6B6B6B);
  --jlc-background:        var(--background, #FAFAF8);
  --jlc-border:            var(--border, #E8E4DF);
  --jlc-border-hover:      var(--border-hover, #D8D2C9);
  --jlc-shadow-accent:     var(--shadow-accent, 0 6px 18px rgba(184, 134, 11, 0.18));
  --jlc-font-display:      var(--font-display, Georgia, "Times New Roman", serif);
  --jlc-font-body:         var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  --jlc-font-mono:         var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);

  /* ---- The widget's own geometry and surfaces ---- */
  --jlc-width: 400px;
  --jlc-height: 640px;
  --jlc-radius: 16px;
  --jlc-surface: #FFFFFF;
  --jlc-surface-alt: #F5F3F0;
  --jlc-header: #1A1A1A;
  --jlc-bubble-agent: #F5F3F0;
  --jlc-bubble-user: var(--jlc-accent);
  --jlc-z: 90;
}

/* ============ Launcher ============ */
/* Korean Air chatbot pattern: the launcher rests as a 64px circle over the
   hero, then grows leftward into a labelled pill the moment the visitor
   starts scrolling. The right edge is pinned, so only the left cap travels —
   the button never jumps under the cursor.

   The expanded width is NOT measured in JavaScript. It comes from the 0fr/1fr
   grid track on .jlc-launcher-btn below, so the pill is sized by its own
   label whatever the font, zoom level or `launcherLabel` config turns out to
   be. An earlier version pinned a measured pixel width and left ~0.2px of
   slack, which sheared the text on any device that rendered it a hair wider. */
.jlc-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--jlc-z);
  display: flex;
  justify-content: flex-end;
}

.jlc-launcher-btn {
  /* Two columns: a fixed icon cell and a label cell that animates from 0fr
     (fully collapsed) to 1fr. In an auto-width grid container an fr track
     resolves to the item's max-content size, so the open pill is sized by the
     label itself and can never shear the text — whatever the font, zoom level
     or OS text-size setting turns out to be. */
  display: grid;
  grid-template-columns: 64px 0fr;
  align-items: center;
  width: auto;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--jlc-accent) 0%, var(--jlc-accent-secondary) 100%);
  color: #fff;
  cursor: pointer;
  overflow: hidden; /* clips the label cell while the pill is closed */
  box-shadow: var(--jlc-shadow-accent), 0 10px 28px rgba(26, 26, 26, 0.18);
  transition: grid-template-columns 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 200ms ease-out,
              box-shadow 200ms ease-out;
}
.jlc-launcher-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--jlc-shadow-accent), 0 16px 34px rgba(26, 26, 26, 0.24);
}

/* fixed 64px icon cell: the glyph stays optically centred in the circle and
   lines up with the pill's left cap once open */
.jlc-launcher-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.jlc-launcher-btn svg { width: 30px; height: 30px; }

/* The label lives inside the animating 0fr track, so it needs min-width: 0 to
   let that track actually reach zero, and its own overflow clip so the text
   is cut by the track rather than widening it. It carries no padding of its
   own: padding sits outside the content box and so would survive the collapse,
   leaving the "circle" 26px too wide. The inner span holds it instead, where
   the overflow clip can hide it. */
.jlc-launcher-label {
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.jlc-launcher-text {
  display: block;
  padding-right: 26px;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* scrolled: open the pill, then bring the wordmark up behind it */
.jlc-launcher.jlc-is-expanded .jlc-launcher-btn {
  grid-template-columns: 64px 1fr;
}
.jlc-launcher.jlc-is-expanded .jlc-launcher-label {
  opacity: 1;
  transition-delay: 150ms;
}

/* soft pulse ring to draw the eye, suppressed after first open. Lives on the
   wrapper, not the button, because the button clips its own overflow. */
.jlc-launcher::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid var(--jlc-accent);
  opacity: 0;
  pointer-events: none;
  animation: chatPulse 2.8s ease-out infinite;
}
.jlc-launcher.jlc-is-engaged::before { animation: none; }
@keyframes chatPulse {
  0%   { opacity: 0.55; transform: scale(0.9); }
  70%  { opacity: 0;    transform: scale(1.25); }
  100% { opacity: 0; }
}

.jlc-launcher[hidden] { display: none; }

/* ============ Panel ============ */
.jlc-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: calc(var(--jlc-z) + 1);
  width: var(--jlc-width);
  height: min(var(--jlc-height), calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  background: var(--jlc-surface);
  border: 1px solid var(--jlc-border);
  border-radius: var(--jlc-radius);
  box-shadow: 0 24px 60px rgba(26, 26, 26, 0.22);
  overflow: hidden;
  transform-origin: bottom right;
  animation: chatPanelIn 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes chatPanelIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.jlc-panel[hidden] { display: none; }

/* ============ Header ============ */
.jlc-header {
  flex-shrink: 0;
  background: var(--jlc-header);
  color: #fff;
  padding: 16px 14px 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.jlc-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--jlc-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--jlc-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  flex-shrink: 0;
}
.jlc-identity { flex: 1; min-width: 0; line-height: 1.3; }
.jlc-name {
  font-family: var(--jlc-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.jlc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--jlc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.jlc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jlc-muted-foreground);
  flex-shrink: 0;
}
.jlc-panel[data-state="connecting"] .jlc-status-dot { background: var(--jlc-accent-secondary); animation: chatBlink 1s ease-in-out infinite; }
.jlc-panel[data-state="ready"] .jlc-status-dot { background: #3E8E5A; }
.jlc-panel[data-state="error"] .jlc-status-dot { background: #B4453C; }
@keyframes chatBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.jlc-header-actions { display: flex; align-items: center; gap: 2px; }
.jlc-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  transition: background 150ms ease-out, color 150ms ease-out;
}
.jlc-icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.jlc-icon-btn svg { width: 18px; height: 18px; }

/* ============ Message list ============ */
.jlc-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 18px 8px;
  background: var(--jlc-background);
  scrollbar-width: thin;
  scrollbar-color: var(--jlc-border-hover) transparent;
}
.jlc-body::-webkit-scrollbar { width: 8px; }
.jlc-body::-webkit-scrollbar-thumb { background: var(--jlc-border-hover); border-radius: 4px; }

.jlc-intro {
  text-align: center;
  padding: 10px 8px 22px;
  border-bottom: 1px solid var(--jlc-border);
  margin-bottom: 18px;
}
.jlc-intro-title { font-family: var(--jlc-font-display); font-size: 1.375rem; margin: 0 0 6px; }
.jlc-intro-sub { margin: 0; font-size: 0.9375rem; color: var(--jlc-muted-foreground); line-height: 1.55; }

.jlc-msg {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  animation: chatMsgIn 220ms ease-out;
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jlc-msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jlc-accent);
  color: #fff;
  font-family: var(--jlc-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
/* Agent messages wrap the AI notice + bubble in a column so the notice sits
   above the bubble and shares its width. User messages keep the bubble as a
   direct child of .jlc-msg. */
.jlc-msg-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 78%;
  min-width: 0;
}
.jlc-msg-main .jlc-bubble { max-width: 100%; }

.jlc-ai-note {
  margin: 0 0 0 2px;
  font-family: var(--jlc-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jlc-muted-foreground);
}

.jlc-bubble {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.jlc-bubble p { margin: 0 0 8px; }
.jlc-bubble p:last-child { margin-bottom: 0; }
.jlc-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.jlc-msg--agent .jlc-bubble {
  background: var(--jlc-bubble-agent);
  border: 1px solid var(--jlc-border);
  border-top-left-radius: 4px;
  color: var(--jlc-foreground);
}
.jlc-msg--user { flex-direction: row-reverse; }
.jlc-msg--user .jlc-bubble {
  background: var(--jlc-bubble-user);
  border-top-right-radius: 4px;
  color: #fff;
}
.jlc-msg--user .jlc-msg-avatar { display: none; }

/* consecutive messages from the same side tuck together */
.jlc-msg--stacked { margin-top: -8px; }
.jlc-msg--stacked .jlc-msg-avatar { visibility: hidden; }
.jlc-msg--stacked.jlc-msg--agent .jlc-bubble { border-top-left-radius: 16px; }
.jlc-msg--stacked.jlc-msg--user .jlc-bubble { border-top-right-radius: 16px; }

.jlc-system {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--jlc-muted-foreground);
  margin: 0 0 14px;
  padding: 0 12px;
}
.jlc-system--error { color: #B4453C; }

/* typing indicator */
.jlc-typing { display: flex; align-items: center; gap: 5px; padding: 4px 2px; }
.jlc-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jlc-muted-foreground);
  animation: chatTyping 1.3s ease-in-out infinite;
}
.jlc-typing span:nth-child(2) { animation-delay: 0.18s; }
.jlc-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatTyping {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-4px); }
}

/* tool activity chip — shows the visitor that Julia is looking something up */
.jlc-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px 40px;
  padding: 5px 12px;
  border: 1px solid var(--jlc-border);
  border-radius: 999px;
  background: var(--jlc-accent-muted);
  font-family: var(--jlc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jlc-accent);
}
.jlc-tool svg { width: 12px; height: 12px; animation: chatSpin 1.1s linear infinite; }
.jlc-tool--done svg { animation: none; }
@keyframes chatSpin { to { transform: rotate(360deg); } }

/* ============ Voice bar ============ */
.jlc-voice {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--jlc-border);
  background: var(--jlc-header);
  color: #fff;
  animation: chatVoiceIn 240ms ease-out;
}
.jlc-voice[hidden] { display: none; }
@keyframes chatVoiceIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* five bars that idle flat and animate while the session is live */
.jlc-voice-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  flex-shrink: 0;
}
.jlc-voice-wave span {
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: var(--jlc-accent-secondary);
}
.jlc-voice[data-voice="listening"] .jlc-voice-wave span,
.jlc-voice[data-voice="speaking"] .jlc-voice-wave span,
.jlc-voice[data-voice="thinking"] .jlc-voice-wave span {
  animation: chatVoiceWave 1.1s ease-in-out infinite;
}
.jlc-voice-wave span:nth-child(2) { animation-delay: 0.12s; }
.jlc-voice-wave span:nth-child(3) { animation-delay: 0.24s; }
.jlc-voice-wave span:nth-child(4) { animation-delay: 0.36s; }
.jlc-voice-wave span:nth-child(5) { animation-delay: 0.48s; }
.jlc-voice[data-voice="speaking"] .jlc-voice-wave span { background: #fff; }
.jlc-voice[data-voice="muted"] .jlc-voice-wave span { background: rgba(255, 255, 255, 0.3); }
@keyframes chatVoiceWave {
  0%, 100% { height: 5px; }
  50%      { height: 22px; }
}

.jlc-voice-info { flex: 1; min-width: 0; line-height: 1.35; }
.jlc-voice-state {
  margin: 0;
  font-family: var(--jlc-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jlc-accent-secondary);
}
.jlc-voice-hint {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.jlc-voice-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.jlc-voice-btn:hover { background: rgba(255, 255, 255, 0.18); }
.jlc-voice-btn svg { width: 16px; height: 16px; }
.jlc-voice-btn[aria-pressed="true"] {
  background: #B4453C;
  border-color: #B4453C;
}
.jlc-voice-btn--end:hover { background: #B4453C; border-color: #B4453C; }

/* ============ Quick replies ============ */
.jlc-quick {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--jlc-border);
  background: var(--jlc-surface);
}
.jlc-quick[hidden] { display: none; }
.jlc-chip {
  border: 1px solid var(--jlc-border-hover);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--jlc-foreground);
  background: var(--jlc-surface);
  transition: all 150ms ease-out;
}
.jlc-chip:hover { border-color: var(--jlc-accent); color: var(--jlc-accent); background: var(--jlc-accent-muted); }
.jlc-chip:disabled { opacity: 0.45; pointer-events: none; }

/* ============ Composer ============ */
.jlc-composer {
  flex-shrink: 0;
  border-top: 1px solid var(--jlc-border);
  background: var(--jlc-surface);
  padding: 12px 14px 10px;
}
.jlc-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  border: 1px solid var(--jlc-border);
  border-radius: 22px;
  padding: 6px 6px 6px 16px;
  background: var(--jlc-background);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.jlc-composer-row:focus-within {
  border-color: var(--jlc-accent);
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.14);
}
.jlc-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  resize: none;
  font-family: var(--jlc-font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--jlc-foreground);
  max-height: 110px;
  padding: 8px 0;
}
/* The composer row already draws the focus ring, so suppress the
   global textarea:focus-visible outline from style.css. */
.jlc-input:focus,
.jlc-input:focus-visible { outline: none; }
.jlc-input::placeholder { color: rgba(107, 107, 107, 0.65); }
.jlc-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--jlc-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms ease-out, opacity 150ms ease-out;
}
.jlc-send svg { width: 17px; height: 17px; }
.jlc-send:hover { background: var(--jlc-accent-secondary); }
.jlc-send:disabled { opacity: 0.35; pointer-events: none; }

/* voice toggle, sits beside the send button */
.jlc-mic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--jlc-border-hover);
  color: var(--jlc-muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 150ms ease-out;
}
.jlc-mic svg { width: 17px; height: 17px; }
.jlc-mic:hover { border-color: var(--jlc-accent); color: var(--jlc-accent); background: var(--jlc-accent-muted); }
.jlc-mic[aria-pressed="true"] {
  background: var(--jlc-accent);
  border-color: var(--jlc-accent);
  color: #fff;
}
.jlc-mic:disabled { opacity: 0.4; pointer-events: none; }
/* the audio sink must stay in the DOM for the SDK to attach to it */
#chatAudio { display: none; }

.jlc-disclaimer {
  margin: 8px 4px 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--jlc-muted-foreground);
  text-align: center;
}

/* ============ Mobile: full-screen sheet ============ */
@media (max-width: 560px) {
  .jlc-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
  }
  /* The pill still opens on mobile — a two-word label sits comfortably
     without crowding the thumb zone — just a touch tighter. A much longer
     `launcherLabel` would be worth checking here at 360px wide. */
  .jlc-launcher { right: 16px; bottom: 16px; }
  .jlc-launcher-text { font-size: 0.9375rem; padding-right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .jlc-launcher::before { animation: none; }
  .jlc-launcher-btn { transition: none; }
  .jlc-launcher-label { transition: none; }
  .jlc-voice-wave span { animation: none !important; height: 14px; }
}