/* Floating AI chat widget — paired with web/static/js/chat.js
   Brand palette: emerald (navy-700 = #047857) + gold (#C9A227). */

#rl-chat-root { position: fixed; inset: auto 0 0 auto; z-index: 60; pointer-events: none; }
#rl-chat-root > * { pointer-events: auto; }

/* --- Launcher button (collapsed state) ---
   Restyled 2026-05-27 to mirror the WhatsApp bubble: same pill shape,
   same padding, same shadow language. Brand-emerald instead of green-
   green so the two bubbles are visually distinguishable while sharing
   one visual system. Sits bottom-right; WhatsApp owns bottom-left. */
.rl-chat-launcher {
  position: fixed; right: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px 12px 14px;
  background: #047857;
  color: #fff;
  border-radius: 999px;
  overflow: visible;
  font-size: 14px; font-weight: 700; line-height: 1;
  letter-spacing: .01em;
  box-shadow:
    0 10px 25px rgba(4, 120, 87, .40),
    0 4px 10px rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .25s ease;
}
.rl-chat-launcher-ai {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px;
  padding: 0 6px;
  background: #064e3b;
  color: #C9A227;
  font-size: 12px; font-weight: 900; letter-spacing: .06em;
  border-radius: 999px;
  flex-shrink: 0;
}
.rl-chat-launcher:hover,
.rl-chat-launcher:focus-visible {
  background: #065f46;
  transform: translateY(-2px);
  outline: none;
  box-shadow:
    0 14px 30px rgba(4, 120, 87, .50),
    0 6px 14px rgba(0, 0, 0, .15);
}
.rl-chat-launcher:active { transform: translateY(-1px); }
.rl-chat-launcher.is-hidden { display: none; }
.rl-chat-launcher-label { white-space: nowrap; }

/* Cookie banner lives bottom-right too. While it's open we hide the AI
   launcher entirely so the user can read + dismiss the banner without
   the pill covering the buttons. The launcher reappears the moment
   the banner is dismissed (body class is toggled by base.html). */
body.rl-cookie-banner-open .rl-chat-launcher { display: none; }

/* On phones the label takes too much space — pill stays compact with only
   the "AI" badge visible. The badge IS the icon — no separate corner chip. */
@media (max-width: 640px) {
  .rl-chat-launcher { padding: 10px 14px; }
  .rl-chat-launcher-label { display: none; }
  .rl-chat-launcher-ai { min-width: 32px; height: 26px; font-size: 14px; }
}

/* Gentle attention bounce — subtle enough not to be annoying. */
@keyframes rl-chat-bounce {
  0%, 86%, 100% { transform: translateY(0); }
  90%           { transform: translateY(-7px); }
  94%           { transform: translateY(-3px); }
}

/* No corner badge — the "AI" pill INSIDE the launcher is the only icon. */

/* Pulse ring + bounce intentionally removed 2026-05-27 — WhatsApp bubble
   has no animation, so the AI bubble matches for a single calm system. */
.rl-chat-launcher.rl-pulse::after { display: none; }

/* Accessibility: respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .rl-chat-launcher,
  .rl-chat-launcher.rl-pulse::after { animation: none !important; }
}

/* --- Panel (expanded state) --- */
.rl-chat-panel {
  position: fixed; right: 20px; bottom: 20px;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 80px));
  background: #fff; color: #0f172a;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.32), 0 4px 12px rgba(15,23,42,.12);
  display: none; flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(.98); opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.rl-chat-panel.is-open {
  display: flex; transform: translateY(0) scale(1); opacity: 1;
}

@media (max-width: 480px) {
  .rl-chat-panel {
    right: 0; bottom: 0; width: 100vw;
    height: 80vh; border-radius: 18px 18px 0 0;
  }
}

.rl-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  color: #fff;
}
.rl-chat-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px;
}
.rl-chat-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #C9A227;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
  animation: rl-chat-dot 1.6s ease-in-out infinite;
}
@keyframes rl-chat-dot {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}
.rl-chat-close {
  background: rgba(255,255,255,.12); color: #fff;
  border: 0; width: 30px; height: 30px;
  border-radius: 999px; cursor: pointer;
  font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  transition: background .15s ease;
}
.rl-chat-close:hover { background: rgba(255,255,255,.22); }

.rl-chat-body {
  flex: 1; overflow-y: auto;
  padding: 14px;
  background: #fdfaf3;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}

.rl-chat-msg {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px; line-height: 1.45;
  word-wrap: break-word; overflow-wrap: anywhere;
  animation: rl-chat-pop .18s ease-out;
}
@keyframes rl-chat-pop {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rl-chat-msg--user {
  align-self: flex-end;
  background: #047857; color: #fff;
  border-bottom-right-radius: 4px;
}
.rl-chat-msg--assistant {
  align-self: flex-start;
  background: #fff; color: #0f172a;
  border: 1px solid #f3ead0;
  border-bottom-left-radius: 4px;
}
.rl-chat-msg-who {
  font-size: 11px; font-weight: 700;
  opacity: .65; margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .03em;
}
.rl-chat-msg-text { white-space: pre-wrap; }

.rl-chat-form {
  display: flex; gap: 6px;
  padding: 10px; border-top: 1px solid #e2e8f0;
  background: #fff;
}
.rl-chat-input {
  flex: 1;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rl-chat-input:focus {
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4,120,87,.18);
}
.rl-chat-send {
  width: 40px; height: 40px;
  background: #047857; color: #fff;
  border: 0; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease, transform .15s ease;
}
.rl-chat-send:hover { background: #065f46; }
.rl-chat-send:active { transform: scale(.94); }

/* --- Smart-search shimmer (when /api/parse is in flight) --- */
.rl-smart-busy {
  position: relative; overflow: hidden;
}
.rl-smart-busy::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(201,162,39,.22) 50%, transparent 100%);
  animation: rl-smart-shimmer 1.1s linear infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes rl-smart-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}