*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#fff}#app{height:100%}.chat{display:flex;flex-direction:column;height:100%}.chat__messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.msg{max-width:80%;padding:8px 12px;border-radius:12px;font-size:.95rem;line-height:1.35;white-space:pre-wrap;word-break:break-word}.msg--visitor{align-self:flex-end;background:#2563eb;color:#fff;border-bottom-right-radius:4px}.msg--staff{align-self:flex-start;background:#f1f5f9;color:#0f172a;border-bottom-left-radius:4px}.msg{position:relative;padding-bottom:16px}.msg__time{position:absolute;right:8px;bottom:3px;font-size:.65rem;opacity:.7}.msg-day{align-self:center;font-size:.7rem;opacity:.7;margin:4px 0}.msg--pending{opacity:.6}.chat__file{display:none}.chat__attach{background:transparent;border:1px solid #cbd5e1;border-radius:8px;padding:0 8px;cursor:pointer;font-size:1rem}.chat__attach:disabled{opacity:.5;cursor:wait}.att{display:block;margin-top:6px}.att--image img{max-width:220px;max-height:220px;border-radius:8px;display:block}.att--video{max-width:240px;border-radius:8px}.att--audio{width:220px}.att--file{color:inherit;text-decoration:underline;word-break:break-all}.att--missing{font-style:italic;opacity:.7;font-size:.85rem}.msg--failed{outline:2px solid #dc2626}.chat__form{display:flex;gap:8px;padding:10px;border-top:1px solid #e2e8f0}.chat__input{flex:1;padding:10px 12px;border-radius:20px;border:1px solid #cbd5e1;font-size:1rem;min-width:0}.chat__send{padding:10px 16px;border-radius:20px;border:none;background:#2563eb;color:#fff;font-weight:600;cursor:pointer}.chat__status{margin:0;padding:4px 12px;font-size:.8rem;color:#64748b;min-height:1.2em}@media(max-width:480px){.msg{max-width:90%}}