/* Garrick AI answer card — adapted from the user-supplied PolicyGPT card. */

.bdr-garrick-card {
  --bdr-garrick-accent: #00A5E2;
  --bdr-garrick-accent-soft: #00A5E2;
  --bdr-garrick-orb: #00A5E2;
  --bdr-garrick-text-accent: #00A5E2;
  --bdr-garrick-text-accent: #00A5E2;
  position: relative;
  width: 100%;
  max-width: 520px;
  font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bdr-garrick-card *,
.bdr-garrick-card *::before,
.bdr-garrick-card *::after {
  box-sizing: border-box;
}

.bdr-garrick-card-panel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 34px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
}

.bdr-garrick-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.bdr-garrick-card-title {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  color: #F5F5F8;
  letter-spacing: 0;
}

.bdr-v19-frame .bdr-garrick-card-title {
  margin: 0 !important;
  color: #F5F5F8 !important;
  letter-spacing: 0 !important;
}

.bdr-garrick-card-name {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: #F3F5F9;
  font-size: 21px;
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
}

/* The wordmark is the SVG now. The two spans these rules coloured -- .card-name-ask
   and .card-name-garrick -- no longer exist in the markup on any of the 21 pages
   that carry this card, so the rules are deleted rather than left to rot.

   Height alone sizes it: the file is 2142x323, a 6.63:1 lockup, and setting a
   width as well would distort it. */
/* Scoped to its parent on purpose. Elementor ships `.elementor img{height:auto}`
   at 0,1,1 -- a class plus an element -- which beats a lone class, so the bare
   .bdr-garrick-card-logo lost and the mark collapsed to 8px tall. Naming the
   parent takes this to 0,2,0 and wins on specificity rather than on !important. */
.bdr-garrick-card-name .bdr-garrick-card-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: none;
  flex: none;
}

.bdr-v19-frame .bdr-garrick-card-tagline {
  display: block;
  max-width: none;
  color: #FFFFFF !important;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.bdr-garrick-card-pill {
  flex: none;
  padding: 5px 11px;
  border: 1px solid rgba(0, 165, 226,.36);
  border-radius: 100px;
  background: rgba(0, 165, 226,.14);
  color: var(--bdr-garrick-text-accent);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.bdr-garrick-card-conversation {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 20px;
}

.bdr-garrick-question {
  align-self: flex-end;
  max-width: 352px;
  padding: 13px 16px;
  border-radius: 14px 14px 4px 14px;
  background: var(--bdr-garrick-accent);
  box-shadow: 0 8px 22px rgba(0, 165, 226,.35);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.bdr-garrick-answer-row {
  display: flex;
  gap: 12px;
}

.bdr-garrick-orb-wrap {
  width: 49px;
  height: 49px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bdr-garrick-orb {
  width: 49px !important;
  height: 49px !important;
  filter: drop-shadow(0 0 7px rgba(0, 165, 226,.34));
}

.bdr-garrick-answer {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px 14px 14px 14px;
  background: rgba(255,255,255,.075);
  color: #F1F1F5;
  font-size: 14px;
  line-height: 1.65;
}

.bdr-garrick-answer-sizer,
.bdr-garrick-answer-live {
  grid-area: 1 / 1;
  min-width: 0;
}

.bdr-garrick-answer-sizer {
  visibility: hidden;
  pointer-events: none;
}

.bdr-garrick-answer-live {
  z-index: 1;
  height: 0;
  overflow: visible;
}

.bdr-garrick-caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--bdr-garrick-orb);
  animation: bdr-garrick-blink 1s step-end infinite;
}

/* Status line, mirroring the strip the live widget shows above its composer:
   it names what Garrick is doing, and clears once the reply has landed. The
   card has no composer, so the line sits at the foot of the transcript -- the
   same place relative to the conversation. This replaces the orb, which the
   widget itself no longer uses. Cards that still carry the orb have no status
   node and are unaffected. */
.bdr-garrick-card-status {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Sits between the transcript and the footer, where the widget's strip sits
     between its thread and its composer. The conversation's own 22px floor is
     pulled back so the line reads as attached to the reply above it. */
  margin-top: -10px;
  padding: 0 20px 14px;
}

/* The row holds its place whether or not anything is happening. Collapsing it
   when the reply lands would resize the card underneath the reader, so only
   the contents come and go. */
.bdr-garrick-card-status[data-composing="false"] .bdr-garrick-card-dots {
  opacity: 0;
}

.bdr-garrick-card-pending {
  margin: 0;
  /* One line, always -- the label is emptied rather than removed when the
     reply lands, and an empty paragraph would otherwise collapse and take
     12px out of the card. */
  min-height: 1.4em;
  color: rgba(199, 206, 218, .72);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

/* The widget's own strip is text alone, because its reply bubble grows as the
   answer arrives and that movement is the signal. The card reserves the
   bubble's full height up front, so nothing moves while it types -- the dots
   put that signal back. */
.bdr-garrick-card-dots {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  transition: opacity .2s ease;
}

.bdr-garrick-card-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(199, 206, 218, .72);
  animation: bdr-garrick-dot 1.25s ease-in-out infinite;
}

.bdr-garrick-card-dots i:nth-child(2) { animation-delay: .18s; }
.bdr-garrick-card-dots i:nth-child(3) { animation-delay: .36s; }

.bdr-garrick-card-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.24);
}

.bdr-garrick-guidance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #C7CEDA;
  font-size: 12.5px;
  line-height: 1.5;
}

.bdr-garrick-guidance-icon {
  width: 17px;
  height: 17px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1px solid rgba(0, 165, 226,.4);
  border-radius: 5px;
  background: rgba(0, 165, 226,.2);
  color: var(--bdr-garrick-text-accent);
  font-size: 10px;
}

.bdr-garrick-confidence {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bdr-garrick-confidence-bar {
  height: 4px;
  flex: 1;
  border-radius: 3px;
  background: var(--bdr-garrick-accent);
  transform-origin: left;
  animation: bdr-garrick-grow .8s ease both;
}

.bdr-garrick-confidence-bar:nth-child(2) { animation-delay: .15s; }
.bdr-garrick-confidence-bar:nth-child(3) { animation-delay: .3s; background: #00A5E2; }
.bdr-garrick-confidence-bar:nth-child(4) { animation-delay: .45s; background: #2ED36F; }

.bdr-garrick-confidence-label {
  flex: none;
  margin-left: 6px;
  color: #C7CEDA;
  font-family: "Geist Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.bdr-garrick-card-shadow {
  position: absolute;
  inset: 26px -18px -20px 18px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 22px;
  background: rgba(255,255,255,.025);
}

.bdr-garrick-card-wrap {
  width: 100%;
  max-width: 560px;
  justify-self: center;
}

.bdr-v19-frame .bdr-garrick-card-surface {
  position: relative;
  display: grid;
  min-height: 420px;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
}

.bdr-v19-frame .bdr-garrick-card-surface .bdr-garrick-card-panel {
  background: #14171D;
}

.bdr-v19-frame .bdr-garrick-card-surface .bdr-garrick-answer {
  min-height: 78px;
}

.bdr-garrick-hero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 590px;
  padding: 88px 24px 116px;
}

@keyframes bdr-garrick-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes bdr-garrick-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes bdr-garrick-dot {
  0%, 70%, 100% { opacity: .3; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-2px); }
}

@media (max-width: 1180px) and (min-width: 768px) {
  .bdr-garrick-card-wrap { justify-self: center; }
}

@media (max-width: 560px) {
  .bdr-garrick-hero { min-height: 0; padding: 64px 22px 84px; }
  .bdr-garrick-card { max-width: 100%; }
  .bdr-garrick-card-title { gap: 6px; }
  .bdr-garrick-card-name { font-size: 20px; }
  .bdr-garrick-card-conversation { padding: 20px 16px; }
  .bdr-garrick-confidence { align-items: flex-start; flex-wrap: wrap; }
  .bdr-garrick-confidence-label { width: 100%; margin: 4px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bdr-garrick-card [style*="animation"],
  .bdr-garrick-caret,
  .bdr-garrick-card-dots i,
  .bdr-garrick-confidence-bar {
    animation: none !important;
  }
}