body{margin:0;font-family:tahoma;background:#0f172a;color:#fff;height:100vh;overflow:hidden}
.center{display:flex;align-items:center;justify-content:center;height:100vh}
.card{background:#020617;padding:20px;border-radius:10px}
header{position:fixed;top:0;width:100%;background:#020617;padding:8px;display:flex;gap:10px}
#chatBox{position:absolute;top:50px;bottom:60px;width:100%;overflow:auto;padding:10px}
.msg{max-width:70%;margin:6px;display:flex;flex-direction:column}
.me{align-self:flex-end}
.other{align-self:flex-start}
.bubble{padding:10px 14px;border-radius:16px;background:#4f46e5}
.other .bubble{background:#1e293b}
.time{font-size:11px;opacity:.5;margin-top:2px}
.inputBox{position:fixed;bottom:0;width:100%;display:flex;padding:10px;background:#020617}
input{flex:1;padding:10px;border-radius:8px;border:0}
button{background:#4f46e5;color:#fff;border:0;padding:10px;border-radius:8px}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);align-items:center;justify-content:center}
.modal form{background:#020617;padding:20px;border-radius:12px}