/* NAMASE conversational assistant
   The moving portrait is the only expressive layer; the interface stays quiet. */

.lead-assistant {
  --assistant-bg: #0d0d0c;
  --assistant-paper: #f4f2ed;
  --assistant-muted: rgba(244, 242, 237, 0.62);
  --assistant-line: rgba(255, 255, 255, 0.13);
  z-index: 1200;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
}

/* Launcher ---------------------------------------------------------------- */

.lead-assistant-launch {
  position: relative;
  display: grid;
  width: 250px;
  min-width: 0;
  min-height: 64px;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;
  overflow: hidden;
  padding: 7px 8px 7px 22px;
  border: 1px solid rgba(16, 17, 21, 0.16);
  border-radius: 32px;
  background: rgba(246, 244, 239, 0.92);
  box-shadow:
    0 24px 72px rgba(10, 12, 18, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.86);
  color: #101116;
  font-size: 16px;
  font-weight: 610;
  letter-spacing: -0.025em;
  line-height: 1;
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
  backdrop-filter: blur(18px) saturate(1.14);
  isolation: isolate;
  transition:
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 300ms ease,
    opacity 220ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-assistant-launch::before {
  position: absolute;
  z-index: -1;
  top: 7px;
  right: 7px;
  bottom: 7px;
  width: 48px;
  border-radius: 999px;
  background: #101116;
  box-shadow: 0 8px 22px rgba(7, 8, 11, 0.2);
  content: "";
  pointer-events: none;
  transition:
    width 480ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 220ms ease,
    box-shadow 360ms ease;
}

.lead-assistant-launch > span:first-child {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  transition:
    color 220ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.lead-assistant-launch-action {
  position: relative;
  z-index: 1;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--assistant-paper);
  transition:
    color 220ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-assistant-launch-action .icon {
  width: 17px;
  height: 17px;
}

/* Panel ------------------------------------------------------------------- */

.lead-assistant-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(480px, calc(100vw - 44px));
  height: min(790px, calc(100dvh - 44px));
  min-height: 560px;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(16, 17, 21, 0.16);
  border-radius: 32px;
  background-image: none;
  background-color: rgba(246, 244, 239, 0.96);
  box-shadow:
    0 24px 72px rgba(10, 12, 18, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.86);
  color: var(--assistant-paper);
  opacity: 1;
  clip-path: inset(calc(100% - 64px) 0 0 calc(100% - 250px) round 32px);
  transform: translateZ(0);
  transform-origin: 100% 100%;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition:
    clip-path 760ms cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 760ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 420ms ease,
    background-color 560ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 560ms ease;
  will-change: clip-path;
}

.lead-assistant.is-open .lead-assistant-panel {
  border-color: var(--assistant-line);
  border-radius: 30px;
  background-color: var(--assistant-bg);
  box-shadow:
    0 38px 120px rgba(0, 0, 0, 0.52),
    inset 0 1px rgba(255, 255, 255, 0.055);
  clip-path: inset(0 round 30px);
}

.lead-assistant.is-open .lead-assistant-launch {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 10px, 0) scale(0.94);
}

.lead-assistant.is-closing .lead-assistant-launch {
  opacity: 1;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1);
}

.lead-assistant-morph-label {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: 0;
  display: grid;
  width: 250px;
  height: 64px;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;
  padding: 7px 8px 7px 22px;
  color: #101116;
  font-size: 16px;
  font-weight: 610;
  letter-spacing: -0.025em;
  line-height: 1;
  opacity: 1;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.lead-assistant-morph-label > span:first-child {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-assistant-morph-action {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: #101116;
  color: var(--assistant-paper);
}

.lead-assistant-morph-action .icon {
  width: 17px;
  height: 17px;
}

.lead-assistant.is-open .lead-assistant-morph-label {
  opacity: 0;
}

.lead-assistant.is-closing .lead-assistant-morph-label {
  opacity: 1;
  transition-delay: 360ms;
}

.lead-assistant.is-closing .lead-assistant-conversation {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 170ms ease,
    transform 240ms cubic-bezier(0.4, 0, 1, 1);
}

.lead-assistant.is-open .lead-assistant-panel-head {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 170ms;
}

.lead-assistant.is-open .lead-assistant-visual video {
  opacity: 1;
  transform: scale(1.01);
  transition-delay: 110ms;
}

.lead-assistant.is-open .lead-assistant-intro {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 280ms;
}

.lead-assistant.is-open .lead-assistant-suggestions {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 360ms;
}

.lead-assistant.is-open .lead-assistant-composer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 420ms;
}

.lead-assistant-panel-head {
  position: absolute;
  z-index: 7;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: var(--assistant-paper);
  opacity: 0;
  transform: translateY(10px);
  transition:
    background-color 280ms ease,
    border-color 280ms ease,
    opacity 260ms ease,
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-assistant-back,
.lead-assistant-close {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  cursor: pointer;
  background: rgba(18, 18, 18, 0.68);
  color: var(--assistant-paper);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    opacity 220ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 220ms ease;
}

.lead-assistant-back {
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  visibility: hidden;
}

.lead-assistant-back .icon {
  width: 17px;
  height: 17px;
  transform: rotate(180deg);
}

.lead-assistant-close .icon {
  width: 16px;
  height: 16px;
}

/* Moving host ------------------------------------------------------------- */

.lead-assistant-visual {
  position: relative;
  min-height: 330px;
  flex: 1 1 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 26%, rgba(78, 91, 121, 0.24), transparent 46%),
    linear-gradient(180deg, #151820 0%, #090a0d 100%);
  opacity: 1;
  transform: translateY(0);
  transition:
    flex-basis 620ms cubic-bezier(0.16, 1, 0.3, 1),
    min-height 620ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 360ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-assistant-visual::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 7, 7, 0.06) 14%, transparent 36%),
    linear-gradient(180deg, transparent 43%, rgba(8, 8, 8, 0.28) 66%, var(--assistant-bg) 100%),
    radial-gradient(circle at 50% 35%, transparent 25%, rgba(4, 4, 4, 0.18) 100%);
  content: "";
  pointer-events: none;
}

.lead-assistant-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  filter: contrast(1.02) saturate(0.9);
  transform: scale(1.035);
  transition:
    opacity 420ms ease,
    transform 920ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-assistant-intro {
  position: absolute;
  z-index: 3;
  right: 28px;
  bottom: 24px;
  left: 28px;
  display: grid;
  gap: 8px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 420ms ease,
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The heading wraps to two lines and the second is short, so the disclosure sits in that
   free space to its right. Narrow panels have no such gap and get it above the title
   instead — see the media query further down. */
.lead-assistant-intro-head {
  position: relative;
}

.lead-assistant-intro h2 {
  max-width: 390px;
  font-size: clamp(32px, 6vw, 37px);
  font-weight: 530;
  letter-spacing: -0.055em;
  line-height: 1.02;
  text-wrap: balance;
}

/* Art. 50.4 disclosure on the generated avatar itself. Discreet, but never below 11px
   and never faint enough to stop being legible. Two classes so it beats the
   `.lead-assistant-intro p` rule below, which would otherwise set it to 18px. */
.lead-assistant-intro .lead-assistant-avatar-note {
  position: absolute;
  right: 0;
  bottom: 4px;
  max-width: 132px;
  color: rgba(244, 242, 237, 0.72);
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  font-weight: 450;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-align: right;
  text-transform: uppercase;
}

/* No usable gap beside the heading on a narrow panel: it becomes a kicker above the
   title, where it cannot collide with anything. */
@media (max-width: 560px) {
  .lead-assistant-intro-head {
    display: grid;
    gap: 9px;
  }

  .lead-assistant-intro-head h2 {
    order: 2;
  }

  .lead-assistant-intro .lead-assistant-avatar-note {
    position: static;
    order: 1;
    max-width: none;
    text-align: left;
  }
}

.lead-assistant-intro p {
  color: rgba(244, 242, 237, 0.86);
  font-size: 18px;
  font-weight: 450;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

/* Conversation ------------------------------------------------------------ */

.lead-assistant-conversation {
  display: flex;
  min-height: 0;
  flex: 0 0 auto;
  flex-direction: column;
  background: var(--assistant-bg);
  transition: flex-grow 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-assistant-transcript {
  display: none;
  min-height: 0;
  flex: 1 1 0;
  padding: 94px 26px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  scrollbar-width: thin;
}

.lead-assistant-message {
  display: grid;
  gap: 7px;
  margin-bottom: 27px;
  animation: assistant-message-in 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lead-assistant-message > span {
  color: rgba(244, 242, 237, 0.56);
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 610;
  letter-spacing: -0.02em;
  text-transform: none;
}

.lead-assistant-message p {
  max-width: 96%;
  color: rgba(244, 242, 237, 0.88);
  font-size: 18px;
  font-weight: 430;
  letter-spacing: -0.028em;
  line-height: 1.48;
  white-space: pre-wrap;
}

.lead-assistant-message.is-assistant {
  padding-left: 0;
  border-left: 0;
}

.lead-assistant-message.is-user {
  justify-items: start;
}

.lead-assistant-message.is-user p {
  width: fit-content;
  max-width: 92%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(244, 242, 237, 0.58);
}

.lead-assistant-message.is-thinking p {
  display: inline-flex;
  width: auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.lead-assistant-thinking-copy {
  color: rgba(244, 242, 237, 0.7);
}

.lead-assistant-thinking-spinner {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  animation: assistant-thinking-spin 920ms linear infinite;
}

.lead-assistant-thinking-spinner i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--assistant-paper);
  transform: rotate(var(--dot-angle)) translateY(-7px);
  transform-origin: 50% 50%;
}

.lead-assistant-thinking-spinner i:nth-child(1) { opacity: 1; }
.lead-assistant-thinking-spinner i:nth-child(2) { opacity: 0.86; }
.lead-assistant-thinking-spinner i:nth-child(3) { opacity: 0.72; }
.lead-assistant-thinking-spinner i:nth-child(4) { opacity: 0.58; }
.lead-assistant-thinking-spinner i:nth-child(5) { opacity: 0.44; }
.lead-assistant-thinking-spinner i:nth-child(6) { opacity: 0.34; }
.lead-assistant-thinking-spinner i:nth-child(7) { opacity: 0.25; }
.lead-assistant-thinking-spinner i:nth-child(8) { opacity: 0.17; }

.lead-assistant-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 24px 18px;
  overflow: visible;
  opacity: 0;
  transform: translateY(12px);
  scrollbar-width: none;
  transition:
    opacity 360ms ease,
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-assistant-suggestions::-webkit-scrollbar {
  display: none;
}

.lead-assistant-suggestions button {
  min-height: 42px;
  flex: 0 0 auto;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.055),
    0 8px 24px rgba(0, 0, 0, 0.08);
  color: rgba(244, 242, 237, 0.72);
  font-size: 15px;
  font-weight: 510;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-assistant-suggestions button:first-child {
  border-color: rgba(255, 255, 255, 0.86);
  background: rgba(244, 242, 237, 0.96);
  box-shadow:
    inset 0 1px #fff,
    0 10px 28px rgba(0, 0, 0, 0.16);
  color: #141519;
}

.lead-assistant-conversion {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  gap: 18px;
  align-items: center;
  margin: 0 18px 14px;
  padding: 14px 14px 14px 17px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 0%, rgba(129, 149, 235, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.055),
    0 18px 42px rgba(0, 0, 0, 0.13);
  animation: assistant-conversion-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lead-assistant-conversion::before {
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 185, 255, 0.72), transparent);
  content: "";
  opacity: 0.72;
}

.lead-assistant-conversion > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.lead-assistant-conversion > div > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(185, 198, 255, 0.82);
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 610;
  letter-spacing: -0.012em;
  text-transform: none;
}

.lead-assistant-conversion > div > span::before {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #a8b9ff;
  box-shadow: 0 0 14px rgba(168, 185, 255, 0.55);
  content: "";
}

.lead-assistant-conversion p {
  color: rgba(244, 242, 237, 0.82);
  font-size: 14px;
  font-weight: 440;
  letter-spacing: -0.018em;
  line-height: 1.42;
  text-wrap: balance;
}

.lead-assistant-conversion a {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 6px 5px 19px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(244, 242, 237, 0.97);
  box-shadow:
    inset 0 1px #fff,
    0 12px 30px rgba(0, 0, 0, 0.16);
  color: #121318;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -0.02em;
  text-transform: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 280ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-assistant-conversion a span {
  max-width: none;
  overflow: hidden;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.lead-assistant-conversion .icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 12px;
  border-radius: 50%;
  background: #121318;
  color: var(--assistant-paper);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Composer ---------------------------------------------------------------- */

.lead-assistant-composer {
  position: relative;
  z-index: 6;
  padding: 12px 16px 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--assistant-bg);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 360ms ease,
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-assistant-composer > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.lead-assistant-composer > .lead-assistant-input-shell {
  display: grid;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: end;
  padding: 5px 5px 5px 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.lead-assistant-composer > .lead-assistant-input-shell:focus-within {
  border-color: rgba(196, 204, 242, 0.52);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: 0 0 0 3px rgba(139, 155, 224, 0.08);
}

.lead-assistant-composer textarea {
  width: 100%;
  max-height: 118px;
  padding: 11px 0 10px;
  overflow-y: auto;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--assistant-paper);
  font: inherit;
  font-size: 17px;
  font-weight: 430;
  letter-spacing: -0.025em;
  line-height: 1.4;
  scrollbar-width: thin;
}

.lead-assistant-composer textarea::placeholder {
  color: rgba(244, 242, 237, 0.46);
  opacity: 1;
}

.lead-assistant-composer button[type="submit"] {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  background: var(--assistant-paper);
  color: #111;
  transition:
    background-color 180ms ease,
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-assistant-composer button[type="submit"]:disabled {
  cursor: wait;
  opacity: 0.42;
}

.lead-assistant-composer button .icon {
  width: 18px;
  height: 18px;
}

.lead-assistant-error {
  min-height: 0;
  padding: 0;
  color: #efb2a8;
  font-size: 15px;
  line-height: 1.4;
}

.lead-assistant-error:not(:empty) {
  padding: 8px 2px 0;
}

.lead-assistant-privacy {
  margin: 9px 2px 0;
  color: rgba(244, 242, 237, 0.52);
  font-size: 12px;
  line-height: 1.45;
}

.lead-assistant-privacy a {
  color: rgba(244, 242, 237, 0.78);
  text-underline-offset: 3px;
}

.lead-assistant-honey {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Conversation state ------------------------------------------------------ */

.lead-assistant.has-conversation .lead-assistant-panel-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 13, 12, 0.96);
}

.lead-assistant.has-conversation .lead-assistant-back {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
}

.lead-assistant.has-conversation .lead-assistant-visual {
  min-height: 0;
  flex: 0 0 0;
  opacity: 0;
  transform: translateY(-28px);
}

.lead-assistant.has-conversation .lead-assistant-intro {
  opacity: 0;
  transform: translateY(10px);
}

.lead-assistant.has-conversation .lead-assistant-conversation {
  flex: 1 1 0;
}

.lead-assistant.has-conversation .lead-assistant-transcript {
  display: block;
}

.lead-assistant:not(.has-conversation) .lead-assistant-conversion {
  display: none !important;
}

html.loader-pending .lead-assistant,
html.loader-active .lead-assistant {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

/* Interaction ------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .lead-assistant-launch:hover {
    border-color: rgba(16, 17, 21, 0.28);
    background: rgba(250, 248, 244, 0.96);
    box-shadow:
      0 30px 88px rgba(9, 11, 17, 0.26),
      inset 0 1px rgba(255, 255, 255, 0.94);
    transform: translateY(-3px);
  }

  .lead-assistant-launch:hover::before {
    width: calc(100% - 14px);
    box-shadow: 0 12px 34px rgba(7, 8, 11, 0.28);
  }

  .lead-assistant-launch:hover > span:first-child {
    color: var(--assistant-paper);
    transform: translateX(5px);
  }

  .lead-assistant-launch:hover .lead-assistant-launch-action {
    transform: translate(3px, -2px) rotate(5deg);
  }

  .lead-assistant-back:hover,
  .lead-assistant-close:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.04);
  }

  .lead-assistant-suggestions button:hover {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.11);
    color: var(--assistant-paper);
    transform: translateY(-2px);
  }

  .lead-assistant-suggestions button:first-child:hover {
    border-color: #fff;
    background: #fff;
    color: #111;
  }

  .lead-assistant-conversion a:hover {
    border-color: #fff;
    background: #fff;
    box-shadow:
      inset 0 1px #fff,
      0 16px 38px rgba(0, 0, 0, 0.22);
    color: #111318;
    transform: translateY(-2px);
  }

  .lead-assistant-conversion a:hover .icon {
    transform: translate(2px, -2px) rotate(4deg);
  }

  .lead-assistant-composer button[type="submit"]:hover {
    background: #fff;
    transform: translateX(2px);
  }
}

.lead-assistant-launch:focus-visible {
  outline: 2px solid rgba(113, 130, 222, 0.82);
  outline-offset: 4px;
}

.lead-assistant-launch:active {
  transform: translateY(0) scale(0.965);
}

.lead-assistant-launch:active::before,
.lead-assistant-launch:focus-visible::before {
  width: calc(100% - 14px);
}

.lead-assistant-launch:active > span:first-child,
.lead-assistant-launch:focus-visible > span:first-child {
  color: var(--assistant-paper);
  transform: translateX(5px);
}

@keyframes assistant-message-in {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes assistant-thinking-spin {
  to { transform: rotate(360deg); }
}

@keyframes assistant-conversion-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 700px) {
  html.chat-panel-open {
    overflow: hidden;
  }

  .lead-assistant {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .lead-assistant-launch {
    width: 230px;
    min-height: 60px;
    grid-template-columns: minmax(0, 1fr) 46px;
    padding: 6px 7px 6px 20px;
    border-radius: 30px;
    font-size: 16px;
  }

  .lead-assistant-launch::before {
    top: 6px;
    right: 6px;
    bottom: 6px;
    width: 46px;
  }

  .lead-assistant-launch-action {
    width: 46px;
    height: 46px;
  }

  .lead-assistant-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 30px;
    clip-path: inset(calc(100% - 72px) 12px 12px calc(100% - 242px) round 30px);
    transform: translateZ(0);
    transform-origin: 100% 100%;
  }

  .lead-assistant-morph-label {
    right: 12px;
    bottom: 12px;
    width: 230px;
    height: 60px;
    grid-template-columns: minmax(0, 1fr) 46px;
    padding: 6px 7px 6px 20px;
  }

  .lead-assistant-morph-action {
    width: 46px;
    height: 46px;
  }

  .lead-assistant.is-open .lead-assistant-panel {
    border-radius: 0;
    clip-path: inset(0 round 0);
  }

  .lead-assistant-panel-head {
    min-height: calc(70px + env(safe-area-inset-top));
    padding: calc(11px + env(safe-area-inset-top)) 14px 10px;
  }

  .lead-assistant-visual {
    min-height: 260px;
    flex: 1 1 auto;
  }

  .lead-assistant-visual video {
    object-position: 50% 50%;
  }

  .lead-assistant-intro {
    right: 22px;
    bottom: 20px;
    left: 22px;
  }

  .lead-assistant-intro h2 {
    font-size: clamp(31px, 9vw, 38px);
  }

  .lead-assistant-intro p {
    font-size: 18px;
  }

  .lead-assistant-suggestions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 16px 16px;
  }

  .lead-assistant-suggestions button {
    width: 100%;
    min-height: 46px;
    padding-inline: 17px;
    overflow: visible;
    font-size: 15px;
    text-align: left;
    text-overflow: clip;
  }

  .lead-assistant.has-conversation .lead-assistant-suggestions {
    display: flex;
    flex-wrap: nowrap;
    padding: 10px 18px 14px;
    overflow-x: auto;
  }

  .lead-assistant.has-conversation .lead-assistant-suggestions button {
    width: auto;
    flex: 0 0 auto;
  }

  .lead-assistant-transcript {
    padding: calc(88px + env(safe-area-inset-top)) 20px 10px;
  }

  .lead-assistant-message {
    margin-bottom: 25px;
  }

  .lead-assistant-message p {
    font-size: 17px;
  }

  .lead-assistant-composer {
    padding: 11px 12px max(12px, env(safe-area-inset-bottom));
  }

  .lead-assistant-composer > .lead-assistant-input-shell {
    min-height: 58px;
    padding-left: 16px;
  }

  .lead-assistant-composer textarea {
    font-size: 16px;
  }

  .lead-assistant-privacy {
    font-size: 12px;
  }

  .lead-assistant-conversion {
    gap: 12px;
    margin: 0 12px 12px;
    padding: 13px;
  }

  .lead-assistant-conversion p {
    font-size: 14px;
  }

  .lead-assistant-conversion a {
    min-height: 50px;
    padding: 5px 5px 5px 17px;
  }

  .lead-assistant-conversion a span {
    max-width: none;
  }
}

@media (max-width: 430px) {
  .lead-assistant-conversion {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px), (max-height: 700px) {
  .lead-assistant:not(.has-conversation) .lead-assistant-suggestions {
    grid-template-columns: 1fr 1fr;
  }

  .lead-assistant:not(.has-conversation) .lead-assistant-suggestions button {
    min-height: 44px;
    padding-inline: 13px;
    font-size: 15px;
    text-align: center;
    white-space: normal;
  }

  .lead-assistant:not(.has-conversation) .lead-assistant-suggestions button:last-child {
    grid-column: 1 / -1;
  }

  .lead-assistant-visual {
    min-height: 220px;
  }

  .lead-assistant-intro h2 {
    font-size: 29px;
  }
}

.lead-assistant.is-data-saver .lead-assistant-visual video {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lead-assistant,
  .lead-assistant *,
  .lead-assistant *::before,
  .lead-assistant *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .lead-assistant-visual video {
    display: none;
  }
}

/* AI transparency (EU AI Act, art. 50, applicable from 2 Aug 2026) ---------
   This single notice carries the whole disclosure: that the assistant is an AI
   system (art. 50.1) and that the avatar is generated content (art. 50.4). The
   law requires it to be "clear and distinguishable" and present at the latest at
   the first interaction, so it sits above the composer and is sized to be read,
   not to disappear. Do not shrink or fade it. */
.lead-assistant-privacy {
  color: rgba(244, 242, 237, 0.82);
  font-size: 12px;
  line-height: 1.5;
}

.lead-assistant-privacy a {
  color: rgba(244, 242, 237, 0.96);
}

/* Invisible verification container: must never affect layout. */
.lead-assistant-turnstile {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
