*{box-sizing:border-box}html,body{margin:0;height:100%;background:#e9eef2;font:16px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#111}
.phone{max-width:480px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;background:#fff;box-shadow:0 0 30px rgba(0,0,0,.08)}
header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #e5e5ea;background:#f7f7f9}
.av{width:40px;height:40px;border-radius:50%;background:#2f6b3a;color:#fff;display:grid;place-items:center;font-weight:700}
.nm{font-weight:600}.sub{font-size:13px;color:#666}header button{margin-left:auto;border:1px solid #ccc;background:#fff;border-radius:14px;padding:4px 12px;font-size:13px;cursor:pointer}
.preview{font-size:12px;color:#666;text-align:center;padding:6px;background:#fffbea;border-bottom:1px solid #f0e6b8}
main{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:6px}
.b{max-width:80%;padding:9px 13px;border-radius:18px;white-space:pre-wrap;word-wrap:break-word}
.them{align-self:flex-start;background:#e9e9eb}.me{align-self:flex-end;background:#0b84ff;color:#fff}.typing{color:#888}
.hint{color:#888;text-align:center;font-size:14px;margin-top:20px}
form{display:flex;gap:8px;padding:10px;border-top:1px solid #e5e5ea;padding-bottom:max(10px,env(safe-area-inset-bottom))}
input{flex:1;border:1px solid #ccc;border-radius:20px;padding:10px 14px;font-size:16px;outline:none}
form button{border:0;background:#0b84ff;color:#fff;border-radius:20px;padding:0 16px;font-weight:600;cursor:pointer}