:root{font-family:Arial,Helvetica,sans-serif;color:#080808;background:#fff;font-synthesis:none;-webkit-font-smoothing:antialiased;color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,.timeline:focus-visible{outline:2px solid #0084ff;outline-offset:5px}
.portfolio{height:100dvh;min-height:480px;overflow:hidden;position:relative}
.conversation{width:100%;height:100%;position:relative;transition:width .3s ease}
.contact-header{position:absolute;top:22px;left:0;right:0;display:flex;justify-content:center;z-index:2}
.contact-toggle{display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;color:inherit}
.avatar{width:60px;height:60px;border-radius:50%;object-fit:cover}
.contact-name{height:32px;min-width:71px;margin-top:-4px;padding:5px 12px;border:1px solid #e9e9eb;border-radius:20px;background:#fafafa;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.chevron{color:#8e8e93;font-size:26px;line-height:16px;font-weight:400}
.timeline{position:absolute;inset:134px 0 0;overflow-y:auto;scrollbar-width:none;padding-bottom:85px}.timeline::-webkit-scrollbar{display:none}
.message-group{width:380px;max-width:calc(100% - 36px);margin:0 auto}
.timestamp{margin:32px 0 31px;text-align:center;font-size:11px;line-height:13px;color:#8e8e93}.timestamp strong{font-weight:600}
.messages{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.bubble{position:relative;isolation:isolate;margin:0;padding:9px 14px;background:#e9e9eb;border-radius:22px;font-size:16px;line-height:20px;letter-spacing:-.45px;max-width:100%;width:fit-content}
.tail:before{content:"";position:absolute;bottom:0;left:-6px;width:19px;height:18px;background:#e9e9eb;border-bottom-right-radius:14px;z-index:-1}.tail:after{content:"";position:absolute;bottom:0;left:-10px;width:10px;height:22px;background:white;border-bottom-right-radius:10px;z-index:-1}
.second-group .timestamp{margin-top:31px;margin-bottom:57px}.reacted-message{position:relative}.reaction{position:absolute;right:-15px;top:-24px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#0084ff;font-size:16px}.reaction:before,.reaction:after{content:"";position:absolute;background:#0084ff;border:2px solid white;border-radius:50%}.reaction:before{width:9px;height:9px;bottom:-3px;right:-3px}.reaction:after{width:4px;height:4px;bottom:-8px;right:-7px}
.multiline{width:323px;padding-top:9px;padding-bottom:11px}.third-group .timestamp{margin-top:31px;margin-bottom:58px}.inline-blue{color:#0084ff}
.composer-dock{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:404px;max-width:100%;height:76px;padding:15px 24px 17px;z-index:3;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.65) 50%,white);backdrop-filter:blur(2px)}
.composer{position:relative;display:flex;align-items:center;width:100%;height:44px;border:1px solid #e3e3e5;border-radius:25px;background:rgba(248,248,249,.72);padding:0 16px;text-align:left;color:#8e8e93;font-size:16px;letter-spacing:-.4px;overflow:hidden}.sticker{position:absolute;left:68%;top:-9px;font-size:43px;filter:blur(2px);transform:rotate(16deg);opacity:.65}
.sticker{left:68%;top:0;width:48px;height:44px;filter:none;transform:none;opacity:1;mix-blend-mode:multiply}
.contact-panel{position:absolute;top:12px;right:12px;bottom:9px;width:calc(50% - 18px);border-radius:25px;background:#f6f6f8;overflow-y:auto}.contact-panel[hidden]{display:none}
.portfolio.panel-open .conversation{width:calc(50% - 8px)}.portfolio.panel-open .contact-header{top:17px}.portfolio.panel-open .timeline{top:129px}
.contact-cards{width:400px;max-width:calc(100% - 48px);margin:71px auto 40px;display:flex;flex-direction:column;gap:16px}.card{background:white;border-radius:13px;padding:0 16px}.card dl{margin:0}.detail-row{padding:11px 0 13px}.detail-row+.detail-row{border-top:1px solid #ebebed}dt{font-size:12px;line-height:15px;color:#8e8e93;margin-bottom:4px}dd{margin:0;font-size:16px;line-height:20px;letter-spacing:-.45px}a{color:#0084ff;text-decoration:none}a:hover{text-decoration:underline}
.close-panel{position:absolute;right:24px;top:29px;width:34px;height:34px;border:1px solid #eaeaec;border-radius:50%;box-shadow:inset 0 0 0 2px #fafafa;background:#f3f3f5;font-size:24px;font-weight:300;color:#666;line-height:28px}
@media(min-width:1600px){.contact-cards{margin-top:90px}}
@media(max-width:760px){.portfolio.panel-open .conversation{width:100%}.contact-panel{z-index:5;inset:12px;width:auto;box-shadow:0 0 0 12px rgba(255,255,255,.65)}.contact-cards{margin-top:71px;max-width:calc(100% - 40px)}.message-group{width:380px;max-width:calc(100% - 40px)}.composer-dock{width:404px}.bubble{font-size:16px}.desktop-break{display:none}.multiline{max-width:92%}}
/* Measurements checked against sasi.codes; retain the supplied screenshot framing. */
:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif}
.avatar{width:58px;height:58px}
.contact-name{margin-top:-3px;letter-spacing:-.4px;height:31px}
.bubble{font-size:17px;line-height:22px;letter-spacing:-.4px;padding:8px 14px;border-radius:20px;max-width:323px}
.multiline{padding:8px 14px}
.timestamp{line-height:15px;margin-top:30px;margin-bottom:30px}
.second-group .timestamp{margin-top:30px;margin-bottom:56px}
.third-group .timestamp{margin-top:30px;margin-bottom:56px}
.has-reaction .timestamp{margin-bottom:56px}
.reaction{border:0;padding:0;font-size:17px}
.reaction:before,.reaction:after{border:0}
.reaction:before{bottom:-1px;right:-1px}.reaction:after{bottom:-5px;right:-4px}
.composer{padding:0;background:rgba(248,248,249,.5);backdrop-filter:blur(7px) saturate(1.7)}
.composer input{font:inherit;font-size:17px;letter-spacing:-.4px;color:#080808;background:transparent;border:0;border-radius:inherit;width:100%;height:100%;padding:0 18px;outline-offset:2px}
.composer input::placeholder{color:#8e8e93;opacity:1}
.contact-cards{position:relative;top:50%;transform:translateY(-50%);margin:0 auto;padding:32px 0}
.detail-row{padding:10px 0 11px}dd{font-size:17px;line-height:23px;letter-spacing:-.4px}
.card{border-radius:16px}
@media(max-width:760px){.bubble{max-width:85%}.reacted-message{max-width:85%}.reacted-message .bubble{max-width:100%}.contact-cards{margin:0 auto}}
@media(max-height:560px){.contact-cards{top:0;transform:none;padding-top:65px}}
.message-wrap{position:relative;width:fit-content;max-width:85%}
.message-wrap .bubble{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
.messages>.reacted-message{margin-top:26px}
.messages>.message-wrap .reaction{white-space:nowrap}
.timeline-status{text-align:center;margin:40px 20px;color:#8e8e93;font-size:14px}
.animation-fade{animation:chat-fade 1s ease both}
.animation-bounce{animation:chat-bounce 1s ease 2}
.animation-pulse{animation:chat-pulse 1.5s ease 2}
.animation-wave{animation:chat-wave .8s ease 3;transform-origin:center}
.timeline .bubble[class*="animation-"]:not(.animation-visible){animation-play-state:paused}
@keyframes chat-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes chat-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}65%{transform:translateY(-3px)}}
@keyframes chat-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes chat-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.conversation{transition:none}.bubble[class*="animation-"]{animation:none}}
.composer-dock{height:100px;padding-top:10px}.composer input{min-width:0}.composer #contact-send{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;border:0;background:#0084ff;color:white;font-size:25px;margin-right:6px}.composer #contact-send:disabled{opacity:.4}#contact-status{margin:5px 8px 0;font-size:11px;line-height:14px;color:#777;max-height:32px;overflow:auto}.composer .contact-trap{position:absolute;left:-10000px;width:1px;height:1px}.sent-reply{display:flex;flex-direction:column;align-items:flex-end}.sent-reply .timestamp{align-self:center}.sent-bubble{background:#0084ff;color:white;overflow-wrap:anywhere}.delivery-receipt{font-size:11px;color:#8e8e93;margin:5px 4px 0}#contact-tail{padding-bottom:32px}.timeline{padding-bottom:120px}
.composer #contact-input:focus,.composer #contact-input:focus-visible{outline:none;border:0;box-shadow:none}
.composer #contact-send{width:28px;height:28px;min-width:28px;padding:0;margin-right:6px;background:#3b82f6;color:#fff;border:0;border-radius:50%;line-height:1;box-shadow:none}.composer #contact-send svg{display:block;width:18px;height:18px}