*{box-sizing:border-box}body{height:100vh;margin:0;font:15px system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}#root,.app{height:100%}.app{display:grid;grid-template-columns:380px 1fr}.pane{display:flex;border-right:1px solid #ddd;flex-direction:column;min-height:0}header{display:flex;color:#fff;background:#008069;align-items: center;gap:12px;padding:10px 14px;font-weight:600}header input{font:inherit;border:0;border-radius:8px;flex:1;padding:8px 12px}header span{opacity:.9;font-size:13px}.scroll{overflow-y:auto;display:flex;flex-direction:column;flex:1;gap:4px;padding:12px 8%}.agent .scroll{padding:12px}.chat-bg{background:#efeae2}.bubble{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border-radius:8px;max-width:70%;padding:6px 9px;box-shadow:0 1px .5px #0002}.bubble.in{align-self: flex-start}.bubble.user{background:#d9fdd3;align-self: flex-end}.bubble.agent{align-self: flex-start}.sender{font-size:13px;font-weight:600}.time{color:#667781;text-align:end;font-size:11px}.bubble img,.bubble video{display:block;border-radius:6px;max-width:100%;max-height:320px}.day,.system{text-align:center;color:#54656f;background:#fff;border-radius:8px;align-self: center;width:-moz-fit-content;width:fit-content;margin:8px auto;padding:4px 10px;font-size:12px}.system{background:#fff5c4}form{background:#f0f2f5;padding:10px}form input{font:inherit;border:0;border-radius:8px;width:100%;padding:10px 14px}