@font-face{font-family:Pretendard;src:url('/demos/chat-implementation/font.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:#203b36;--muted:#6d8078;--line:#d8e2dc;--green:#166c55;--pale:#eaf2ea;--navy:#12343e;--cream:#f4f6ef}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Pretendard,'Apple SD Gothic Neo',sans-serif;-webkit-font-smoothing:antialiased;font-size:14px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #36a68b;outline-offset:3px}button{border:1px solid var(--line);background:#fff;border-radius:7px;color:var(--ink);padding:8px 11px}input{min-width:0}p,h1,h2,ol{margin:0}.demo{max-width:1200px;margin:auto;padding:22px}.demo-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:20px}.eyebrow{font-size:12px;color:var(--green);margin-bottom:7px}h1{font-size:24px;letter-spacing:-.04em}.demo-heading>a{font-size:12px;color:var(--muted);white-space:nowrap}.demo-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:13px;line-height:1.6}.quiet{font-size:12px;background:#ffffff85;padding:7px 10px;white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 45px 248px 45px minmax(0,1fr);gap:10px;align-items:stretch}.region-title{display:flex;align-items:center;justify-content:space-between;height:30px;margin-bottom:8px;font-size:13px}.region-title span{font-size:11px;color:var(--muted)}.app-region,.server-region{min-width:0;display:flex;flex-direction:column}.phone,.server-panel{height:426px;border:1px solid var(--line);border-radius:17px;overflow:hidden;display:flex;flex-direction:column}.phone{background:white}.app-header{display:flex;align-items:center;gap:8px;padding:13px 12px;border-bottom:1px solid var(--line);flex:none;min-height:66px}.avatar{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:10px;background:#edf2ec;font-weight:600;font-size:13px}.app-header h2{font-size:13px;line-height:1.4;white-space:nowrap}.online{font-size:10px;color:#33836b;display:block;margin-top:2px}.online.offline{color:#9d733d}.connection-button{font-size:10px;padding:6px 7px;margin-left:auto;white-space:nowrap}.thread{padding:15px 11px;flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:13px;scrollbar-width:thin;background:#fafbf8}.empty{color:#84958c;font-size:12px;text-align:center;line-height:1.8;margin:auto}.message{display:flex;flex-direction:column;align-items:flex-start;max-width:90%;font-size:12px;line-height:1.65;flex:none}.message.self{align-self:flex-end;align-items:flex-end}.message>small{font-size:10px;color:#7e8c84;margin-bottom:4px}.bubble{background:white;padding:10px 12px;border:1px solid #dce4dc;border-radius:3px 12px 12px 12px;word-break:keep-all;overflow-wrap:anywhere;white-space:pre-wrap;max-width:100%}.self .bubble{background:#dcefe3;border-color:#c4dfce;border-radius:12px 3px 12px 12px}.receipt{font-size:9px;color:#70897c;margin-top:5px;line-height:1.5}.pending .bubble{opacity:.6}.pending.failed .bubble{border-color:#d6a06b;background:#fff1e0}.pending.failed .receipt{color:#9a5c20}.app-notice{padding:6px 10px;font-size:10px;line-height:1.55;min-height:30px;background:#f1f5ed;border-top:1px solid #e5eadf;color:#6c8070}.composer{display:flex;align-items:center;padding:9px;gap:6px;border-top:1px solid var(--line)}.composer input{width:100%;border:1px solid #dce3d9;padding:8px 9px;border-radius:7px;font-size:11px;line-height:1.5;background:#fbfcf9;color:var(--ink)}.composer button{padding:9px 10px;font-size:11px;background:var(--green);color:white;border:0;white-space:nowrap}.app-actions{display:flex;justify-content:space-between;align-items:center;padding:0 10px 10px;font-size:9px;gap:4px}.app-actions label{display:flex;align-items:center;gap:3px;white-space:nowrap}.app-actions input{margin:0;accent-color:var(--green);width:11px;height:11px}.app-actions button{padding:4px 7px;font-size:10px}.server-panel{background:var(--navy);color:#f2f6ee;border-color:#234c56;padding:18px}.live-label{font-size:10px;display:flex;gap:6px;align-items:center;color:#95c5bc}.live-label i{width:6px;height:6px;border-radius:50%;background:#6fd6b5}.server-panel h2{font-size:17px;line-height:1.5;margin-top:13px;letter-spacing:-.035em;min-height:51px;word-break:keep-all}.server-description{font-size:11px;line-height:1.7;color:#b4c8c3;min-height:37px;margin-top:5px;word-break:keep-all}.state-list{padding:0;list-style:none;margin:14px 0;display:flex;flex-direction:column;gap:11px}.state-list li{display:flex;gap:10px;align-items:center;color:#9eb4af}.state-list li>b{font-size:11px;font-weight:400;border:1px solid #41616a;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}.state-list strong{display:block;font-size:12px;font-weight:500}.state-list span{display:block;font-size:10px;margin-top:3px;color:#8ca7a0}.state-list li.done{color:#e7f4e9}.state-list li.done>b{background:#276d5e;border-color:#459c83;color:#aff6d1}.state-list li.done span{color:#97c9b3}.storage{margin-top:auto;display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:11px 0 9px;border-top:1px solid #3a5861}.storage>span{font-size:11px;align-self:center;color:#c6d7cd}.storage>strong{font-size:26px;font-weight:500;line-height:1.1}.storage small{font-size:11px;margin-left:5px}.storage code{grid-column:1/-1;font-family:inherit;font-size:10px;color:#96b3a9}.transport{font-size:9px;line-height:1.6;color:#85a49c}.wire{align-self:center;display:grid;gap:9px;text-align:center;padding-top:33px;font-size:9px;color:#718e7b;min-width:0}.wire span{white-space:nowrap;letter-spacing:-.04em}.wire .track{position:relative;height:2px;background:#b6ccbc;margin:2px 2px 15px}.track:after{content:'';position:absolute;right:-1px;top:50%;transform:translateY(-50%);border-left:5px solid #8dac99;border-top:4px solid transparent;border-bottom:4px solid transparent}.track.back:after{right:auto;left:-1px;border-left:0;border-right:5px solid #8dac99}.track i{position:absolute;width:7px;height:7px;border-radius:50%;background:#23876c;top:50%;left:0;transform:translate(-50%,-50%);opacity:0}.wire.active .track i{animation:packet .9s ease-in-out 2}.wire.active .track.back i{animation-direction:reverse}.wire.active{color:#1d795c}.evidence-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:16px}.evidence-row>p{font-size:12px;color:#52725e;line-height:1.7;max-width:620px;word-break:keep-all}.evidence-row>div{display:flex;gap:6px;flex:none}details{margin-top:12px;border-top:1px solid var(--line);padding-top:11px;font-size:11px;color:var(--muted)}summary{cursor:pointer;width:max-content;max-width:100%;line-height:1.7}#evidence-note{padding-top:12px;line-height:1.7}#records{display:grid;gap:8px;padding-top:10px}.record{background:white;padding:10px;border:1px solid var(--line);border-radius:8px;display:grid;gap:5px;line-height:1.7;overflow-wrap:anywhere}.record b{color:var(--ink);font-weight:500}.record small{font-size:10px}.mobile-tabs{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.embedded .demo-heading{display:none}.embedded .demo{padding:14px 16px}@keyframes packet{0%{left:0;opacity:0}10%,85%{opacity:1}100%{left:100%;opacity:0}}
@media(max-width:1000px) and (min-width:761px){.workspace{grid-template-columns:minmax(0,1fr) 30px 220px 30px minmax(0,1fr);gap:7px}.server-panel{padding:15px}.wire{font-size:8px}.connection-button{font-size:9px;padding:5px}.app-header{padding:12px 9px;gap:5px}.app-header .avatar{display:none}}
@media(max-width:760px){.demo,.embedded .demo{padding:12px}.demo-heading{align-items:start;margin-bottom:14px}.demo-heading h1{font-size:21px;line-height:1.5}.demo-heading>a{font-size:10px}.demo-tools{font-size:12px;align-items:flex-start;margin-bottom:10px;gap:8px}.demo-tools>p{max-width:220px;word-break:keep-all}.quiet{font-size:10px;padding:7px 8px}.mobile-tabs{display:flex;margin-bottom:10px;gap:8px}.mobile-tabs button{flex:1;padding:9px;font-size:12px;background:#e6eddf}.mobile-tabs button[aria-selected=true]{background:#234f42;color:#fff;border-color:#234f42}.mobile-tabs span{font-size:10px;margin-left:3px}.workspace{display:flex;flex-direction:column;gap:10px}.app-region{order:2}.app-region[data-app=B]{display:none}.workspace.show-b .app-region[data-app=A]{display:none}.workspace.show-b .app-region[data-app=B]{display:flex}.region-title{display:none}.phone{height:342px;border-radius:13px}.app-header{min-height:56px;padding:10px 12px}.app-header h2{font-size:13px}.thread{padding:12px;gap:12px}.message{font-size:12px}.bubble{padding:8px 11px}.app-notice{font-size:10px;min-height:26px;padding:5px 10px}.composer{padding:8px 9px}.composer input{font-size:12px;padding:8px}.composer button{font-size:12px}.app-actions{font-size:10px;padding-bottom:8px}.app-actions button{font-size:11px}.server-region{order:1}.server-panel{height:auto;min-height:0;border-radius:11px;padding:11px 13px;display:grid;grid-template-columns:1fr auto;column-gap:12px}.live-label,.server-description,.transport,.wire{display:none}.server-panel h2{font-size:13px;min-height:0;margin:0;line-height:1.5;grid-column:1}.state-list{grid-column:1;grid-row:2;display:flex;flex-direction:row;gap:10px;margin:6px 0 0}.state-list li{gap:0}.state-list li>b,.state-list span{display:none}.state-list strong{font-size:9px;line-height:1.5;font-weight:400;white-space:nowrap}.state-list li.done strong{color:#a5e1b9}.storage{grid-column:2;grid-row:1/3;border:0;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px}.storage>span{font-size:9px;align-self:flex-end}.storage>strong{font-size:24px}.storage code{display:none}.evidence-row{padding-top:10px;display:block}.evidence-row>p{font-size:11px;min-height:35px;line-height:1.6;margin-bottom:8px}.evidence-row>div{gap:7px}.evidence-row>div button{flex:1;padding:8px;font-size:11px}details{margin-top:10px;padding-top:9px;font-size:10px}.record{font-size:11px}.embedded .demo-heading{display:none}}
@media(prefers-reduced-motion:reduce){.wire.active .track i{animation:none;opacity:1;left:50%}*{scroll-behavior:auto!important}}
.demo-tools{font-size:14px}.region-title{font-size:14px}.region-title span{font-size:12px}.message{font-size:14px}.message>small{font-size:11px}.receipt{font-size:11px}.empty{font-size:13px}.app-header h2{font-size:15px}.connection-button{font-size:11px}.composer input{font-size:13px}.composer button{font-size:12px}.app-notice{font-size:11px}.state-list strong{font-size:13px}.state-list span{font-size:11px}.server-description{font-size:12px}.evidence-row>p{font-size:13px}
@media(max-width:760px){.demo-tools{font-size:12px}.message{font-size:13px}.message>small,.receipt{font-size:10px}.app-header h2{font-size:14px}.connection-button{font-size:10px}.composer input{font-size:12px}.app-notice{font-size:10px}.state-list strong{font-size:9px}.state-list span{display:none}.server-description{display:none}.evidence-row>p{font-size:11px}}