/* ==========================================================================
   CV CHATBOT WIDGET — styles
   Palette + "misty fog" (frosted glass) + Figtree font taken 1:1 from
   dominiclivingston.com's .dl-toggle:
     slate #23231E · elevated #383832 · limestone #F9F8F4 · border #4a4a44
     fog(light) rgba(35,35,30,.08) · fog(dark) rgba(249,248,244,.12)
     backdrop-filter: blur() · font-family: Figtree
   Launcher is a centred "Ask me anything about Dom" search-style bar.
   Everything is scoped under #dl-cv-widget to avoid clashing with Squarespace.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap");

#dl-cv-widget {
  /* Dark is the widget's native look (matches the toggle in dark mode) */
  --dl-bg: #23231e;
  --dl-elevated: #383832;
  --dl-text: #f9f8f4;
  --dl-border: #4a4a44;
  --dl-muted: rgba(249, 248, 244, 0.6);
  --dl-user-bubble: #4a4a44;

  /* Misty-fog (frosted glass) tokens — dark variant */
  --dl-fog-bg: rgba(249, 248, 244, 0.12);
  --dl-fog-border: rgba(249, 248, 244, 0.35);
  --dl-fog-panel: rgba(35, 35, 30, 0.72);
  --dl-fog-shadow: 0 8px 32px rgba(0, 0, 0, 0.38);
  --dl-blur: blur(16px) saturate(1.25);

  --dl-radius: 18px;
  --dl-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;

  position: fixed;
  z-index: 2147483000;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--dl-font);
}

/* Light-mode adaptation — host page in light mode (body.dl-light) */
#dl-cv-widget.dl-light-host {
  --dl-bg: #ffffff;
  --dl-elevated: #f9f8f4;
  --dl-text: #23231e;
  --dl-border: #e0e0e0;
  --dl-muted: rgba(35, 35, 30, 0.55);
  --dl-user-bubble: #23231e;

  --dl-fog-bg: rgba(35, 35, 30, 0.06);
  --dl-fog-border: rgba(35, 35, 30, 0.2);
  --dl-fog-panel: rgba(255, 255, 255, 0.78);
  --dl-fog-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}

/* ------------------------------------------------------------------ */
/* Launcher — a centred, search-field-style "Ask me anything" bar      */
/* ------------------------------------------------------------------ */
#dl-cv-launcher {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  max-width: min(440px, calc(100vw - 32px));
  padding: 15px 16px 15px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  color: var(--dl-text);
  background: var(--dl-fog-bg);
  border: 1px solid var(--dl-fog-border);
  box-shadow: var(--dl-fog-shadow);
  -webkit-backdrop-filter: var(--dl-blur);
  backdrop-filter: var(--dl-blur);
  transition: transform 0.25s ease, box-shadow 0.2s ease, background 0.2s ease,
    opacity 0.2s ease;
}
#dl-cv-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.42);
}
#dl-cv-launcher:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--dl-fog-border), var(--dl-fog-shadow);
}
.dl-launcher-spark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  opacity: 0.85;
}
.dl-launcher-label {
  flex: 0 1 auto;
  text-align: left;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dl-launcher-label--short {
  display: none;
}
.dl-launcher-cta {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dl-text);
  color: var(--dl-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-launcher-cta svg {
  width: 16px;
  height: 16px;
}

/* Launcher fades + settles as the panel opens (site-consistent 0.25s ease) */
#dl-cv-widget.dl-open #dl-cv-launcher {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Chat panel — frosted misty-fog surface                              */
/* ------------------------------------------------------------------ */
#dl-cv-panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) translateY(10px) scale(0.96);
  width: 400px;
  max-width: calc(100vw - 24px);
  height: 600px;
  max-height: calc(100vh - 120px);
  background: var(--dl-fog-panel);
  border: 1px solid var(--dl-fog-border);
  border-radius: var(--dl-radius);
  box-shadow: var(--dl-fog-shadow);
  -webkit-backdrop-filter: var(--dl-blur);
  backdrop-filter: var(--dl-blur);
  /* Always laid out; visibility (not display) drives show/hide so both the
     open and close animations run. Matches the site's 0.25s ease timing. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease,
    visibility 0s linear 0.25s;
}
#dl-cv-widget.dl-open #dl-cv-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

/* Header --------------------------------------------------------------- */
#dl-cv-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--dl-fog-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#dl-cv-header .dl-title {
  color: var(--dl-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
#dl-cv-header .dl-sub {
  color: var(--dl-muted);
  font-size: 12px;
  margin-top: 2px;
}
#dl-cv-close {
  background: none;
  border: none;
  color: var(--dl-muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 4px;
}
#dl-cv-close:hover {
  color: var(--dl-text);
}

/* Messages ------------------------------------------------------------- */
#dl-cv-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dl-msg {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.dl-msg.dl-bot {
  align-self: flex-start;
  background: var(--dl-elevated);
  color: var(--dl-text);
  border-bottom-left-radius: 4px;
}
.dl-msg.dl-user {
  align-self: flex-end;
  background: var(--dl-user-bubble);
  color: var(--dl-text);
  border-bottom-right-radius: 4px;
}
#dl-cv-widget.dl-light-host .dl-msg.dl-user {
  color: #f9f8f4;
}
.dl-msg a {
  color: var(--dl-text);
  text-decoration: underline;
}

/* Typing indicator ----------------------------------------------------- */
.dl-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.dl-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dl-muted);
  animation: dl-blink 1.2s infinite both;
}
.dl-typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.dl-typing span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes dl-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Suggested starter chips --------------------------------------------- */
#dl-cv-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 8px;
}
.dl-chip {
  background: var(--dl-fog-bg);
  border: 1px solid var(--dl-fog-border);
  color: var(--dl-text);
  font-family: inherit;
  font-size: 12.5px;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dl-chip:hover {
  background: var(--dl-elevated);
}

/* Composer — the in-panel search/text field, also frosted ------------- */
#dl-cv-form {
  border-top: 1px solid var(--dl-fog-border);
  padding: 12px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
#dl-cv-input {
  flex: 1;
  resize: none;
  background: var(--dl-fog-bg);
  border: 1px solid var(--dl-fog-border);
  border-radius: 14px;
  color: var(--dl-text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  max-height: 120px;
  line-height: 1.4;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#dl-cv-input::placeholder {
  color: var(--dl-muted);
}
#dl-cv-input:focus {
  outline: none;
  border-color: var(--dl-text);
}
#dl-cv-send {
  background: var(--dl-text);
  color: var(--dl-bg);
  border: none;
  border-radius: 12px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
#dl-cv-send:disabled {
  opacity: 0.4;
  cursor: default;
}
#dl-cv-send svg {
  width: 18px;
  height: 18px;
}

/* Footer link ---------------------------------------------------------- */
#dl-cv-footer {
  text-align: center;
  padding: 0 12px 10px;
  font-size: 11px;
  color: var(--dl-muted);
}
#dl-cv-footer a {
  color: var(--dl-muted);
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

/* Tablet / small desktop */
@media (max-width: 640px) {
  #dl-cv-launcher {
    min-width: 0;
    width: auto;
    max-width: calc(100vw - 28px);
    padding: 13px 14px 13px 18px;
    gap: 10px;
  }
  .dl-launcher-label {
    font-size: 14.5px;
  }
  /* swap to the shorter label on mobile */
  .dl-launcher-label--full {
    display: none;
  }
  .dl-launcher-label--short {
    display: inline;
  }

  #dl-cv-widget {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  #dl-cv-panel {
    width: calc(100vw - 20px);
    height: min(78vh, 640px);
    max-height: calc(100vh - 90px);
  }
}

/* Very small phones — trim the launcher further */
@media (max-width: 380px) {
  .dl-launcher-cta {
    width: 30px;
    height: 30px;
  }
  #dl-cv-launcher {
    padding: 12px 12px 12px 16px;
  }
}

/* ------------------------------------------------------------------ */
/* Site-proofing                                                       */
/* Squarespace dark mode forces `body.dl-dark span,a,... { color:#f9f8f4 */
/* !important }`, which recolours the send-icon stroke and hides it on   */
/* the light CTA circle. Pin the icon + button colours with id-scoped    */
/* !important so they outrank the host theme in both modes.              */
/* The widget container is a direct child of <body>, so Squarespace's
   `html body.dl-dark > div { background:#23231e !important }` paints a square
   box behind the rounded launcher. Keep the container itself transparent. */
#dl-cv-widget {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#dl-cv-widget .dl-launcher-cta,
#dl-cv-widget #dl-cv-send {
  color: var(--dl-bg) !important;
  background: var(--dl-text) !important;
}
#dl-cv-widget .dl-launcher-cta svg,
#dl-cv-widget #dl-cv-send svg {
  stroke: var(--dl-bg) !important;
  fill: none !important;
}

/* Respect reduced-motion preferences — keep show/hide, drop the animation */
@media (prefers-reduced-motion: reduce) {
  #dl-cv-panel,
  #dl-cv-widget.dl-open #dl-cv-panel,
  #dl-cv-launcher,
  #dl-cv-widget.dl-open #dl-cv-launcher {
    transition-duration: 0.01ms !important;
  }
}

/* Graceful fallback when backdrop-filter is unsupported: use solid-ish bg */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #dl-cv-panel {
    background: var(--dl-bg);
  }
  #dl-cv-launcher {
    background: var(--dl-elevated);
  }
}