/* Help chat.

   A rebuild of the widget in the React application. The application
   carries it as a component compiled into its bundle, so there is no
   snippet to reuse; these values are read from that bundle so the two
   match rather than merely resemble each other.

   Tailwind classes in the source, resolved here:
     #304f71 navy-soft   #243d57 hover      #f8fafc slate-50
     #f3f4f6 gray-100    #e5e7eb gray-200   #111827 gray-900
     #4b5563 gray-600    #cbd5e1 slate-300  #14b8a6 teal-500
     #fef08a yellow-200  #fde047 yellow-300
*/

.pqc-wrap {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: 'Poppins', var(--ui, sans-serif);
}
.pqc-wrap[hidden] { display: none; }

/* The HighLevel opt-in sits in this corner on the homepage only. */
body.pq-ghl .pqc-wrap { bottom: 108px; }

/* The nudge above the button. It shows for five seconds on each page
   and then retires, leaving the button on its own. */
.pqc-tip {
  position: relative;
  max-width: 12rem;
  border-radius: 16px;
  background: #fef08a;
  border: 1px solid #fde047;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #111827;
  cursor: pointer;
  text-align: left;
}
.pqc-tip:hover { background: #fde047; }
.pqc-tip[hidden] { display: none; }
.pqc-tip::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: #fef08a;
  border-right: 1px solid #fde047;
  border-bottom: 1px solid #fde047;
  transform: rotate(45deg);
}
.pqc-tip-long { display: none; }
@media (min-width: 640px) {
  .pqc-tip { max-width: 18rem; white-space: nowrap; }
  .pqc-tip-short { display: none; }
  .pqc-tip-long { display: inline; }
}

.pqc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: none;
  border-radius: 16px;
  background: #304f71;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
  transition: background-color .16s ease;
}
.pqc-btn:hover { background: #243d57; }
.pqc-btn:focus-visible { outline: 2px solid #14b8a6; outline-offset: 3px; }
.pqc-btn svg { width: 24px; height: 24px; display: block; }

/* ---- panel ---- */
.pqc-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 901;
  width: 22rem;
  max-width: calc(100vw - 2rem);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  overflow: hidden;
  font-family: 'Poppins', var(--ui, sans-serif);
}
.pqc-panel[hidden] { display: none; }

.pqc-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.pqc-hd h2 { margin: 0; font-size: 16px; font-weight: 600; color: #111827; }
.pqc-x {
  border: none;
  background: none;
  padding: 4px 2px;
  font: inherit;
  font-size: 15px;
  color: #4b5563;
  cursor: pointer;
}
.pqc-x:hover { color: #111827; }
.pqc-x:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }

/* A fixed 320px window, as in the application, so the panel is a proper
   chat from the first message rather than a box that grows. */
.pqc-log {
  height: 20rem;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pqc-row { display: flex; }
.pqc-row.pqc-you { justify-content: flex-end; }
.pqc-m {
  max-width: 85%;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pqc-you .pqc-m { background: #304f71; color: #fff; }
.pqc-bot .pqc-m { background: #f3f4f6; color: #111827; }
.pqc-m a { color: #1d4ed8; font-weight: 600; text-decoration: underline; }
.pqc-you .pqc-m a { color: #BDFFE9; }

.pqc-dots { display: inline-flex; gap: 4px; align-items: center; }
.pqc-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #1D2D60;
  animation: pqcDot 1.1s ease-in-out infinite;
}
.pqc-dots i:nth-child(2) { animation-delay: .16s }
.pqc-dots i:nth-child(3) { animation-delay: .32s }
@keyframes pqcDot {
  0%, 100% { opacity: .3; transform: translateY(0) }
  50% { opacity: 1; transform: translateY(-3px) }
}

/* ---- composer ---- */
.pqc-foot { border-top: 1px solid #e5e7eb; padding: 12px; background: #fff; }
.pqc-form { display: flex; align-items: flex-end; gap: 8px; }
.pqc-field { flex: 1 1 auto; }
.pqc-form textarea {
  width: 100%;
  resize: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #111827;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
  max-height: 96px;
}
.pqc-form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #14b8a6;
  border-color: transparent;
}
.pqc-send {
  flex: 0 0 auto;
  border: none;
  border-radius: 8px;
  background: #304f71;
  color: #fff;
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease;
}
.pqc-send:hover:not(:disabled) { background: #243d57; }
.pqc-send:disabled { background: #cbd5e1; cursor: not-allowed; }
.pqc-send:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }

/* Not in the application's widget. Kept because this is a YMYL page and
   an automated answer about a mortgage should say what it is. */
.pqc-legal {
  margin: 0;
  padding: 0 12px 12px;
  background: #fff;
  font-size: 11px;
  line-height: 1.45;
  color: #4b5563;
}

@media (max-width: 639px) {
  .pqc-wrap { right: 16px; bottom: 16px; }
  body.pq-ghl .pqc-wrap { bottom: 100px; }
  .pqc-panel {
    right: 16px;
    left: 16px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
  }
  .pqc-log {
    height: auto;
    flex: 1 1 auto;
    min-height: 10rem;
    max-height: 42dvh;
  }
  /* One greeting should sit in the middle of the window, not at its top. */
  .pqc-log:has(.pqc-row:only-child) { justify-content: center; }
  /* iOS zooms the page when a focused field is under 16px, which
     slides the Send button off the right edge. */
  .pqc-form textarea { font-size: 16px; }
  .pqc-field { min-width: 0; }
}
html.pqc-open,
html.pqc-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pqc-btn, .pqc-send, .pqc-dots i { transition: none; animation: none; }
}