*{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:6fr 5fr}.pane{display:flex;border-right:1px solid #ddd;flex-direction:column;min-height:0}header{display:flex;color:#fff;background:#008069;flex-shrink:0;align-items: center;gap:12px;height:56px;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}.login{display:grid;background:#efeae2;place-items: center;height:100%}.login form{display:flex;background:#fff;border-radius:12px;flex-direction:column;gap:12px;width:300px;padding:28px;box-shadow:0 2px 8px #0002}.login h1{color:#008069;text-align:center;margin:0;font-size:22px}.login input{font:inherit;border:1px solid #ccc;border-radius:8px;padding:10px 14px}.login button{color:#fff;font:inherit;cursor:pointer;background:#008069;border:0;border-radius:8px;padding:10px;font-weight:600}.error{color:#c62828;font-size:13px}