:root{color-scheme:light;--chat-canvas:#f9f9fb;--chat-ink:#1c2024;--chat-muted:#60646c;--chat-brand:#2781f6}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body{display:flex;align-items:center;justify-content:center;overflow:hidden;padding:24px;background:#eef1f5;color:var(--chat-ink);font:16px/1.5 system-ui,sans-serif}
main{position:relative;width:100%;max-width:860px;height:calc(100dvh - 48px);max-height:920px;min-height:0;overflow:hidden;border-radius:18px;background:var(--chat-canvas);box-shadow:0 0 0 1px rgb(27 28 29 / 5%),0 12px 40px rgb(27 28 29 / 14%)}
iframe{display:block;width:100%;height:100%;border:0;background:var(--chat-canvas)}
[hidden]{display:none!important}
.connection-state{position:absolute;inset:0;z-index:1;background:var(--chat-canvas);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
.connection-state p{margin:0;color:var(--chat-muted)}
button{min-height:44px;padding:10px 20px;border:0;border-radius:8px;color:#fff;background:var(--chat-brand);font:inherit;cursor:pointer}
button:hover{filter:brightness(.94)}
button:focus-visible{outline:3px solid var(--chat-brand);outline-offset:4px}
@media(max-width:600px){body{padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}main{height:100%;max-height:920px;border-radius:14px}}
@media(max-height:480px){body{padding:8px}main{height:100%;border-radius:10px}}