/*
  PolicyEZ chat button: E2 staging styles (Weekend Go-Live Loop, Workstream E)
  Status: STAGING ONLY. Ships to /assets/chat-button.css at flip time.
  Mobile-first. Palette matches the PolicyEZ brand: Patriot Deep Navy
  #0E2944, Shield Royal Blue #17406B, Patriot Crimson #C01F33,
  Soft Ice #F5F9F8, Silver Rule #94A3B8.
  Layering: the site mobile CTA bar is fixed at z-index 150 and reserves
  84px at the bottom on small screens (ia.css). The chat button sits
  above that bar, and the panel docks above it too, so neither ever
  covers the Call or Get my quote actions.
*/

.pez-chat {
  --pez-navy: #0e2944;
  --pez-royal: #17406b;
  --pez-crimson: #c01f33;
  --pez-ice: #f5f9f8;
  --pez-silver: #94a3b8;
  --pez-ink: #14232e;
  font-family: inherit;
  color: var(--pez-ink);
}

/* Floating button */
.pez-chat-btn {
  position: fixed;
  right: 16px;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  z-index: 160;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--pez-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(14, 41, 68, 0.35);
  -webkit-tap-highlight-color: transparent;
}
.pez-chat-btn:hover,
.pez-chat-btn:focus-visible {
  background: var(--pez-royal);
}
.pez-chat-btn:focus-visible {
  outline: 3px solid var(--pez-silver);
  outline-offset: 2px;
}
.pez-chat-btn[aria-expanded="true"] {
  background: var(--pez-royal);
}
.pez-chat-btn-icon {
  flex: 0 0 auto;
}

/* Panel: bottom sheet on phones, card on larger screens */
.pez-chat-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  z-index: 170;
  max-height: calc(100dvh - 188px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  border: 1px solid var(--pez-silver);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(14, 41, 68, 0.28);
}
.pez-chat-panel[hidden] {
  display: none;
}

.pez-chat-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pez-chat-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  color: var(--pez-navy);
}
.pez-chat-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px -8px 0 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pez-navy);
  cursor: pointer;
}
.pez-chat-close:hover {
  background: var(--pez-ice);
}
.pez-chat-close:focus-visible,
.pez-chat-panel a:focus-visible,
.pez-chat-submit:focus-visible {
  outline: 3px solid var(--pez-royal);
  outline-offset: 2px;
}

.pez-chat-intro {
  margin: 10px 0 16px;
  font-size: 15px;
  line-height: 1.5;
}

/* Text action */
.pez-chat-textlink {
  display: block;
  padding: 14px 16px;
  border: 2px solid var(--pez-royal);
  border-radius: 12px;
  color: var(--pez-navy);
  text-decoration: none;
}
.pez-chat-textlink:hover {
  background: var(--pez-ice);
}
.pez-chat-textlink-main {
  display: block;
  font-size: 17px;
  font-weight: 700;
}
.pez-chat-textlink-sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
}
.pez-chat-desktop-note {
  margin: 10px 0 0;
  font-size: 14px;
}
.pez-chat-desktop-note a {
  color: var(--pez-royal);
}

/* Divider */
.pez-chat-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: #4a5b6a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pez-chat-divider::before,
.pez-chat-divider::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--pez-silver);
}

/* Callback form */
.pez-chat-lines {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.pez-chat-lines legend {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pez-navy);
}
.pez-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pez-chat-chip {
  position: relative;
  cursor: pointer;
}
.pez-chat-chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.pez-chat-chip span {
  display: inline-block;
  padding: 10px 14px;
  border: 1.5px solid var(--pez-silver);
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  background: #fff;
}
.pez-chat-chip:hover span {
  border-color: var(--pez-royal);
}
.pez-chat-chip input:checked + span {
  border-color: var(--pez-navy);
  background: var(--pez-navy);
  color: #fff;
  font-weight: 700;
}
.pez-chat-chip input:focus-visible + span {
  outline: 3px solid var(--pez-royal);
  outline-offset: 2px;
}

.pez-chat-field {
  margin-bottom: 12px;
}
.pez-chat-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pez-navy);
}
.pez-chat-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--pez-silver);
  border-radius: 10px;
  font-size: 16px;
  background: #fff;
  color: var(--pez-ink);
}
.pez-chat-field input:focus {
  border-color: var(--pez-royal);
  outline: 3px solid rgba(23, 64, 107, 0.35);
  outline-offset: 0;
}

/* Honeypot: visually removed, never display:none so simple bots still
   see a field. Positioned off-screen and removed from the tab order in
   the markup (tabindex -1, aria-hidden wrapper). */
.pez-chat-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pez-chat-consent {
  margin: 12px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4a5b6a;
}
.pez-chat-error {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fdf0f2;
  border: 1px solid var(--pez-crimson);
  color: #7c1220;
  font-size: 14px;
  line-height: 1.5;
}
.pez-chat-error a {
  color: #7c1220;
  font-weight: 700;
}
.pez-chat-submit {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--pez-crimson);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.pez-chat-submit:hover {
  filter: brightness(1.08);
}
.pez-chat-submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}

.pez-chat-claims,
.pez-chat-email {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #4a5b6a;
}
.pez-chat-claims a,
.pez-chat-email a {
  color: var(--pez-royal);
  font-weight: 600;
}

/* Confirmation view */
.pez-chat-done-title {
  margin: 6px 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--pez-navy);
}
.pez-chat-done-title:focus {
  outline: none;
}
.pez-chat-done-sub {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
}
.pez-chat-handoff {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--pez-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.pez-chat-handoff:hover {
  background: var(--pez-royal);
}

/* Larger screens: button and panel anchor to the bottom right corner.
   The mobile CTA bar is hidden at this width, so the offset shrinks. */
@media (min-width: 761px) {
  .pez-chat-btn {
    right: 24px;
    bottom: 24px;
  }
  .pez-chat-panel {
    left: auto;
    right: 24px;
    bottom: 92px;
    width: 380px;
    max-height: calc(100dvh - 140px);
  }
  .pez-chat-desktop-note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pez-chat-btn,
  .pez-chat-panel {
    scroll-behavior: auto;
  }
}