/* me.lemonade.com chat flow — white page, left-aligned messages, typing dots, white bordered answer cards */
body.chatbody{background:#fff;padding-bottom:0}
.chat-top{position:sticky;top:0;background:#fff;z-index:10;display:flex;align-items:center;gap:16px;padding:14px 20px;height:64px}
.chat-top .back{font-size:34px;line-height:1;color:var(--ink-2);width:36px;text-align:center}
.chat-top .help{font-weight:700;color:var(--ink-3);font-size:15px}
.prog{flex:1;height:4px;background:var(--gray-3);border-radius:2px;overflow:hidden}
.prog .bar{height:100%;width:2%;background:var(--accent);transition:width .5s cubic-bezier(.4,0,.2,1)}
.chat{max-width:760px;margin:0 auto;padding:16px 24px 140px}
.agent{display:flex;align-items:center;gap:12px;margin:12px 0 28px}
.agent img{width:52px;height:52px;border-radius:14px;object-fit:cover}
.agent b{display:block;font-size:17px}
.agent span{font-size:14px;color:var(--ink-3)}
.msg{font-size:24px;font-weight:700;color:var(--ink-2);line-height:1.4;margin:0 0 24px;max-width:680px;animation:up .35s ease both}
.msg.me{color:var(--ink);font-weight:700;background:var(--bg);display:inline-block;padding:14px 22px;border-radius:22px;font-size:20px;margin-left:auto;margin-right:0;float:right;clear:both}
.msg.me + .msg,.msg.me + .typing{clear:both}
.msg small{display:block;font-size:17px;font-weight:400;color:var(--ink-3);margin-top:6px}
.msg .pink{color:var(--accent)}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.typing{display:inline-flex;gap:6px;padding:16px 20px;background:#fff;border:1px solid var(--gray-3);border-radius:22px;box-shadow:var(--shadow);margin:0 0 24px;clear:both}
.typing i{width:9px;height:9px;border-radius:50%;background:var(--gray);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
/* answer cards — the white bordered buttons from the screenshot */
.opts{display:flex;flex-direction:column;gap:14px;max-width:380px;clear:both;margin-bottom:28px}
.opts.wide{max-width:560px}
.opts.grid{display:grid;grid-template-columns:1fr 1fr;max-width:560px}
.opt{height:auto;min-height:104px;background:#fff;border:1px solid var(--gray-2);border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.08);font:inherit;font-size:22px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;padding:22px;text-align:center;animation:up .35s ease both}
.opt:hover{border-color:var(--accent);box-shadow:0 6px 24px rgba(31,75,255,.15)}
.opt:active{transform:scale(.985)}
.opt.sel{border-color:var(--accent);background:var(--accent-50);color:var(--accent)}
.opt small{display:block;font-size:14px;font-weight:400;color:var(--ink-3);margin-top:6px}
.opts .opt:nth-child(2){animation-delay:.08s}.opts .opt:nth-child(3){animation-delay:.16s}.opts .opt:nth-child(4){animation-delay:.24s}.opts .opt:nth-child(5){animation-delay:.32s}.opts .opt:nth-child(6){animation-delay:.4s}.opts .opt:nth-child(7){animation-delay:.48s}
.chips{display:flex;flex-wrap:wrap;gap:12px;max-width:640px;clear:both;margin-bottom:18px}
.chip{padding:14px 20px;border:1px solid var(--gray-2);border-radius:var(--pill);background:#fff;font:inherit;font-size:17px;font-weight:700;color:var(--ink-2);cursor:pointer;box-shadow:var(--shadow);animation:up .35s ease both}
.chip.sel{border-color:var(--accent);background:var(--accent-50);color:var(--accent)}
.next{margin:6px 0 28px;clear:both}
/* underlined text input (Lemonade style) */
.field{clear:both;max-width:520px;margin-bottom:28px;animation:up .35s ease both}
.field label{display:block;font-size:14px;font-weight:700;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.field input{width:100%;border:0;border-bottom:2px solid var(--gray-2);font:inherit;font-size:26px;font-weight:700;color:var(--ink);padding:10px 0;outline:none;background:transparent;border-radius:0}
.field input:focus{border-color:var(--accent)}
.field .err{color:var(--red);font-size:14px;margin-top:6px;display:none}
.field.bad .err{display:block}.field.bad input{border-color:var(--red)}
.field .btn{margin-top:18px}
/* quote card */
.quote{clear:both;background:#fff;border:1px solid var(--gray-3);border-radius:20px;box-shadow:var(--shadow-lg);padding:30px;max-width:560px;margin-bottom:28px;animation:up .45s ease both}
.quote .k{font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.quote h3{font-size:28px;margin-bottom:4px}
.quote .price{font-size:52px;font-weight:900;color:var(--ink);line-height:1;margin:16px 0 4px}
.quote .price small{font-size:18px;font-weight:700;color:var(--ink-3)}
.quote ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.quote li{display:flex;gap:10px;align-items:flex-start;font-size:17px;color:var(--ink-2)}
.quote li::before{content:"✓";color:var(--accent);font-weight:900}
.quote .ag{margin-top:22px;display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--gray-3);font-size:15px;color:var(--ink-3)}
.quote .ag img{width:40px;height:40px;border-radius:11px}
.quote .ag b{color:var(--ink)}
.quote .btns{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:10px;height:14px;background:var(--accent);animation:fall 2.6s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}
@media(max-width:600px){.msg{font-size:21px}.opt{font-size:19px;min-height:88px;padding:18px}.opts.grid{grid-template-columns:1fr}.field input{font-size:22px}.quote .price{font-size:42px}}
.chat-top .back{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.chat-top .help{min-height:44px;display:flex;align-items:center;padding:0 6px}