/* =====================================================
   Lucy chat widget (2026-07-07 rebuild copy)
   Embedded launcher + floating panel for lucylabs.ai
   Derived from Marketing/Website/live/chat-widget.css.

   Theming contract:
   - The --lc-* custom properties are the widget's ONLY
     theming API. No lc- selector references site classes;
     no site selector reaches into lc- internals.
   - Every --lc-* value is a fallback chain:
     var(--site-token, literal). On rebuild pages,
     site-tokens.css loads FIRST and the widget inherits
     the site look. Anywhere the tokens are absent (demo
     UI, standalone embeds, previews) the literals render
     the same look because each literal equals the
     site-tokens.css value it mirrors.
   - Defined on the widget's own top-level classes, not on
     :root: site-tokens.css owns the single production
     :root block (VISUAL_SYSTEM rule). Custom properties
     inherit, so every lc- element still resolves them.
   ===================================================== */

.lc-panel,
.lc-launcher {
  --lc-indigo: var(--blue, #3559F2);
  --lc-indigo-deep: var(--blue-deep, #2340C7);
  --lc-paper: var(--bg-cream, #F6F5F1);
  --lc-paper-soft: var(--bg, #FFFFFF);
  --lc-ivory: var(--bg, #FFFFFF);
  --lc-ink: var(--ink, #0B0F2A);
  --lc-ink-70: var(--ink-muted, #54576A);
  --lc-ink-50: var(--ink-soft, #797B8A);
  --lc-ink-15: var(--line, #E2E2E5);
  --lc-bubble-lucy: var(--blue-soft, #E8EDFF);
  --lc-bubble-user: var(--blue, #3559F2);
  --lc-ok: var(--ok, #1F9D6C);
  --lc-danger: var(--danger, #E24C3B);
  --lc-danger-deep: var(--danger-deep, #B43A2C);
  --lc-radius: var(--r-md, 16px);
  --lc-radius-panel: var(--r-lg, 24px);
  --lc-radius-pill: var(--r-pill, 999px);
  --lc-shadow: var(--shadow-modal, 0 24px 60px -20px rgba(11, 15, 42, 0.35));
  --lc-ease: var(--ease, ease);
  --lc-dur-hover: var(--dur-hover, 150ms);
  --lc-dur-ui: var(--dur-ui, 220ms);
  --lc-sans: var(--font-sans, 'Quicksand', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif);
}

.lc-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border: 0;
  border-radius: var(--lc-radius-pill);
  background: var(--lc-ink);
  color: var(--lc-ivory);
  font: 500 15px/1 var(--lc-sans);
  cursor: pointer;
  box-shadow: var(--lc-shadow);
  transition: transform var(--lc-dur-hover) var(--lc-ease), background var(--lc-dur-hover) var(--lc-ease);
}

.lc-launcher:hover {
  transform: translateY(-2px);
  background: #1C2247;
}

.lc-launcher img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lc-paper-soft);
  object-fit: cover;
}

.lc-launcher.is-hidden {
  display: none;
}

.lc-launcher.is-panel-open {
  padding: 8px;
  background: var(--lc-ivory);
  color: var(--lc-ink);
  border: 1px solid rgba(11, 15, 42, 0.1);
}

.lc-launcher.is-panel-open .lc-launcher-label {
  display: none;
}

.lc-panel {
  font-family: var(--lc-sans);
  color: var(--lc-ink);
  background: var(--lc-paper-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lc-panel.is-embedded {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  width: min(380px, calc(100vw - 44px));
  height: min(620px, calc(100vh - 44px));
  border-radius: var(--lc-radius-panel);
  box-shadow: var(--lc-shadow);
  border: 1px solid rgba(11, 15, 42, 0.08);
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--lc-dur-ui) var(--lc-ease), opacity var(--lc-dur-ui) var(--lc-ease);
}

.lc-panel.is-embedded.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.lc-panel.is-fullscreen.is-scroll-collapsed:not(.is-open) {
  display: none;
}

.lc-panel.is-fullscreen.is-docked {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  width: min(420px, calc(100vw - 44px));
  height: min(650px, calc(100vh - 44px));
  border-radius: var(--lc-radius-panel);
  box-shadow: var(--lc-shadow);
  border: 1px solid rgba(11, 15, 42, 0.08);
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--lc-dur-ui) var(--lc-ease), opacity var(--lc-dur-ui) var(--lc-ease);
}

.lc-panel.is-fullscreen.is-docked.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.lc-panel.is-fullscreen.is-docked .lc-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
}

.lc-panel.is-fullscreen:not(.is-docked) .lc-close {
  display: none;
}

.lc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--lc-ivory);
  border-bottom: 1px solid var(--lc-ink-15);
}

.lc-head img.lc-head-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--lc-paper);
  object-fit: cover;
  flex-shrink: 0;
}

.lc-head .lc-head-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lc-head .lc-head-name {
  font-weight: 600;
  font-size: 15px;
}

.lc-head .lc-head-status {
  color: var(--lc-ink-50);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 10px;
}

.lc-head .lc-head-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lc-ok);
  box-shadow: 0 0 0 3px rgba(31, 157, 108, 0.18);
}

.lc-head button {
  border: 0;
  background: transparent;
  color: var(--lc-ink-50);
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}

.lc-head button:hover {
  color: var(--lc-ink);
  background: var(--lc-ink-15);
}

.lc-voice-toggle[aria-pressed="true"] {
  color: var(--lc-indigo);
}

.lc-transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(circle at 10% 0%, rgba(53, 89, 242, 0.06), transparent 40%),
    var(--lc-paper-soft);
  scroll-behavior: smooth;
}

.lc-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 100%;
}

.lc-row.lc-row-lucy {
  justify-content: flex-start;
}

.lc-row.lc-row-user {
  justify-content: flex-end;
}

.lc-row .lc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lc-paper);
  flex-shrink: 0;
  object-fit: cover;
}

.lc-row.lc-row-user .lc-avatar {
  display: none;
}

.lc-row.lc-row-stacked .lc-avatar {
  visibility: hidden;
}

.lc-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: var(--lc-radius);
  line-height: 1.42;
  font-size: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.lc-row-lucy .lc-bubble {
  background: var(--lc-bubble-lucy);
  color: var(--lc-ink);
  border-bottom-left-radius: 6px;
}

.lc-cta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.lc-cta-list a,
.lc-cta-list button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: var(--lc-radius-pill);
  background: var(--lc-ivory);
  color: var(--lc-indigo-deep);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(53, 89, 242, 0.22);
  cursor: pointer;
}

.lc-cta-list a:hover,
.lc-cta-list button:hover {
  border-color: rgba(53, 89, 242, 0.5);
}

.lc-row-user .lc-bubble {
  background: var(--lc-bubble-user);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.lc-typing .lc-bubble {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
}

.lc-typing .lc-bubble span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lc-ink-50);
  animation: lc-blink 1.2s infinite ease-in-out;
}

.lc-typing .lc-bubble span:nth-child(2) {
  animation-delay: 0.2s;
}

.lc-typing .lc-bubble span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes lc-blink {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.lc-intro {
  align-self: center;
  max-width: 320px;
  text-align: center;
  margin: 8px 0 4px;
  color: var(--lc-ink-50);
  font-size: 13px;
  line-height: 1.4;
}

.lc-intro strong {
  color: var(--lc-ink);
  font-weight: 600;
}

.lc-composer {
  padding: 10px 10px 12px;
  border-top: 1px solid var(--lc-ink-15);
  background: var(--lc-ivory);
}

.lc-email-toggle {
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(53, 89, 242, 0.22);
  background: transparent;
  color: var(--lc-indigo-deep);
  border-radius: var(--lc-radius-pill);
  min-height: 34px;
  font: 600 13px/1 var(--lc-sans);
  cursor: pointer;
}

.lc-email-toggle:hover {
  border-color: rgba(53, 89, 242, 0.5);
  background: rgba(53, 89, 242, 0.06);
}

.lc-email-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(53, 89, 242, 0.18);
  border-radius: var(--lc-radius);
  background: rgba(246, 245, 241, 0.68);
}

.lc-email-panel[hidden],
.lc-email-toggle[hidden] {
  display: none;
}

.lc-email-panel label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lc-ink-70);
}

.lc-email-panel input {
  width: 100%;
  border: 1px solid var(--lc-ink-15);
  border-radius: var(--lc-radius-pill);
  padding: 10px 12px;
  background: var(--lc-ivory);
  color: var(--lc-ink);
  font: 400 14px/1.2 var(--lc-sans);
  outline: 0;
}

.lc-email-panel input:focus {
  border-color: var(--lc-indigo);
  box-shadow: 0 0 0 3px rgba(53, 89, 242, 0.15);
}

.lc-email-actions {
  display: flex;
  gap: 8px;
}

.lc-email-actions button {
  border: 0;
  border-radius: var(--lc-radius-pill);
  min-height: 34px;
  padding: 0 12px;
  font: 600 13px/1 var(--lc-sans);
  cursor: pointer;
}

.lc-email-submit {
  background: var(--lc-indigo);
  color: #fff;
}

.lc-email-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lc-email-cancel {
  background: var(--lc-paper);
  color: var(--lc-ink-70);
}

.lc-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--lc-paper);
  border: 1px solid var(--lc-ink-15);
  border-radius: var(--lc-radius-panel);
  padding: 6px 8px;
  transition: border-color var(--lc-dur-hover) var(--lc-ease), box-shadow var(--lc-dur-hover) var(--lc-ease);
}

.lc-composer-row:focus-within {
  border-color: var(--lc-indigo);
  box-shadow: 0 0 0 3px rgba(53, 89, 242, 0.15);
}

.lc-composer textarea {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  resize: none;
  color: var(--lc-ink);
  font: 400 15px/1.4 var(--lc-sans);
  padding: 8px 6px;
  max-height: 140px;
  min-height: 20px;
  outline: 0;
}

.lc-composer textarea::placeholder {
  color: var(--lc-ink-50);
}

.lc-icon-btn {
  border: 0;
  background: transparent;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--lc-ink-70);
  transition: background var(--lc-dur-hover) var(--lc-ease), color var(--lc-dur-hover) var(--lc-ease), transform 0.08s var(--lc-ease);
}

.lc-icon-btn:hover:not(:disabled) {
  background: var(--lc-ink-15);
  color: var(--lc-ink);
}

.lc-icon-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.lc-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lc-icon-btn svg {
  width: 20px;
  height: 20px;
}

.lc-mic-btn.is-recording {
  background: var(--lc-danger);
  color: #fff;
  animation: lc-pulse 1.2s infinite;
}

.lc-mic-btn.is-recording:hover {
  background: var(--lc-danger-deep);
  color: #fff;
}

@keyframes lc-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(226, 76, 59, 0.5);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(226, 76, 59, 0);
  }
}

.lc-send-btn {
  background: var(--lc-indigo);
  color: #fff;
}

.lc-send-btn:hover:not(:disabled) {
  background: var(--lc-indigo-deep);
  color: #fff;
}

.lc-send-btn:disabled {
  background: var(--lc-ink-15);
  color: var(--lc-ink-50);
}

.lc-hint {
  color: var(--lc-ink-50);
  font-size: 11px;
  padding: 4px 8px 0;
  text-align: center;
}

.lc-policy-notice {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px 2px;
  margin-top: 4px;
  color: var(--lc-ink-50);
  font-size: 10.5px;
  line-height: 1.4;
  text-align: center;
}

.lc-policy-line {
  margin: 0;
}

.lc-policy-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lc-policy-link:hover {
  color: var(--lc-indigo);
}

/* Retired single-line disclaimer styling, preserved as a no-op for any cached HTML. */
.lc-ai-disclaimer { display: none; }

.lc-error {
  color: var(--lc-danger-deep);
  font-size: 12px;
  padding: 4px 10px 0;
  text-align: center;
}

.lc-turnstile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 680px) {
  .lc-panel.is-embedded,
  .lc-panel.is-fullscreen.is-docked {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    height: min(78vh, 620px);
  }

  .lc-launcher {
    right: 12px;
    bottom: 12px;
    padding-right: 14px;
  }

  .lc-launcher .lc-launcher-label {
    display: none;
  }

  .lc-bubble {
    max-width: 84%;
  }
}

/* Reduced motion: scoped kill switch so the widget honors the
   preference even standalone, without site-tokens.css present.
   Mirrors the site-wide VISUAL_SYSTEM reduced-motion rule. */
@media (prefers-reduced-motion: reduce) {
  .lc-launcher,
  .lc-panel,
  .lc-panel *,
  .lc-panel *::before,
  .lc-panel *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .lc-transcript {
    scroll-behavior: auto !important;
  }
}