/* Chat widget — "Leasa", conversational lead capture.
   Self-contained component: scripts/chat.js injects every element under
   .chat-root; no page markup is required beyond including this file and the
   script. Pages without JS simply never get a widget. */

.chat-root{font-family:'Archivo',sans-serif;color:var(--ink-900)}

/* ---------- launcher + teaser ---------- */

.chat-launcher{position:fixed;bottom:24px;right:24px;z-index:80;width:60px;height:60px;border-radius:var(--radius-pill);background:var(--rose-500);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.chat-launcher:hover{transform:translateY(-2px);background:var(--rose-600)}
.chat-launcher:active{transform:translateY(0) scale(.94)}
.chat-launcher:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.chat-launcher svg{display:block;transition:transform var(--dur-fast) var(--ease-out)}
.chat-launcher:hover svg{transform:rotate(-8deg) scale(1.08)}

.chat-teaser{position:fixed;bottom:38px;right:96px;z-index:80;background:var(--ink-900);color:#fff;padding:10px 16px;border-radius:14px 14px 2px 14px;font-size:14px;font-weight:500;box-shadow:var(--shadow-pop)}

/* ---------- panel ---------- */

.chat-panel{position:fixed;bottom:24px;right:24px;z-index:80;width:380px;height:min(640px,calc(100dvh - 48px));background:var(--paper);border-radius:18px;box-shadow:var(--shadow-modal);display:flex;flex-direction:column;overflow:hidden}
@media (max-width:480px){
  .chat-panel{left:12px;right:12px;bottom:12px;width:auto;height:min(620px,calc(100dvh - 24px))}
}

.chat-head{background:var(--ink-900);color:#fff;padding:18px 20px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.chat-avatar{width:28px;height:28px;border-radius:var(--radius-pill);background:var(--rose-500);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.chat-avatar--lg{width:42px;height:42px;font-size:18px}
.chat-head__meta{flex:1;min-width:0}
.chat-head__name{margin:0;font-weight:700;font-size:16px;letter-spacing:-0.01em}
.chat-head__status{margin:0;font-size:12.5px;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:6px}
.chat-dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--lime-400);display:inline-block}
.chat-close{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:22px;line-height:1;padding:4px}
.chat-close:hover{color:#fff}
.chat-close:focus-visible{outline:none;box-shadow:var(--focus-ring)}

.chat-progress{height:3px;background:var(--rose-100);flex-shrink:0}
.chat-progress__bar{height:3px;background:var(--rose-500);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease-out)}

/* ---------- messages ---------- */

.chat-body{flex:1;overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;gap:12px;background:var(--gray-50)}
.chat-msg{display:flex;gap:8px;align-items:flex-end}
.chat-msg--user{justify-content:flex-end}
.chat-msg__bubble{padding:11px 15px;border-radius:14px 14px 14px 2px;font-size:14.5px;line-height:1.5;max-width:82%;background:var(--cream);color:var(--ink-900)}
.chat-msg--user .chat-msg__bubble{border-radius:14px 14px 2px 14px;background:var(--rose-500);color:#fff;font-weight:500}

.chat-typing{background:var(--cream);padding:14px 16px;border-radius:14px 14px 14px 2px;display:flex;gap:5px}
.chat-typing span{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--gray-500);opacity:.6}

.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding-left:36px}
.chat-chip{border:1.5px solid var(--rose-500);color:var(--rose-500);background:var(--paper);padding:9px 16px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.chat-chip:hover{background:var(--rose-500);color:#fff;transform:translateY(-2px)}
.chat-chip:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- composer ---------- */

.chat-composer{padding:12px 14px;background:var(--paper);border-top:1px solid var(--border-subtle);flex-shrink:0}
.chat-error{margin:0;color:var(--error);font-size:12.5px;font-weight:500;padding:0 6px 8px}
.chat-composer__row{display:flex;gap:8px;align-items:center}
.chat-input{flex:1;min-width:0;border:1.5px solid var(--border-subtle);border-radius:var(--radius-pill);padding:11px 18px;font-size:14.5px;font-family:inherit;outline:none;color:var(--ink-900);background:var(--paper)}
.chat-input:focus{border-color:var(--rose-500)}
.chat-input:disabled{background:var(--gray-50)}
.chat-send{width:42px;height:42px;border-radius:var(--radius-pill);background:var(--gray-300);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--dur-fast) var(--ease-out)}
.chat-send.is-ready{background:var(--rose-500)}
.chat-send.is-ready:hover{background:var(--rose-600)}
.chat-send:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.chat-skipwrap{margin:0;text-align:center;padding-top:8px}
.chat-skip{background:none;border:none;color:var(--gray-500);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;text-decoration:underline}
.chat-skip:hover{color:var(--rose-600)}

/* ---------- confirmation ---------- */

.chat-done{flex:1;position:relative;overflow:hidden;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}
.chat-done__badge{width:88px;height:88px;border-radius:var(--radius-pill);background:var(--lime-400);display:flex;align-items:center;justify-content:center}
.chat-done__title{margin:24px 0 0;font-weight:800;font-size:30px;letter-spacing:-0.02em;line-height:1.05;text-transform:uppercase}
.chat-done__note{margin:12px 0 0;color:var(--gray-700);font-size:14.5px;line-height:1.55;max-width:280px}
.chat-done__note b{color:var(--ink-900);font-weight:600}
.chat-done__card{background:var(--paper);border:1px solid var(--border-subtle);border-radius:14px;padding:16px 20px;margin-top:24px;width:100%;max-width:290px}
.chat-done__row{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:13px}
.chat-done__row dt{color:var(--gray-500)}
.chat-done__row dd{margin:0;color:var(--ink-900);font-weight:600;text-align:right}
.chat-restart{background:none;border:none;color:var(--gray-500);font-size:13px;margin-top:14px;cursor:pointer;font-family:inherit;text-decoration:underline}
.chat-restart:hover{color:var(--rose-600)}
.chat-confetti{position:absolute;top:0}

/* ---------- motion (skipped entirely under reduced motion) ---------- */

@media (prefers-reduced-motion:no-preference){
  @keyframes chat-msg-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes chat-panel-in{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
  @keyframes chat-dot-pulse{0%,60%,100%{opacity:.35}30%{opacity:1}}
  @keyframes chat-pulse-ring{0%{box-shadow:0 0 0 0 rgba(232,80,106,.4)}70%{box-shadow:0 0 0 16px rgba(232,80,106,0)}100%{box-shadow:0 0 0 0 rgba(232,80,106,0)}}
  @keyframes chat-pop-in{from{transform:scale(0)}to{transform:scale(1)}}
  @keyframes chat-draw-check{to{stroke-dashoffset:0}}
  @keyframes chat-confetti-fall{0%{transform:translateY(-20px) rotate(0)}80%{opacity:1}100%{transform:translateY(360px) rotate(560deg);opacity:0}}

  /* Arrival plays like an incoming message: the button pops in after a beat,
     pings three times, and the teaser "notification" lands a half-beat later.
     Re-appearances (panel close toggles [hidden]) replay only the short pop. */
  .chat-launcher{animation:chat-arrive .3s var(--ease-out) backwards}
  .chat-launcher--boot{animation:chat-arrive .5s var(--ease-out) 1s backwards,chat-pulse-ring 2.4s 1.6s 3}
  .chat-launcher--boot ~ .chat-teaser{animation-delay:1.5s}
  .chat-teaser{animation:chat-msg-in .4s var(--ease-out) backwards}
  @keyframes chat-arrive{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
  .chat-panel{animation:chat-panel-in .28s var(--ease-out)}
  .chat-msg,.chat-chips{animation:chat-msg-in .3s var(--ease-out)}
  .chat-typing span{animation:chat-dot-pulse 1.1s infinite}
  .chat-typing span:nth-child(2){animation-delay:.15s}
  .chat-typing span:nth-child(3){animation-delay:.3s}
  /* The ready send arrow speaks the site's signature CTA gesture (ds.css). */
  .chat-send.is-ready:hover svg{animation:cta-arrow .5s var(--ease-out)}
  .chat-done__badge{animation:chat-pop-in .45s var(--ease-out) both}
  .chat-done__badge path{stroke-dasharray:26;stroke-dashoffset:26;animation:chat-draw-check .45s var(--ease-out) .35s forwards}
  .chat-done__title,.chat-done__note{animation:chat-msg-in .4s var(--ease-out) .2s both}
  .chat-done__card{animation:chat-msg-in .4s var(--ease-out) .5s both}
  .chat-restart{animation:chat-msg-in .4s var(--ease-out) .75s both}
  .chat-confetti{animation:chat-confetti-fall var(--chat-cf-dur,3s) ease-in var(--chat-cf-delay,0s) infinite}
}
@media (prefers-reduced-motion:reduce){
  .chat-confetti{display:none}
}