*{box-sizing:border-box}
html,body{width:100%;max-width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;margin:0;display:flex;flex-direction:column;font:14px Arial;background:#08172f;color:#fff;touch-action:pan-y}
header{flex:0 0 auto;display:grid;padding:18px 64px 16px 16px;background:linear-gradient(135deg,#6d3cff,#a64fff)}
header strong{font-size:15px}
header small{margin-top:4px;opacity:.8}
.messages{flex:1 1 auto;width:100%;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 20px;scrollbar-width:thin}
.welcome{color:#bbc7df}
.msg{max-width:84%;padding:10px 12px;border-radius:14px;margin:8px 0;line-height:1.45;overflow-wrap:anywhere}
.msg.visitor{margin-left:auto;background:#6d3cff}
.msg.admin{background:#183565}
.msg small{display:block;opacity:.65;margin-top:4px;text-align:right}
.send{flex:0 0 auto;display:grid;width:100%;min-width:0;gap:7px;padding:10px 12px max(12px,env(safe-area-inset-bottom));border-top:1px solid #ffffff18;background:#08172f}
.send input,.send textarea{display:block;width:100%;min-width:0;font-size:16px;border:1px solid #ffffff22;border-radius:10px;padding:11px;background:#0d2044;color:#fff}
.send textarea{min-height:58px;max-height:110px;resize:none}
.send button{min-height:44px;border:0;border-radius:10px;padding:11px;background:#ff8728;color:#fff;font-weight:800;touch-action:manipulation}
@media(max-width:600px){header{padding-top:max(18px,env(safe-area-inset-top))}.messages{padding-bottom:12px}.send{gap:6px}}