*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at top left,#1e293b,#0f172a);font-family:Inter,system-ui,-apple-system,sans-serif;color:#f8fafc;padding:20px}.chat-container{width:100%;max-width:800px;max-height:90vh;display:flex;flex-direction:column;background:#1e293bb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:24px;box-shadow:0 20px 50px #0000004d}.chat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.1)}.chat-header h2{font-size:1.5rem;font-weight:700;background:linear-gradient(to right,#60a5fa,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.new-chat-btn{background:#ffffff0d;color:#94a3b8;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.1);transition:all .3s ease;cursor:pointer}.new-chat-btn:hover{background:#ef44441a;color:#ef4444;border-color:#ef44444d;transform:translateY(-1px)}.new-chat-btn:active{transform:translateY(0)}.messages{flex:1;overflow-y:auto;padding:10px 5px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.message{padding:14px 18px;border-radius:18px;line-height:1.5;font-size:.95rem;max-width:85%;word-wrap:break-word;animation:fadeIn .3s ease-out}.user{background:linear-gradient(135deg,#3b82f6,#2563eb);align-self:flex-end;border-bottom-right-radius:4px;color:#fff;box-shadow:0 4px 15px #2563eb33}.assistant{background:#334155;align-self:flex-start;border-bottom-left-radius:4px;border:1px solid rgba(255,255,255,.05)}.message small{display:block;font-size:.75rem;margin-top:8px;opacity:.5}.input-container{display:flex;gap:12px;margin-top:20px;background:#1e293b;padding:6px;border-radius:16px;border:1px solid rgba(255,255,255,.1)}input{flex:1;padding:12px 16px;border-radius:12px;border:none;background:transparent;color:#fff;outline:none;font-size:1rem}input::placeholder{color:#94a3b8}.send-btn{padding:10px 24px;font-weight:600;border-radius:12px;background:#3b82f6;box-shadow:0 4px 12px #3b82f64d}p{font-size:.85rem;color:#94a3b8;margin-top:10px;text-align:center;font-style:italic}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.chat-container{height:100vh;max-height:100vh;border-radius:0;padding:15px}.message{max-width:90%}}