/*
  Hazel chat widget - Hazel's own independent brand system (Lantern
  Digital), not Gilded Oak's. Hazel Forest #173F35 / Deep Grove #102D27 /
  Young Hazel #6F9278 / Antique Brass #B09658 / Warm Parchment #F5F0E6 /
  Soft Ivory #FBF9F4. Cormorant Garamond for the "Hazel" name, falling back
  to Georgia/serif - unlike the interface/body font, this is never assumed
  to already be loaded by whatever agency's site Hazel is embedded on, so
  the serif fallback has to carry the same elegant character on its own.
  Body/interface text uses a plain system-UI sans stack (Hazel's brand
  calls for Söhne, but that's a licensed commercial font with no
  self-hosted file yet - worth adding later rather than fetching it from a
  third party at the cost of a new external request on every visitor's
  page). Calm and understated on purpose: no gradients, no glow, no
  bouncing mascot - see the Milestone 3 report for why.
*/

.hazel-widget {
  --hazel-forest: #173f35;
  --hazel-deep-grove: #102d27;
  --hazel-young: #6f9278;
  --hazel-brass: #b09658;
  --hazel-parchment: #f5f0e6;
  --hazel-ivory: #fbf9f4;
  --hazel-launcher-bottom: 20px;
  --hazel-launcher-right: 20px;
  --hazel-font-heading: "Cormorant Garamond", Georgia, serif;
  --hazel-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  position: fixed;
  z-index: 2147483000; /* deliberately high, but not max-int - leaves room above for a host page's own truly critical overlays (e.g. cookie banners) if it needs to outrank Hazel */
  /* inset shorthand is top/right/bottom/left, in that order - bottom-right anchored, top and left both auto */
  inset: auto var(--hazel-launcher-right) var(--hazel-launcher-bottom) auto;
  font-family: var(--hazel-font-body);
  color: var(--hazel-forest);
  line-height: 1.4;
}

.hazel-widget * {
  box-sizing: border-box;
}

.hazel-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Closed launcher ---------------------------------------------------- */

.hazel-launcher {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 17px 10px 10px;
  border: 1px solid rgba(176, 150, 88, 0.7);
  border-radius: 18px;
  background: var(--hazel-deep-grove);
  color: var(--hazel-ivory);
  font-family: var(--hazel-font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 45, 39, 0.28);
  transition: transform 120ms ease, box-shadow 120ms ease;
  /* Comfortably above the 44x44px touch-target guideline. */
  min-height: 58px;
}

.hazel-launcher-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(245, 240, 230, 0.1);
  border: 1px solid rgba(176, 150, 88, 0.45);
}

.hazel-launcher-icon {
  width: 27px;
  height: 27px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.hazel-launcher-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.hazel-launcher-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hazel-launcher-subtitle {
  margin-top: 3px;
  color: var(--hazel-brass);
  font-size: 11px;
  font-weight: 600;
}

.hazel-launcher:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(23, 63, 53, 0.3);
}

.hazel-launcher:focus-visible {
  outline: 3px solid var(--hazel-young);
  outline-offset: 2px;
}

.hazel-widget.hazel-open .hazel-launcher {
  display: none;
}

/* ---- Proactive engagement teaser ----------------------------------------- */
/* A one-time, dismissible nudge shown a few seconds after the launcher
   renders - never once the panel has been opened, never more than once per
   browser tab session. See core/teaser.js for the timing/dismissal rules
   this markup is driven by. Built from two sibling <button>s rather than
   one nested inside the other, so the dismiss control never ends up as an
   interactive element nested inside another interactive element. */
.hazel-teaser {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: 250px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.hazel-teaser::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--hazel-ivory);
  border-right: 1px solid rgba(176, 150, 88, 0.35);
  border-bottom: 1px solid rgba(176, 150, 88, 0.35);
  transform: rotate(45deg);
}

.hazel-teaser-visible {
  opacity: 1;
  transform: translateY(0);
}

.hazel-teaser-reduced-motion {
  transition: opacity 220ms ease;
  transform: none;
}

.hazel-teaser-open {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 14px 26px 14px 12px;
  border: 1px solid rgba(176, 150, 88, 0.35);
  border-radius: 16px;
  background: var(--hazel-ivory);
  color: var(--hazel-forest);
  box-shadow: 0 10px 28px rgba(16, 45, 39, 0.22);
  font-family: var(--hazel-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.hazel-teaser-open:hover {
  border-color: rgba(176, 150, 88, 0.6);
}

.hazel-teaser-open:focus-visible {
  outline: 3px solid var(--hazel-young);
  outline-offset: 2px;
}

.hazel-teaser-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 4px;
  border-radius: 10px;
  background: var(--hazel-parchment);
  flex-shrink: 0;
}

.hazel-teaser-icon {
  width: 21px;
  height: 21px;
  object-fit: contain;
  display: block;
}

.hazel-teaser-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--hazel-forest);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.hazel-teaser-dismiss:hover {
  background: rgba(23, 63, 53, 0.08);
}

.hazel-teaser-dismiss:focus-visible {
  outline: 3px solid var(--hazel-young);
  outline-offset: 1px;
}

@media (max-width: 480px) {
  .hazel-teaser {
    width: 220px;
  }
}

/* ---- Panel --------------------------------------------------------------- */

/* The [hidden] attribute is how JS shows/hides the panel and the typing
   indicator - but the HTML spec's [hidden] { display: none } UA rule has
   the same specificity as a bare class selector, and author styles always
   win over UA defaults regardless of source order. Setting display: flex
   on .hazel-panel/.hazel-typing therefore silently defeats `hidden`
   unless an explicit, higher-specificity [hidden] override is added for
   each - both are below. */
.hazel-panel[hidden],
.hazel-typing[hidden] {
  display: none;
}

.hazel-panel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 410px;
  max-width: calc(100vw - 24px);
  height: 640px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--hazel-ivory);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(23, 63, 53, 0.28);
  overflow: hidden;
}

.hazel-welcome[hidden] {
  display: none;
}

.hazel-panel:not(.hazel-conversation-active) .hazel-conversation,
.hazel-panel:not(.hazel-conversation-active) .hazel-typing,
.hazel-panel:not(.hazel-conversation-active) .hazel-quick-actions,
.hazel-panel:not(.hazel-conversation-active) .hazel-input-form {
  display: none;
}

.hazel-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  background: var(--hazel-forest);
  color: var(--hazel-ivory);
}

.hazel-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hazel-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--hazel-deep-grove);
  padding: 4px;
  flex-shrink: 0;
}

.hazel-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hazel-identity-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.hazel-name {
  font-family: var(--hazel-font-heading);
  font-size: 18px;
  font-weight: 600;
}

.hazel-role {
  font-family: var(--hazel-font-body);
  font-size: 12px;
  color: var(--hazel-brass);
  letter-spacing: 0.02em;
}

/* The host agency's name - the one piece of this identity block that
   changes per deployment (window.HazelChatConfig.hostAgencyName). Hazel's
   own name/role never do - see hazel-widget.js's HOST_AGENCY_NAME. */
.hazel-context {
  font-size: 11px;
  color: rgba(251, 249, 244, 0.75);
  margin-top: 1px;
}

.hazel-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- Choice-first welcome ------------------------------------------------ */

.hazel-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 26px 20px 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(176, 150, 88, 0.12), transparent 38%),
    var(--hazel-ivory);
}

.hazel-welcome-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--hazel-young);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hazel-available-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5f8f6f;
  box-shadow: 0 0 0 3px rgba(95, 143, 111, 0.14);
}

.hazel-welcome h2 {
  margin: 14px 0 5px;
  color: var(--hazel-deep-grove);
  font-family: var(--hazel-font-heading);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
}

.hazel-welcome > p {
  margin: 0 0 20px;
  color: rgba(16, 45, 39, 0.72);
  font-size: 14px;
}

.hazel-choice-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.hazel-choice-card {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 63, 53, 0.14);
  border-radius: 14px;
  background: #fffdfa;
  color: var(--hazel-deep-grove);
  font-family: var(--hazel-font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(16, 45, 39, 0.06);
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.hazel-choice-card:hover {
  transform: translateY(-1px);
  border-color: var(--hazel-brass);
  box-shadow: 0 7px 18px rgba(16, 45, 39, 0.1);
}

.hazel-choice-card:focus-visible {
  outline: 3px solid var(--hazel-young);
  outline-offset: 2px;
}

.hazel-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--hazel-parchment);
  color: var(--hazel-forest);
  font-size: 20px;
  font-weight: 700;
}

.hazel-choice-icon-document::before { content: "✦"; }
.hazel-choice-icon-question::before { content: "?"; }
.hazel-choice-icon-phone::before { content: "☎"; }

.hazel-choice-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hazel-choice-copy strong {
  font-size: 15px;
}

.hazel-choice-copy > span {
  color: rgba(16, 45, 39, 0.68);
  font-size: 12px;
}

.hazel-choice-copy small {
  color: var(--hazel-young);
  font-size: 10px;
  font-weight: 600;
}

.hazel-choice-arrow {
  color: var(--hazel-brass);
  font-family: Georgia, serif;
  font-size: 26px;
}

.hazel-talk-to-luke {
  background: transparent;
  border: 1px solid var(--hazel-brass);
  color: var(--hazel-brass);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: 32px;
}

.hazel-talk-to-luke:hover {
  background: rgba(176, 150, 88, 0.15);
}

.hazel-minimize {
  background: transparent;
  border: none;
  color: var(--hazel-ivory);
  font-size: 20px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
}

.hazel-minimize:hover {
  background: rgba(251, 249, 244, 0.12);
}

.hazel-talk-to-luke:focus-visible,
.hazel-minimize:focus-visible,
.hazel-quick-action:focus-visible,
.hazel-send:focus-visible,
.hazel-sms-consent-accept:focus-visible,
.hazel-sms-consent-decline:focus-visible {
  outline: 3px solid var(--hazel-young);
  outline-offset: 2px;
}

/* ---- Conversation --------------------------------------------------------- */

.hazel-conversation {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--hazel-ivory);
}

.hazel-message {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.hazel-message-hazel {
  align-self: flex-start;
  background: var(--hazel-parchment);
  color: var(--hazel-forest);
  border-left: 3px solid var(--hazel-young);
  border-radius: 4px 14px 14px 14px;
}

.hazel-message-visitor {
  align-self: flex-end;
  background: var(--hazel-forest);
  color: var(--hazel-ivory);
  border-radius: 14px 4px 14px 14px;
}

.hazel-message-fallback {
  border-left-color: var(--hazel-brass);
}

/* ---- Typing indicator ------------------------------------------------------ */

.hazel-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 10px;
  font-size: 12px;
  color: var(--hazel-forest);
  background: var(--hazel-ivory);
}

.hazel-typing-dots {
  display: inline-flex;
  gap: 3px;
}

.hazel-typing-dots i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hazel-young);
  animation: hazel-typing-bounce 1.2s infinite ease-in-out;
}

.hazel-typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.hazel-typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes hazel-typing-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* The animation is decorative only - the text label always conveys the
   same information, so removing the motion loses nothing. */
@media (prefers-reduced-motion: reduce) {
  .hazel-typing-dots i {
    animation: none;
    opacity: 0.8;
  }
}

.hazel-typing.hazel-typing-reduced-motion .hazel-typing-dots i {
  animation: none;
  opacity: 0.8;
}

/* ---- Quick actions --------------------------------------------------------- */

.hazel-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: var(--hazel-ivory);
  border-top: 1px solid rgba(23, 63, 53, 0.08);
}

.hazel-quick-actions:empty {
  display: none;
  padding: 0;
  border-top: none;
}

.hazel-quick-action {
  background: var(--hazel-ivory);
  border: 1.5px solid var(--hazel-forest);
  color: var(--hazel-forest);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
}

.hazel-quick-action:hover {
  background: var(--hazel-forest);
  color: var(--hazel-ivory);
}

.hazel-quick-action:disabled {
  opacity: 0.5;
  cursor: default;
}

.hazel-quick-action-chip {
  border-color: var(--hazel-brass);
  color: var(--hazel-brass);
}

.hazel-quick-action-chip:hover {
  background: var(--hazel-brass);
  color: var(--hazel-ivory);
}

/* ---- SMS consent card ------------------------------------------------------ */

.hazel-sms-consent-card {
  align-self: stretch;
  border: 1.5px solid var(--hazel-brass);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--hazel-parchment);
}

.hazel-sms-consent-disclosure {
  font-size: 12px;
  margin: 0 0 8px;
  color: var(--hazel-forest);
}

.hazel-sms-consent-links {
  font-size: 12px;
  margin: 0 0 10px;
}

.hazel-sms-consent-links a {
  color: var(--hazel-forest);
  text-decoration: underline;
}

.hazel-sms-consent-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hazel-sms-consent-accept,
.hazel-sms-consent-decline {
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
}

.hazel-sms-consent-accept {
  background: var(--hazel-forest);
  border: none;
  color: var(--hazel-ivory);
}

.hazel-sms-consent-decline {
  background: transparent;
  border: 1.5px solid var(--hazel-forest);
  color: var(--hazel-forest);
}

/* ---- Input ------------------------------------------------------------------ */

.hazel-input-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--hazel-ivory);
  border-top: 1px solid rgba(23, 63, 53, 0.08);
}

.hazel-input-form input {
  flex: 1;
  border: 1.5px solid rgba(23, 63, 53, 0.2);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--hazel-font-body);
  min-height: 40px;
}

.hazel-input-form input:focus-visible {
  outline: none;
  border-color: var(--hazel-young);
}

.hazel-input-form input:disabled {
  background: rgba(23, 63, 53, 0.04);
}

.hazel-send {
  background: var(--hazel-forest);
  border: none;
  color: var(--hazel-ivory);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 40px;
  min-width: 64px;
}

.hazel-send:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- Responsive ------------------------------------------------------------- */

@media (max-width: 480px) {
  .hazel-widget {
    --hazel-launcher-bottom: max(16px, env(safe-area-inset-bottom));
    --hazel-launcher-right: 16px;
  }

  /* Small phones: the open panel becomes a near-full-screen conversation,
     which is more usable than a cramped floating card at this width. */
  .hazel-widget.hazel-open .hazel-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .hazel-panel-header {
    padding-top: max(14px, env(safe-area-inset-top));
  }
}

@media (min-width: 481px) and (max-width: 900px) {
  .hazel-panel {
    width: 340px;
    height: 520px;
  }
}