/* Landing shell — layout, tokens, chat overlay host */
:root {
  --brand: #0d9488;
  --brand-dark: #115e59;
  --page-bg: light-dark(#f8fafc, #0f172a);
  --page-fg: light-dark(#0f172a, #f1f5f9);
  --page-muted: light-dark(#64748b, #94a3b8);
  --surface: light-dark(#ffffff, #1e293b);
  --surface-border: light-dark(#e2e8f0, #334155);
  --ui-bg: light-dark(#ffffff, #1e293b);
  --ui-fg: light-dark(#3f3f46, #d4d4d8);
  --ui-fg-highlighted: light-dark(#0f172a, #f1f5f9);
  --ui-fg-dimmed: light-dark(#64748b, #94a3b8);
  --ui-elevated: light-dark(#f8fafc, #334155);
  --ui-ring: light-dark(#e2e8f0, #475569);
  --ui-active-fg: light-dark(#115e59, #5eead4);
  --text-accent: light-dark(#115e59, #5eead4);
  --ui-shadow: light-dark(
    0 4px 16px rgba(15, 23, 42, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.35)
  );
  --layout-max: 1120px;
  --header-h: 4rem;
  --bubble-inset-x: clamp(16px, 4vw, 24px);
  --bubble-inset-y: clamp(32px, 5vw, 40px);
  --bubble-launcher-size: 64px;
  --bubble-panel-gap: 12px;
  --bot-bottom-offset: calc(
    var(--bubble-inset-y) + env(safe-area-inset-bottom, 0px) +
      var(--bubble-launcher-size) + var(--bubble-panel-gap)
  );
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  color-scheme: light dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page-fg: #f1f5f9;
  --page-muted: #cbd5e1;
  --text-accent: #5eead4;
  --ui-fg: #d4d4d8;
  --ui-fg-highlighted: #f1f5f9;
  --ui-fg-dimmed: #94a3b8;
  --ui-active-fg: #5eead4;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --page-fg: #f1f5f9;
    --page-muted: #cbd5e1;
    --text-accent: #5eead4;
    --ui-fg-highlighted: #f1f5f9;
    --ui-active-fg: #5eead4;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--page-bg);
  color: var(--page-fg);
  line-height: 1.55;
}

body.jdt-legal-open { overflow: hidden; }

.jdt-wrap {
  width: min(100% - 2rem, var(--layout-max));
  margin-inline: auto;
}

.jdt-loading,
.jdt-error {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--page-muted);
}

/* Loading skeleton */
@keyframes jdt-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes jdt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

#jdt-landing-root.jdt-loaded {
  animation: jdt-fade-in 280ms ease;
}

.jdt-sk {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--page-muted) 12%, var(--page-bg)) 0%,
    color-mix(in srgb, var(--page-muted) 22%, var(--page-bg)) 45%,
    color-mix(in srgb, var(--page-muted) 12%, var(--page-bg)) 100%
  );
  background-size: 200% 100%;
  animation: jdt-shimmer 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .jdt-sk { animation: none; }
  #jdt-landing-root.jdt-loaded { animation: none; }
}

.jdt-skeleton-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: var(--header-h);
  padding: 0 1rem;
  border-bottom: 1px solid var(--surface-border);
}

.jdt-sk-logo {
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.jdt-sk-brand {
  flex: 1;
  height: 14px;
  max-width: 140px;
}

.jdt-sk-btn {
  width: 72px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
}

.jdt-skeleton-hero {
  padding: 2.5rem 1rem 2rem;
  min-height: clamp(240px, 42vh, 360px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--page-muted) 8%, var(--page-bg)),
    color-mix(in srgb, var(--page-muted) 16%, var(--page-bg))
  );
}

.jdt-sk-title {
  height: 28px;
  width: min(72%, 320px);
  border-radius: 6px;
}

.jdt-sk-line {
  height: 14px;
  width: min(55%, 240px);
  border-radius: 6px;
  opacity: 0.7;
}

.jdt-sk-line--wide { width: min(68%, 280px); }

.jdt-skeleton-body {
  padding: 2rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.jdt-sk-heading {
  height: 22px;
  width: 120px;
  margin-bottom: 0.35rem;
}

.jdt-sk-card {
  height: 72px;
  border-radius: 12px;
}

.jdt-sk-card--short { width: 88%; }

/* Typebot bubble — above landing, below legal modal */
typebot-bubble {
  position: relative;
  z-index: 1000006 !important;
}

typebot-bubble { opacity: 0; pointer-events: none; }
typebot-bubble.is-visible,
typebot-bubble.is-visible-instant {
  opacity: 1;
  pointer-events: auto;
}

typebot-bubble::part(button) {
  border-radius: 9999px !important;
  position: fixed !important;
  bottom: calc(var(--bubble-inset-y) + env(safe-area-inset-bottom, 0px)) !important;
  right: max(var(--bubble-inset-x), calc((100vw - var(--layout-max)) / 2 + var(--bubble-inset-x))) !important;
  z-index: 1000005 !important;
}

#jdt-widget-overlay {
  position: fixed;
  z-index: 1000004;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease;
}

#jdt-widget-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#jdt-widget-overlay iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Legal modal */
.jdt-legal-modal[hidden] { display: none !important; }

.jdt-legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000010;
}

.jdt-legal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.jdt-legal-panel {
  position: absolute;
  inset: auto 0 0 0;
  height: min(92vh, 900px);
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 768px) {
  .jdt-legal-panel {
    inset: 5vh auto auto 50%;
    transform: translateX(-50%);
    width: min(720px, 92vw);
    height: 85vh;
    border-radius: 16px;
  }
}

.jdt-legal-close {
  align-self: flex-end;
  margin: 0.75rem 0.75rem 0;
  border: 0;
  background: var(--page-bg);
  color: var(--page-fg);
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}

.jdt-legal-frame {
  flex: 1;
  width: 100%;
  border: 0;
}