:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;--pink:#F15182;--turquoise:#2BC4B6;--ink:#373534;--gray:#8996A0;--canvas:#f3f9f8;color:var(--ink);background:var(--canvas)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;overscroll-behavior:none}main{position:fixed;top:var(--jc-visible-top,0px);left:0;width:100%;height:var(--jc-visible-height,100dvh);min-height:0;display:flex;flex-direction:column;overflow:hidden;background-color:var(--canvas);background-image:radial-gradient(#8996a01c 1px,transparent 1px);background-size:20px 20px}
header{display:flex;align-items:center;gap:14px;flex-shrink:0;min-height:116px;padding:12px 24px;background:var(--turquoise);color:var(--ink);border-bottom:4px solid var(--pink);box-shadow:0 1px 5px #37353414;z-index:1}.brand{display:inline-flex;align-items:center;gap:16px;min-width:0;color:var(--ink);text-decoration:none;border-radius:12px}.brand strong{font-size:22px;letter-spacing:-.5px;font-weight:800;white-space:nowrap}.brand:hover strong{text-decoration:underline;text-underline-offset:5px}.brand-logo{display:block;flex-shrink:0;width:88px;height:92px;padding:6px;object-fit:contain;background:white;border-radius:12px}
button{font:inherit;font-weight:750;border:0;border-radius:24px;background:var(--turquoise);color:var(--ink);padding:13px 21px;cursor:pointer;min-height:46px}button:hover{background:var(--ink);color:white}button:disabled{opacity:.55;cursor:wait}#reset{margin-left:auto;flex-shrink:0;font-size:12px;white-space:nowrap;background:white;color:var(--ink);border:1px solid #37353433;padding:10px 15px;min-height:42px}#reset:hover{background:var(--ink);color:white}
#welcome{width:calc(100% - 36px);max-width:460px;margin:clamp(24px,5vh,48px) auto 20px;padding:26px 28px;background:white;border:1px solid #8996a038;border-top:4px solid var(--pink);border-radius:0 16px 16px 16px;box-shadow:0 2px 6px #37353410;overflow-y:auto;min-height:0}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:800;color:var(--ink);margin-top:0;padding-left:10px;border-left:3px solid var(--turquoise)}h1{font-size:30px;line-height:1.16;font-weight:750;letter-spacing:-.9px;white-space:pre-line;margin:17px 0 13px}#intro{font-size:14px;line-height:1.65;color:var(--ink);margin:0 0 20px}label{display:block;font-size:13px;font-weight:700;margin:15px 0 7px}input,select,textarea{font:inherit;width:100%;max-width:100%;color:var(--ink);background:white;border:1px solid var(--gray);border-radius:10px;padding:12px}input,select{font-size:16px}input::placeholder,textarea::placeholder{color:#686c70;opacity:1}select{max-width:230px}#phoneform button{width:100%;margin-top:20px}
#conversation{display:flex;flex-direction:column;flex:1;min-height:0;padding:0}#messages{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;overflow-anchor:none;padding:24px clamp(16px,4vw,38px) 12px;scroll-behavior:smooth}.bubble{position:relative;clear:both;width:fit-content;max-width:86%;margin:0 auto 14px 0;padding:11px 15px;border-radius:0 12px 12px 12px;background:white;box-shadow:0 1px 2px #37353424;color:var(--ink);font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}.bubble::before{content:"";position:absolute;top:0;left:-7px;border-top:8px solid white;border-left:8px solid transparent}.bubble.user{margin-left:auto;margin-right:0;background:var(--turquoise);border-radius:12px 0 12px 12px}.bubble.user::before{left:auto;right:-7px;border-top-color:var(--turquoise);border-left:0;border-right:8px solid transparent}
#composer{display:flex;align-items:flex-end;gap:10px;flex-shrink:0;margin:0;padding:13px 18px;background:white;border-top:1px solid #8996a044}textarea{flex:1;min-width:0;resize:none;min-height:48px;max-height:140px;border:1px solid #8996a077;border-radius:22px;padding:12px 17px;font-size:16px;line-height:1.5}#composer button{min-height:48px;flex-shrink:0;padding:12px 20px}#status{font-size:13px;line-height:1.5;color:var(--ink);background:#fde8ef;border-left:4px solid var(--pink);padding:12px 20px;margin:0;flex-shrink:0}#status:empty{display:none}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
@media(min-width:800px){#messages{padding-left:max(38px,calc((100% - 700px)/2));padding-right:max(38px,calc((100% - 700px)/2))}}@media(max-width:480px){header{padding:10px 14px;gap:8px;min-height:98px}.brand{gap:10px}.brand strong{font-size:18px}.brand-logo{width:70px;height:74px;padding:5px}#reset{font-size:11px;padding:9px 11px;min-height:40px}#welcome{margin:22px auto;padding:22px;max-width:420px}h1{font-size:27px}#composer{padding:10px;gap:8px}#composer button{padding:12px 16px}.bubble{max-width:89%}}
@media(max-width:350px){.brand strong{font-size:16px}.brand{gap:7px}.brand-logo{width:60px;height:64px}header{padding:10px;min-height:88px}#reset{padding:8px;font-size:10px}}
@media(prefers-reduced-motion:reduce){#messages{scroll-behavior:auto}}

@media(max-height:500px) and (max-width:700px){
  header{min-height:62px;padding:6px 12px;border-bottom-width:3px}
  .brand{gap:9px}.brand-logo{width:44px;height:46px;padding:3px;border-radius:8px}
  .brand strong{font-size:17px}#reset{font-size:11px;min-height:36px;padding:7px 10px}
  #messages{padding:12px 16px 4px}.bubble{font-size:14px;margin-bottom:10px;padding:9px 12px}
  #composer{padding:8px;gap:8px}textarea{height:46px;min-height:46px;padding:10px 13px;line-height:24px}
  #composer button{min-height:46px;padding:10px 14px}
  #status{padding:8px 14px;font-size:12px}#welcome{margin:12px auto;padding:18px}
}
#composer{padding-bottom:max(8px,env(safe-area-inset-bottom))}

#tagline{font-size:16px;font-weight:650;line-height:1.5;margin:0 0 12px;color:var(--ink)}
#begin{display:block;width:100%;margin-top:22px}
#quick-actions{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;padding:0 clamp(16px,4vw,38px) 18px}
#quick-actions button{font-size:13px;line-height:1.35;font-weight:650;min-height:44px;padding:10px 14px;background:white;border:1px solid var(--turquoise);color:var(--ink);border-radius:22px}
#quick-actions button:hover{background:var(--turquoise)}
#phone-panel{flex-shrink:0;padding:12px 18px;background:white;border-top:2px solid var(--pink);max-height:55%;overflow-y:auto}
#phone-panel label{margin-top:0}#phoneform{max-width:600px;margin:auto}#phoneform input{padding:11px 13px}
.phone-actions{display:flex;gap:10px;margin-top:10px}.phone-actions button{flex:1;min-height:44px}
#phoneform .phone-actions button{width:auto;margin-top:0}
#phonecancel{background:white;border:1px solid var(--gray);color:var(--ink)}#phonecancel:hover{background:var(--canvas)}
@media(max-height:500px) and (max-width:700px){#phone-panel{padding:8px 12px}.phone-actions{margin-top:7px}.phone-actions button{min-height:36px;padding:7px 12px}#quick-actions{gap:6px;padding:0 12px 10px}#quick-actions button{font-size:12px;min-height:38px;padding:8px 11px}}

.typing{padding:13px 18px;min-width:65px;line-height:1}
.typing-dots{display:inline-flex;align-items:center;gap:5px;height:14px}
.typing-dots i{display:block;width:7px;height:7px;background:var(--gray);border-radius:50%;animation:jc-typing 1.1s ease-in-out infinite}
.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes jc-typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.typing-dots i{animation:none}}