*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0b141a;color:#e9edef;display:grid;place-items:center}
.phone{width:100%;max-width:440px;height:100vh;max-height:820px;display:flex;flex-direction:column;background:#0b141a;border:1px solid #222d34}
.top{display:flex;gap:10px;align-items:center;padding:10px 14px;background:#202c33}
.top small{display:block;color:#8696a0;font-size:12px}
.av{width:38px;height:38px;border-radius:50%;background:#00a884;display:grid;place-items:center;font-weight:700;color:#0b141a}
.log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:6px;background:#0b141a}
.msg{max-width:82%;padding:7px 10px;border-radius:8px;font-size:14.5px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word}
.bot{align-self:flex-start;background:#202c33}.me{align-self:flex-end;background:#005c4b}.err{align-self:center;background:#3b2a20;color:#f5c9a8;font-size:13px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:6px 10px;background:#0b141a}
.chips button{flex:none;border:1px solid #00a88466;background:transparent;color:#5fe0c0;border-radius:16px;padding:5px 11px;font-size:13px;cursor:pointer}
.bar{display:flex;gap:8px;padding:8px 10px;background:#202c33}
.bar input{flex:1;border:0;border-radius:20px;padding:10px 14px;background:#2a3942;color:#e9edef;font-size:15px;outline:none}
.bar button{border:0;border-radius:50%;width:42px;background:#00a884;color:#0b141a;font-size:17px;cursor:pointer}
.disc{font-size:11px;text-align:center;color:#8696a0;padding:6px 8px 10px;background:#202c33}