/*
 * Virtual Benefit Consultant widget.
 *
 * Present on every page via _Layout. On phones it opens as a full-height sheet because a floating
 * card that small is unusable; from 640px up it is a docked panel in the corner.
 */

/*
 * Zendesk injects its own launcher bubble into the same bottom-right corner as the consultant.
 * consultant.js hides it through the Zendesk API, but that only works once the widget has booted,
 * which leaves a visible flash of two stacked bubbles. This suppresses the launcher iframe from
 * the first paint; the chat window itself is a different frame and still opens normally when the
 * "Chat with Customer Support" button calls the API.
 */
iframe#launcher,
iframe[title="Button to launch messaging window"],
iframe[data-product="web_widget"][title*="launch"] {
  display: none !important;
}

.vbc-launcher {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.vbc-launcher:hover { background: #02356f; transform: translateY(-1px); }
.vbc-launcher svg { width: 1.25rem; height: 1.25rem; flex: none; }
.vbc-launcher[hidden] { display: none; }

/* A small pulse ring draws the eye once on first load, then never again. */
.vbc-launcher::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--action);
  opacity: 0;
  animation: vbc-pulse 2.4s ease-out 1.5s 2;
  pointer-events: none;
}
@keyframes vbc-pulse {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}

.vbc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgb(1 39 92 / 0.45);
  border: 0;
  padding: 0;
}
.vbc-backdrop[hidden] { display: none; }

@media (min-width: 640px) {
  /* On larger screens the page stays usable behind the panel, so no dimming. */
  .vbc-backdrop { display: none; }
}

.vbc-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--background);
  overflow: hidden;
}
.vbc-panel[hidden] { display: none; }

@media (min-width: 640px) {
  .vbc-panel {
    inset: auto 1.25rem 1.25rem auto;
    width: min(26rem, calc(100vw - 2.5rem));
    height: min(38rem, calc(100vh - 2.5rem));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
  }
}

.vbc-panel__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  padding-top: max(0.875rem, env(safe-area-inset-top));
  background: var(--primary);
  color: #fff;
  flex: none;
}

.vbc-panel__avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.15);
  flex: none;
}
.vbc-panel__avatar svg { width: 1.25rem; height: 1.25rem; }

.vbc-panel__title { flex: 1; min-width: 0; }
.vbc-panel__title strong { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; line-height: 1.3; }

/* Names the assistant as software, right where its title is. */
.vbc-badge {
  flex: none;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  background: rgb(255 255 255 / 0.22);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.vbc-panel__title span {
  display: block;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vbc-iconbtn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: none;
}
.vbc-iconbtn:hover { background: rgb(255 255 255 / 0.15); }
.vbc-iconbtn svg { width: 1.125rem; height: 1.125rem; }

.vbc-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  background: var(--muted);
}

.vbc-msg {
  max-width: 88%;
  padding: 0.75rem 0.9375rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.vbc-msg--bot {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 0.25rem;
}
.vbc-msg--user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}
.vbc-msg--note {
  align-self: center;
  max-width: 100%;
  background: #fff6e5;
  border: 1px solid #f0d9a8;
  color: #6b4e00;
  font-size: 0.8125rem;
  text-align: center;
}
.vbc-msg--error {
  align-self: center;
  max-width: 100%;
  background: #fdeaed;
  border: 1px solid #f5bfc8;
  color: #8c0a1f;
  font-size: 0.8125rem;
  text-align: center;
}

.vbc-msg p { margin: 0 0 0.625rem; }
.vbc-msg p:last-child { margin-bottom: 0; }
.vbc-msg ul, .vbc-msg ol { margin: 0 0 0.625rem; padding-left: 1.125rem; }
.vbc-msg li { margin-bottom: 0.3125rem; }
.vbc-msg a { color: var(--action); font-weight: 500; }
.vbc-msg--user a { color: #fff; }
.vbc-msg table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin-bottom: 0.625rem;
}
.vbc-msg th, .vbc-msg td {
  border: 1px solid var(--border);
  padding: 0.375rem 0.5rem;
  text-align: left;
}
.vbc-msg th { background: var(--secondary); }

.vbc-status {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  padding-left: 0.25rem;
}
.vbc-status[hidden] { display: none; }

.vbc-dots { display: inline-flex; gap: 0.1875rem; }
.vbc-dots i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--muted-foreground);
  animation: vbc-bounce 1.2s infinite ease-in-out;
}
.vbc-dots i:nth-child(2) { animation-delay: 0.15s; }
.vbc-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes vbc-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-0.25rem); opacity: 1; }
}

/* Suggestion chips. Rewritten per page so the prompts match the section the visitor is reading. */
.vbc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--card);
  flex: none;
}
.vbc-chips[hidden] { display: none; }

.vbc-chip {
  padding: 0.5rem 0.8125rem;
  border: 1px solid var(--input);
  border-radius: 999px;
  background: var(--card);
  color: var(--primary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.vbc-chip:hover { background: var(--accent); border-color: var(--primary); }

/* The "Send it to" field. Sits directly above the composer and only appears when the assistant
   has tried to send something, so the widget does not ask for an address up front. */
.vbc-emailrow {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--accent);
  flex: none;
}

.vbc-emailrow[hidden] { display: none; }

.vbc-emailrow label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.375rem;
}

.vbc-emailrow__controls {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.vbc-emailrow input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.9375rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--foreground);
}

.vbc-emailrow input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

.vbc-emailrow button {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  /* 44px minimum target, so this is tappable on a phone. */
  min-height: 2.75rem;
  padding: 0 1rem;
  cursor: pointer;
  background: var(--action);
  color: #fff;
}

.vbc-emailrow button:hover { background: var(--action-hover); }

.vbc-emailrow__cancel {
  background: transparent;
  color: var(--muted-foreground);
  padding: 0 0.5rem;
}

.vbc-emailrow__cancel:hover {
  background: transparent;
  color: var(--foreground);
  text-decoration: underline;
}

.vbc-emailrow__note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.vbc-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--card);
  flex: none;
}

.vbc-composer textarea {
  flex: 1;
  min-height: 2.75rem;
  max-height: 8rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  font: inherit;
  /* 16px stops iOS Safari zooming the page when the field takes focus. */
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  color: var(--foreground);
  background: var(--background);
}
.vbc-composer textarea::placeholder { color: var(--muted-foreground); }

.vbc-send {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--action);
  color: #fff;
  cursor: pointer;
}
.vbc-send:hover:not(:disabled) { background: var(--action-hover); }
.vbc-send:disabled { background: var(--input); cursor: not-allowed; }
.vbc-send svg { width: 1.125rem; height: 1.125rem; }

.vbc-footer {
  padding: 0.625rem 1rem;
  padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--muted);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: center;
  line-height: 1.5;
  flex: none;
}
.vbc-footer button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--action);
  cursor: pointer;
  text-decoration: underline;
}

/* Inline "ask the consultant" buttons dropped into page sections. */
.vbc-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--input);
  border-radius: 999px;
  background: var(--card);
  color: var(--primary);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.vbc-inline:hover { background: var(--accent); border-color: var(--primary); }
.vbc-inline svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--action); }

.vbc-prompt-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }