*{box-sizing:border-box}body{margin:0;background:#f1f5f9;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033;display:grid;min-height:100vh;place-items:center}main{background:#fff;width:min(100%,560px);height:min(100vh,720px);display:flex;flex-direction:column;box-shadow:0 16px 55px #1e293b22}header{padding:20px 24px;background:#2563eb;color:#fff;display:flex;gap:11px;align-items:center}header strong,header small{display:block}header small{opacity:.8;font-size:13px;margin-top:3px}.dot{width:10px;height:10px;background:#4ade80;border-radius:50%}.email-row{padding:12px 16px;border-bottom:1px solid #e5e7eb}.email-row input{width:100%;border:1px solid #cbd5e1;border-radius:8px;padding:9px 10px;font:inherit;font-size:14px}#messages{padding:22px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:12px}.hint{color:#64748b;text-align:center;margin:auto}.message{padding:10px 13px;max-width:78%;border-radius:15px;white-space:pre-wrap;line-height:1.45}.message img{display:block;max-width:100%;max-height:300px;border-radius:9px;margin-top:7px}.message img:first-child{margin-top:0}.visitor{align-self:flex-end;background:#2563eb;color:#fff;border-bottom-right-radius:4px}.agent{align-self:flex-start;background:#e8edf5;border-bottom-left-radius:4px}form{border-top:1px solid #e5e7eb;padding:14px;display:flex;gap:10px}#image-button{padding:0;background:transparent;color:#2563eb;font-size:21px;box-shadow:none}textarea{resize:none;flex:1;border:1px solid #cbd5e1;border-radius:10px;padding:10px;font:inherit;max-height:120px}button{border:0;background:#2563eb;color:#fff;font:inherit;border-radius:10px;padding:0 18px;cursor:pointer}button:disabled{opacity:.55}