.lead-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 20, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 90;
}

.lead-panel-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lead-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 420px;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg-panel);
  color: var(--ink);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
}

.lead-panel.is-open {
  transform: translateX(0);
}

.lead-panel__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(141, 139, 168, 0.15);
}

.lead-panel__mark {
  width: 24px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-panel__mark img {
  width: 100%;
  height: auto;
  display: block;
}

/* The 16px in the 480px query below is a floor, not a size: iOS zooms the page
   when a focused input computes under 16px. This one is a real size. */
.lead-panel__title {
  flex: 1;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.lead-panel__close {
  background: none;
  border: none;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 4px;
  display: flex;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.lead-panel__close:hover {
  color: var(--ink);
  background: rgba(141, 139, 168, 0.1);
}

.lead-panel__progress {
  height: 3px;
  background: rgba(141, 139, 168, 0.15);
}

.lead-panel__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(135deg, var(--loop-indigo), var(--loop-violet));
  transition: width 0.25s ease;
}

.lead-panel__body {
  flex: 1;
  padding: 28px 24px;
  overflow-y: auto;
}

.lead-panel__prompt {
  font-size: 0.9375rem;
  color: var(--ink-dim);
  margin: 0 0 16px;
}

.lead-panel__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lead-panel__option {
  text-align: left;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(141, 139, 168, 0.2);
  background: rgba(233, 231, 245, 0.03);
  color: var(--ink);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.lead-panel__option:hover,
.lead-panel__option:focus-visible {
  border-color: var(--loop-indigo);
  background: rgba(91, 110, 245, 0.08);
  outline: none;
}

.lead-panel__option[aria-pressed="true"] {
  border-color: var(--loop-indigo);
  background: rgba(91, 110, 245, 0.12);
}

.lead-panel__field {
  margin-bottom: 16px;
}

.lead-panel__field label,
.lead-panel__field-label {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

.lead-panel__field input,
.lead-panel__field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(141, 139, 168, 0.25);
  background: rgba(233, 231, 245, 0.03);
  color: var(--ink);
  font-size: 0.9375rem;
  font-family: inherit;
  box-sizing: border-box;
}

.lead-panel__field input:focus,
.lead-panel__field textarea:focus {
  outline: none;
  border-color: var(--loop-indigo);
}

.lead-panel__field textarea {
  min-height: 90px;
  resize: vertical;
}

/* Hidden from real visitors, left in the tab flow of nobody, but still
   present in the DOM so automated form fillers tend to populate it. */
.lead-panel__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-panel__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.lead-panel__back {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
}

.lead-panel__back:hover {
  color: var(--ink);
}

.lead-panel__continue {
  margin-top: 0;
  padding: 14px 16px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--loop-indigo), var(--loop-violet));
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.lead-panel__continue:hover {
  opacity: 0.9;
}

.lead-panel__continue:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lead-panel__review-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lead-panel__review-list li {
  font-size: 0.875rem;
  color: var(--ink-dim);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.lead-panel__review-list li span:last-child {
  color: var(--ink);
  text-align: right;
}

.lead-panel__error {
  font-size: 0.875rem;
  color: #f08a8a;
  margin-top: 10px;
}

.lead-panel__confirmation {
  text-align: center;
  padding: 24px 0;
}

.lead-panel__confirmation-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--signal-mint);
  margin: 0 auto 16px;
}

@media (max-width: 480px) {
  .lead-panel { width: 100%; }
  /* iOS Safari zooms the viewport in when a focused input's font-size
     is below 16px, and does not reliably zoom back out afterward.
     Bumping every text input and textarea in the panel to 16px on
     mobile avoids triggering that zoom in the first place. */
  .lead-panel__field input,
  .lead-panel__field textarea,
  .lead-panel__other-field input,
  .lead-panel__assistant-input-row input {
    font-size: 16px;
  }
}

/* --- Multi-select checkbox options (problem type question) --- */
.lead-panel__option--checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lead-panel__option--checkbox::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(141, 139, 168, 0.35);
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lead-panel__option--checkbox[aria-pressed="true"]::before {
  background: linear-gradient(135deg, var(--loop-indigo), var(--loop-violet));
  border-color: transparent;
}

/* --- "Other, please specify" inline field --- */
.lead-panel__other-field {
  margin-top: 8px;
}
.lead-panel__other-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(141, 139, 168, 0.25);
  background: rgba(233, 231, 245, 0.03);
  color: var(--ink);
  font-size: 0.9375rem;
  font-family: inherit;
  box-sizing: border-box;
}
.lead-panel__other-field input:focus {
  outline: none;
  border-color: var(--loop-indigo);
}
.lead-panel__other-confirm {
  margin-top: 8px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: rgba(91, 110, 245, 0.15);
  color: var(--ink);
  font-size: 0.875rem;
  cursor: pointer;
}
.lead-panel__other-confirm:hover { background: rgba(91, 110, 245, 0.24); }

/* --- Virtual assistant trigger + chat --- */
.lead-panel__assistant-trigger {
  text-align: left;
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px dashed rgba(166, 108, 240, 0.4);
  background: rgba(166, 108, 240, 0.06);
  color: var(--loop-violet);
  font-size: 0.875rem;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lead-panel__assistant-trigger:hover {
  background: rgba(166, 108, 240, 0.12);
  border-color: var(--loop-violet);
}

.lead-panel__assistant {
  margin-top: 12px;
  border: 1px solid rgba(141, 139, 168, 0.2);
  border-radius: 10px;
  overflow: hidden;
}
.lead-panel__assistant-messages {
  max-height: 220px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lead-panel__assistant-msg {
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 8px;
  max-width: 88%;
}
.lead-panel__assistant-msg--assistant {
  background: rgba(233, 231, 245, 0.05);
  color: var(--ink-dim);
  align-self: flex-start;
}
.lead-panel__assistant-msg--user {
  background: rgba(91, 110, 245, 0.15);
  color: var(--ink);
  align-self: flex-end;
}
.lead-panel__assistant-msg--pending {
  background: rgba(233, 231, 245, 0.05);
  color: var(--ink-dim);
  align-self: flex-start;
  font-style: italic;
}
.lead-panel__assistant-input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(141, 139, 168, 0.15);
}
.lead-panel__assistant-input-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(141, 139, 168, 0.25);
  background: rgba(233, 231, 245, 0.03);
  color: var(--ink);
  font-size: 0.875rem;
  font-family: inherit;
  box-sizing: border-box;
}
.lead-panel__assistant-input-row input:focus {
  outline: none;
  border-color: var(--loop-indigo);
}
.lead-panel__assistant-input-row button {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--loop-indigo), var(--loop-violet));
  color: var(--ink);
  font-size: 0.875rem;
  cursor: pointer;
  flex-shrink: 0;
}
.lead-panel__assistant-input-row button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lead-panel__assistant-disclaimer {
  font-size: 0.875rem;
  color: var(--ink-dim);
  padding: 8px 10px 2px;
  line-height: 1.5;
  border-top: 1px solid rgba(141, 139, 168, 0.15);
}
.lead-panel__assistant-poweredby {
  font-size: 0.8125rem;
  color: rgba(141, 139, 168, 0.6);
  padding: 0 10px 10px;
  text-align: right;
}
.lead-panel__assistant-continue {
  width: calc(100% - 20px);
  margin: 10px 10px 0;
}
.lead-panel__language-help {
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--ink-dim);
  line-height: 1.5;
}
.lead-panel__assistant-done {
  font-size: 0.875rem;
  color: var(--signal-mint);
  padding: 8px 10px;
  border-top: 1px solid rgba(141, 139, 168, 0.15);
}

/* --- Exit confirmation --- */
.lead-panel__exit-confirm {
  position: absolute;
  inset: 0;
  background: var(--bg-panel);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 24px;
  z-index: 2;
}
.lead-panel__exit-confirm.is-open { display: flex; }
.lead-panel__exit-confirm p {
  font-size: 0.9375rem;
  color: var(--ink);
  margin: 0 0 20px;
  line-height: 1.5;
}
.lead-panel__exit-confirm-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.lead-panel__exit-cancel {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(141, 139, 168, 0.25);
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  cursor: pointer;
}
.lead-panel__exit-leave {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background: rgba(240, 138, 138, 0.15);
  color: #f08a8a;
  font-size: 0.9375rem;
  cursor: pointer;
}