/* Haley's chat: the blue cloud that peeks in from the edge of the screen, the chat window, and the signup card inside it.
   Reads the page's color tokens (--ground, --ink, ...) and falls back to Haley's daylight palette. */

.hc-trigger, .hc-wrap, .hc-wrap * { box-sizing: border-box; }

/* Inside the chat everything takes the assistant's blue, kept soft: light fills, thin soft lines, one mid-blue for the main button.
   (--hc-blue is the cloud's own colour; the darker ones are for text on blue and for focus rings, so they stay readable.) */
.hc-trigger, .hc-wrap {
  --hc-blue: #4da3f8; --hc-blue-soft: #edf5fe; --hc-blue-line: #8fc0f7; --hc-blue-hair: #b9d8fa; --hc-blue-cta: #3571c9; --hc-blue-ring: #2a66b8;
}
html.a11y-high-contrast :is(.hc-trigger, .hc-wrap) {
  --hc-blue: #0a3d91; --hc-blue-soft: #ffffff; --hc-blue-line: #0a3d91; --hc-blue-hair: #0a3d91; --hc-blue-cta: #0a3d91; --hc-blue-ring: #0a3d91;
}
.hc-wrap[hidden], .hc-trigger[hidden], .hc-typing[hidden] { display: none !important; }

/* The character: peeks in from the right edge, or from the left when something is in the way (haley-chat.js decides).
   data-side is the edge she is on, data-away is "out of sight", data-near is "the mouse is close, lean in". */
.hc-trigger {
  --hc-pet: 78px;
  position: fixed; z-index: 20; top: 60%; right: 0; left: auto; margin: 0; padding: 0; border: 0; border-radius: 50%;
  width: var(--hc-pet); height: calc(var(--hc-pet) * .9); background: none; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transform: translate3d(var(--hc-out, 44%), 0, 0);
  transition: transform .6s cubic-bezier(.2, 1.3, .35, 1), visibility 0s;
  filter: drop-shadow(0 6px 10px rgba(45,41,38,.2));
}
.hc-trigger::before { content: ""; position: absolute; inset: -6px; }                 /* a little more to tap than what you see */
.hc-trigger[data-side="left"] { right: auto; left: 0; transform: translate3d(calc(var(--hc-out, 44%) * -1), 0, 0); }
.hc-trigger[data-near], .hc-trigger:hover, .hc-trigger:focus-visible { --hc-out: 12%; }
.hc-trigger[data-away] { --hc-out: 120%; visibility: hidden; transition: transform .6s cubic-bezier(.2, 1.3, .35, 1), visibility 0s linear .6s; }   /* out of sight means out of the tab order too */
.hc-trigger[data-snap] { transition: none; }
.hc-trigger:focus-visible, .hc-wrap button:focus-visible, .hc-wrap textarea:focus-visible, .hc-wrap input:focus-visible { outline: 3px solid var(--hc-blue-ring); outline-offset: 3px; }
.hc-trigger[data-side="left"] .hc-art { transform: scaleX(-1); }                      /* she looks inward from either edge */

.hc-art { display: block; width: 100%; height: 100%; overflow: visible; }
.hc-body { transform-box: view-box; transform-origin: 110px 192px; animation: hc-breathe 5.2s ease-in-out infinite; }
.hc-tilt { transform: rotate(-24deg); transition: transform .4s cubic-bezier(.3, 1.5, .4, 1); }
.hc-art :is(.e-closed, .e-joy, .m-smile, .m-flat, .m-sorry) { fill: none; stroke: #1e1a1b; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hc-art :is(.e-open ellipse, .m-o) { fill: #1e1a1b; }
.hc-pupil { transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .18s ease-out; }
.hc-art .e-open { transform-box: fill-box; transform-origin: center; }

/* Moods: which parts of the face are showing, and how the head tilts */
.hc-art :is(.e-closed, .e-joy, .e-open, .m-smile, .m-big, .m-o, .m-flat, .m-sorry, .hc-cheeks, .hc-hearts) { display: none; }
.hc-art[data-mood="content"] :is(.e-closed, .m-smile) { display: inline; }
.hc-art[data-mood="peek"] :is(.e-open, .m-smile) { display: inline; }
.hc-art[data-mood="hello"] :is(.e-open, .m-big, .hc-cheeks) { display: inline; }
.hc-art[data-mood="wow"] :is(.e-open, .m-o) { display: inline; }
.hc-art[data-mood="think"] :is(.e-open, .m-flat) { display: inline; }
.hc-art[data-mood="joy"] :is(.e-joy, .m-big, .hc-cheeks, .hc-hearts) { display: inline; }
.hc-art[data-mood="sorry"] :is(.e-open, .m-sorry) { display: inline; }
.hc-art[data-mood="peek"] .hc-tilt { transform: rotate(-20deg); }
.hc-art[data-mood="hello"] .hc-tilt { transform: rotate(-8deg); }
.hc-art[data-mood="wow"] .hc-tilt { transform: rotate(-14deg); }
.hc-art[data-mood="think"] .hc-tilt { transform: rotate(-34deg); }
.hc-art[data-mood="joy"] .hc-tilt { transform: rotate(-10deg); }
.hc-art[data-mood="sorry"] .hc-tilt { transform: rotate(-30deg); }
.hc-art[data-mood="hello"] .hc-body { animation: hc-hello 1.1s ease-in-out 3; }
.hc-art[data-mood="wow"] .hc-body { animation: hc-wow .35s cubic-bezier(.2, 1.6, .4, 1); }
.hc-art[data-mood="joy"] .hc-body { animation: hc-joy .6s ease-in-out 6; }
.hc-art[data-mood="think"] .hc-body { animation: hc-breathe 2.4s ease-in-out infinite; }
.hc-art .e-open { animation: hc-eye .22s cubic-bezier(.2, 1.6, .4, 1) both, hc-blink 4.6s .6s infinite; }
.hc-heart { transform-box: fill-box; transform-origin: center; animation: hc-heart 1.5s ease-out infinite; }
.hc-heart.h2 { animation-delay: .35s; }
.hc-heart.h3 { animation-delay: .7s; }

/* The last slide: she sits on the page, where the sign-up button was */
.contact .signup[hidden] { display: none !important; }
.contact.has-assistant { padding: 0; background: none; box-shadow: none; }
.contact.has-assistant .actions { display: block; }
.hc-inline {
  display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 8px 14px 8px 8px;
  border: 0; border-radius: 22px; cursor: pointer; text-align: right; font: inherit; color: var(--ink, #2d2926);
  background: var(--accent-soft, #fcefe4); box-shadow: inset 0 0 0 1.5px var(--accent, #e8661a), var(--shadow, 0 10px 24px rgba(45,41,38,.12));
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .2s ease;
}
.hc-inline:active { transform: scale(.985); }
.hc-inline-art { flex: none; width: 92px; height: 83px; }
.hc-inline-art .hc-art { filter: drop-shadow(0 5px 8px rgba(45,41,38,.18)); }
.hc-inline-say { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hc-inline-say b { font: 800 18px/1.2 Rubik, "Arial Hebrew", system-ui, sans-serif; }
.hc-inline-say > span { font-size: 14px; line-height: 1.4; color: var(--ink-soft, #574e48); }
.hc-inline-cta { font: normal 800 14px/1 Rubik, "Arial Hebrew", system-ui, sans-serif; color: var(--button-ink, #fff); background: var(--button-bg, #3d4785); border-radius: 999px; padding: 8px 16px; margin-top: 2px; }
.hc-inline:focus-visible { outline: 3px solid var(--accent, #e8661a); outline-offset: 3px; }
html[data-a11y-zoom] .hc-inline-say > span { display: none; }
html[data-a11y-zoom] .hc-inline-art { width: 70px; height: 63px; }
@media (max-height: 680px) {
  .hc-inline { gap: 8px; padding-block: 4px; }
  .hc-inline-art { width: 74px; height: 67px; }
  .hc-inline-say > span { display: none; }
}

/* "Hi!" next to her, once */
.hc-bubble {
  position: fixed; z-index: 21; max-width: min(200px, calc(100vw - 120px)); padding: 10px 14px; border-radius: 18px; pointer-events: none;
  background: var(--raised, #ffffff); color: var(--ink, #2d2926); font: 700 14px/1.35 Rubik, "Arial Hebrew", system-ui, sans-serif;
  box-shadow: 0 2px 0 rgba(45,41,38,.04), 0 10px 24px rgba(45,41,38,.16);
  opacity: 0; transform: translateY(6px) scale(.92); transition: opacity .35s ease, transform .45s cubic-bezier(.2, 1.3, .35, 1);
}
.hc-bubble.on { opacity: 1; transform: none; }
.hc-bubble::after { content: ""; position: absolute; top: 16px; width: 12px; height: 12px; background: inherit; border-radius: 3px; transform: rotate(45deg); display: none; }
.hc-bubble[data-pos="beside"]::after { display: block; }
.hc-bubble[data-pos="beside"][data-side="right"]::after { right: -5px; }
.hc-bubble[data-pos="beside"][data-side="left"]::after { left: -5px; }

/* The window: a sheet from the bottom on phones, a card on wide screens */
.hc-wrap { position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: 40; display: flex; align-items: flex-end; justify-content: center; font-family: Rubik, "Arial Hebrew", system-ui, sans-serif; }
.hc-scrim { position: absolute; inset: 0; background: rgba(45,41,38,.45); animation: hc-fade .3s ease both; }
.hc-panel {
  position: relative; width: 100%; max-width: 480px; height: min(660px, 92%); display: flex; flex-direction: column;
  background: var(--ground, #f9f4f2); color: var(--ink, #2d2926); border-radius: 28px 28px 0 0; outline: none;
  box-shadow: 0 -10px 40px rgba(45,41,38,.2); animation: hc-up .45s cubic-bezier(.2,.8,.2,1) both;
}
.hc-head { display: flex; align-items: center; gap: 12px; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1.5px solid var(--line-soft, #ede3dc); }
.hc-avatar { width: 54px; height: 49px; flex: none; }
.hc-who { flex: 1; min-width: 0; }
.hc-who h2 { margin: 0; font: 900 20px/1.1 Nunito, Rubik, sans-serif; letter-spacing: -0.01em; direction: ltr; text-align: right; }
.hc-who p { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft, #574e48); }
.hc-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--hc-blue-soft); color: var(--ink, #2d2926); display: grid; place-items: center; cursor: pointer; flex: none; }
.hc-close svg { width: 18px; height: 18px; }
.hc-note { margin: 0; padding: 8px max(16px, env(safe-area-inset-right, 0px)); font-size: 12.5px; line-height: 1.45; color: var(--ink-faint, #71665f); background: var(--hc-blue-soft); }

.hc-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.hc-msg { max-width: 86%; padding: 11px 15px; border-radius: 20px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; animation: hc-in .35s cubic-bezier(.2,.8,.2,1) both; }
.hc-msg.haley { align-self: flex-start; background: var(--raised, #ffffff); color: var(--ink, #2d2926); border-top-right-radius: 6px; box-shadow: 0 2px 0 rgba(45,41,38,.04), 0 6px 16px rgba(45,41,38,.08); }
.hc-msg.user { align-self: flex-end; background: var(--button-bg, #3d4785); color: var(--button-ink, #ffffff); border-top-left-radius: 6px; }
.hc-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 15px 16px; border-radius: 20px; border-top-right-radius: 6px; background: var(--raised, #fff); box-shadow: 0 2px 0 rgba(45,41,38,.04), 0 6px 16px rgba(45,41,38,.08); }
.hc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint, #71665f); opacity: .5; animation: hc-dot 1.2s ease-in-out infinite; }
.hc-typing i:nth-child(2) { animation-delay: .15s; }
.hc-typing i:nth-child(3) { animation-delay: .3s; }

.hc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
.hc-chip { font: 700 14px/1.2 Rubik, "Arial Hebrew", system-ui, sans-serif; color: var(--ink, #2d2926); background: var(--hc-blue-soft); border: 1.5px solid var(--hc-blue-line); border-radius: 999px; padding: 9px 14px; min-height: 40px; cursor: pointer; }
.hc-chip.primary { background: var(--hc-blue-cta); border-color: var(--hc-blue-cta); color: #ffffff; }

/* The signup card inside the chat: details go to the waitlist, never to the model */
.hc-card { align-self: stretch; background: var(--raised, #fff); border: 1.5px solid var(--hc-blue-hair); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 10px; animation: hc-in .35s cubic-bezier(.2,.8,.2,1) both; }
.hc-card h3 { margin: 0; font-size: 17px; font-weight: 800; }
.hc-card label { font-size: 14px; font-weight: 700; display: block; margin-bottom: 4px; }
.hc-card label small { font-weight: 500; color: var(--ink-faint, #71665f); }
.hc-card input[type="text"], .hc-card input[type="tel"], .hc-card input[type="email"] { width: 100%; height: 48px; padding: 0 14px; font: 500 16px/1.2 Rubik, "Arial Hebrew", system-ui, sans-serif; color: var(--ink, #2d2926); background: var(--ground, #f9f4f2); border: 1.5px solid var(--line-soft, #ede3dc); border-radius: 14px; outline: none; }
.hc-card input:focus { border-color: var(--hc-blue); box-shadow: 0 0 0 3px rgba(77,163,248,.22); }
.hc-card [aria-invalid="true"] { border-color: #b4310a; }
.hc-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; }
.hc-go { font: 800 16px/1 Rubik, "Arial Hebrew", system-ui, sans-serif; color: var(--button-ink, #fff); background: var(--button-bg, #3d4785); border: 0; border-radius: 999px; height: 50px; cursor: pointer; }
.hc-go[disabled] { opacity: .6; cursor: default; }
.hc-err { margin: 0; font-size: 14px; font-weight: 700; color: #b4310a; }
.hc-fine { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-faint, #71665f); }

/* The message box */
.hc-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-top: 1.5px solid var(--line-soft, #ede3dc); background: var(--ground, #f9f4f2); }
.hc-form textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 12px 14px; font: 500 16px/1.4 Rubik, "Arial Hebrew", system-ui, sans-serif; color: var(--ink, #2d2926); background: var(--raised, #fff); border: 1.5px solid var(--line-soft, #ede3dc); border-radius: 20px; outline: none; }
.hc-form textarea:focus { border-color: var(--hc-blue); box-shadow: 0 0 0 3px rgba(77,163,248,.22); }
.hc-send { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--button-bg, #3d4785); color: var(--button-ink, #fff); }
.hc-send[disabled] { opacity: .5; cursor: default; }
.hc-send svg { width: 22px; height: 22px; transform: scaleX(-1); }
.hc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 340px) {
  .hc-trigger { --hc-pet: 66px; }
}
@media (min-width: 640px) {
  .hc-trigger { --hc-pet: 96px; }
  .hc-wrap { align-items: center; }
  .hc-panel { border-radius: 28px; }
}
@keyframes hc-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes hc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hc-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hc-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 1.05); } }
@keyframes hc-hello { 0%, 100% { transform: rotate(0); } 22% { transform: rotate(-8deg); } 48% { transform: rotate(7deg); } 74% { transform: rotate(-4deg); } }
@keyframes hc-wow { from { transform: scale(.9, .86); } to { transform: scale(1, 1); } }
@keyframes hc-joy { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-9px) scale(.97, 1.04); } 70% { transform: translateY(0) scale(1.04, .94); } }
@keyframes hc-eye { from { transform: scale(.4, .2); } to { transform: scale(1, 1); } }
@keyframes hc-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes hc-heart { 0% { transform: translateY(8px) scale(.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-34px) scale(1.1); opacity: 0; } }
@keyframes hc-dot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hc-trigger, .hc-bubble, .hc-tilt, .hc-pupil, .hc-inline { transition: none !important; }
  .hc-body, .hc-art .e-open, .hc-heart, .hc-msg, .hc-card, .hc-typing i, .hc-panel, .hc-scrim { animation: none !important; }
  .hc-heart { opacity: 1; }
  .hc-log { scroll-behavior: auto; }
}