/* Lily — chat widget styles. Hero Mortgage Group.
 * Brand tokens copied from assets/styles.css :root so the widget matches the
 * site even though it is self-contained (it must work when injected on any of
 * 144 pages without depending on page CSS load order).
 *
 * Everything is namespaced under .lily- to avoid colliding with page styles. */

.lily-root {
  --lily-navy: #1b365d;
  --lily-navy-deep: #14274a;
  --lily-burgundy: #a82029;
  --lily-burgundy-d: #8a1a22;
  --lily-brass: #b08d57;
  --lily-parchment: #f7f4ee;
  --lily-charcoal: #565756;
  --lily-ink: #1b1b1a;
  --lily-white: #fff;
  --lily-head: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --lily-body: 'Inter', system-ui, -apple-system, sans-serif;
  --lily-shadow: 0 12px 40px rgba(20, 39, 74, 0.28);
  --lily-radius: 14px;
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 2147483000; /* above almost everything, below OS chrome */
  font-family: var(--lily-body);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px; /* space between the teaser and the launcher when both show */
}

/* ── Launcher bubble ── */
.lily-launcher {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--lily-navy);
  color: var(--lily-white);
  border: 2px solid var(--lily-brass);
  border-radius: 999px;
  padding: 12px 20px 12px 16px;
  font-family: var(--lily-head);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: var(--lily-shadow);
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.18s;
}
.lily-launcher:hover { background: var(--lily-navy-deep); transform: translateY(-2px); }
.lily-launcher:focus-visible { outline: 3px solid var(--lily-brass); outline-offset: 2px; }
.lily-launcher .lily-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #57d38c; box-shadow: 0 0 0 3px rgba(87, 211, 140, 0.25);
}
.lily-root[data-open='true'] .lily-launcher { display: none; }

/* ── Mobile teaser (a nudge, not a takeover) ── */
.lily-teaser {
  display: none;
  position: relative;
  max-width: min(280px, calc(100vw - 32px));
  background: var(--lily-white);
  color: var(--lily-ink);
  border: 1px solid #e6dfce;
  border-left: 4px solid var(--lily-brass);
  border-radius: 12px;
  box-shadow: var(--lily-shadow);
  padding: 12px 38px 12px 14px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.lily-root[data-teaser='true'][data-open='false'] .lily-teaser {
  display: block;
  animation: lily-pop 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lily-teaser-x {
  position: absolute; top: 5px; right: 5px;
  width: 26px; height: 26px;
  background: transparent; border: 0; color: var(--lily-charcoal);
  font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.lily-teaser-x:hover { background: rgba(0, 0, 0, 0.06); }

/* ── Panel ── */
.lily-panel {
  display: none;
  flex-direction: column;
  width: min(400px, calc(100vw - 24px));
  height: min(620px, calc(100vh - 24px));
  background: var(--lily-parchment);
  border-radius: var(--lily-radius);
  box-shadow: var(--lily-shadow);
  overflow: hidden;
}
.lily-root[data-open='true'] .lily-panel { display: flex; animation: lily-pop 0.22s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes lily-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── Header ── */
.lily-header {
  background: var(--lily-navy);
  color: var(--lily-white);
  padding: 16px 18px;
  border-bottom: 3px solid var(--lily-burgundy);
  display: flex;
  align-items: center;
  gap: 12px;
}
.lily-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--lily-brass); color: var(--lily-navy);
  display: grid; place-items: center;
  font-family: var(--lily-head); font-weight: 700; font-size: 18px;
  flex: none;
}
.lily-title { font-family: var(--lily-head); font-weight: 700; font-size: 16px; line-height: 1.1; }
.lily-subtitle { font-size: 11.5px; opacity: 0.8; margin-top: 2px; letter-spacing: 0.3px; }
.lily-header-spacer { flex: 1; }
.lily-close {
  background: transparent; border: 0; color: var(--lily-white);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.lily-close:hover { background: rgba(255, 255, 255, 0.12); }

/* ── Message list ── */
.lily-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lily-msg { max-width: 85%; padding: 10px 13px; border-radius: 13px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.lily-msg-bot { background: var(--lily-white); color: var(--lily-ink); border: 1px solid #e6dfce; align-self: flex-start; border-bottom-left-radius: 4px; }
.lily-msg-user { background: var(--lily-navy); color: var(--lily-white); align-self: flex-end; border-bottom-right-radius: 4px; }
.lily-msg strong { font-weight: 700; }
.lily-msg a { color: var(--lily-burgundy); }
.lily-msg-user a { color: var(--lily-white); text-decoration: underline; }

/* Typing indicator */
.lily-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.lily-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lily-brass);
  animation: lily-bounce 1.2s infinite ease-in-out both;
}
.lily-typing span:nth-child(2) { animation-delay: 0.15s; }
.lily-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lily-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }

/* ── Composer ── */
.lily-composer { border-top: 1px solid #e6dfce; background: var(--lily-white); padding: 10px; display: flex; gap: 8px; align-items: flex-end; }
.lily-input {
  flex: 1; resize: none; border: 1px solid #d8cfbb; border-radius: 10px;
  padding: 10px 12px; font-family: var(--lily-body); font-size: 14.5px; line-height: 1.4;
  max-height: 120px; color: var(--lily-ink); background: var(--lily-parchment);
}
.lily-input:focus { outline: none; border-color: var(--lily-brass); background: var(--lily-white); }
.lily-send {
  flex: none; width: 42px; height: 42px; border-radius: 10px; border: 0;
  background: var(--lily-burgundy); color: var(--lily-white); font-size: 18px; cursor: pointer;
}
.lily-send:hover { background: var(--lily-burgundy-d); }
.lily-send:disabled { opacity: 0.45; cursor: default; }

/* ── Disclosure footer (persistent — Phase 5 B + K) ── */
.lily-disclosures { background: var(--lily-navy); color: rgba(255, 255, 255, 0.72); padding: 8px 12px; font-size: 10px; line-height: 1.45; text-align: center; }
.lily-disclosures strong { color: var(--lily-brass); font-weight: 600; }

/* ── Mobile: bottom-sheet panel instead of a near-full-screen box ── */
@media (max-width: 640px) {
  .lily-root[data-open='true'] .lily-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 90vh;      /* leaves ~10% of the page visible above the sheet */
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .lily-launcher { transition: none; }
  .lily-typing span { animation: none; opacity: 0.7; }
  .lily-root[data-open='true'] .lily-panel { animation: none; }
}