*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e);min-height:100vh}.chat-container{max-width:800px;margin:0 auto;height:100vh;display:flex;flex-direction:column}.chat-header{padding:20px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}.chat-header h1{color:#fff;font-size:1.5rem;display:flex;align-items:center;gap:10px}.chat-header p{color:#888;font-size:.875rem;margin-top:5px}.messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:15px}.message{display:flex;gap:10px;max-width:80%;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.user{align-self:flex-end;flex-direction:row-reverse}.message.assistant{align-self:flex-start}.role-icon{font-size:1.5rem;flex-shrink:0}.message-content{padding:12px 16px;border-radius:18px;line-height:1.5;white-space:pre-wrap}.message.user .message-content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-bottom-right-radius:4px}.message.assistant .message-content{background:#ffffff1a;color:#e0e0e0;border-bottom-left-radius:4px}.typing{display:flex;gap:5px}.typing span{animation:bounce 1.4s infinite ease-in-out}.typing span:nth-child(1){animation-delay:0s}.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}}.chat-input{padding:20px;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);display:flex;gap:10px}.chat-input input{flex:1;padding:14px 20px;border-radius:25px;border:none;background:#ffffff1a;color:#fff;font-size:1rem;outline:none;transition:all .3s}.chat-input input::placeholder{color:#ffffff80}.chat-input input:focus{background:#ffffff26;box-shadow:0 0 0 3px #667eea4d}.chat-input button{padding:14px 24px;border-radius:25px;border:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:1.25rem;cursor:pointer;transition:all .3s}.chat-input button:hover:not(:disabled){transform:scale(1.05);box-shadow:0 5px 20px #667eea66}.chat-input button:disabled{opacity:.5;cursor:not-allowed}