*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh}#app{min-height:100vh;display:flex;flex-direction:column}.header{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem 2rem;box-shadow:0 2px 20px #0000001a;text-align:center}.header h1{color:#333;font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.header p{color:#666;font-size:1.1rem;font-weight:500}.clear-chat-btn{background:linear-gradient(135deg,#dc3545 0%,#c82333 100%);color:#fff;border:none;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #dc35454d;margin-top:.5rem}.clear-chat-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #dc354566}.chat-container{flex:1;max-width:800px;margin:2rem auto;padding:0 1rem;width:100%}.chat-messages{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:2rem;margin-bottom:2rem;min-height:400px;max-height:600px;overflow-y:auto;box-shadow:0 10px 40px #0000001a}.message{margin-bottom:1.5rem;animation:fadeInUp .3s ease-out}.message.user{text-align:right}.message.assistant{text-align:left}.message-content{display:inline-block;max-width:70%;padding:1rem 1.5rem;border-radius:20px;word-wrap:break-word;line-height:1.6}.message.user .message-content{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-bottom-right-radius:5px}.message.assistant .message-content{background:#f8f9fa;color:#333;border:1px solid #e9ecef;border-bottom-left-radius:5px}.message-actions{margin-top:1rem;display:flex;gap:1rem;justify-content:flex-start}.action-button{background:linear-gradient(135deg,#28a745 0%,#20c997 100%);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:25px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #28a7454d}.action-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #28a74566}.action-button.secondary{background:linear-gradient(135deg,#6c757d 0%,#495057 100%);box-shadow:0 4px 15px #6c757d4d}.action-button.secondary:hover{box-shadow:0 6px 20px #6c757d66}.input-container{display:flex;gap:1rem;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.5rem;border-radius:20px;box-shadow:0 10px 40px #0000001a}.input-wrapper{flex:1;display:flex;align-items:center;gap:.5rem;position:relative}.file-input{display:none}.file-button{background:linear-gradient(135deg,#6c757d 0%,#495057 100%);color:#fff;border:none;padding:.75rem;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #6c757d4d;min-width:50px;height:50px;display:flex;align-items:center;justify-content:center}.file-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c757d66}.file-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.file-preview{margin-top:1rem;padding:1rem;background:rgba(255,255,255,.9);border-radius:15px;border:2px dashed #e9ecef}.file-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#f8f9fa;border-radius:10px;margin-bottom:.5rem}.file-item:last-child{margin-bottom:0}.file-name{font-size:.9rem;color:#495057;flex:1;margin-right:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remove-file{background:#dc3545;color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.remove-file:hover{background:#c82333;transform:scale(1.1)}.message-input{flex:1;padding:1rem 1.5rem;border:2px solid #e9ecef;border-radius:25px;font-size:1rem;outline:none;transition:all .3s ease;background:white}.message-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.send-button{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:1rem 2rem;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea4d}.send-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.send-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.typing-indicator{display:flex;align-items:center;gap:.5rem;color:#666;font-style:italic}.typing-dots{display:flex;gap:.25rem}.typing-dots span{width:8px;height:8px;border-radius:50%;background:#667eea;animation:typing 1.4s infinite ease-in-out}.typing-dots span:nth-child(1){animation-delay:-.32s}.typing-dots span:nth-child(2){animation-delay:-.16s}@keyframes typing{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.streaming-content{display:inline}.streaming-cursor{animation:blink 1s infinite;color:#667eea;font-weight:700}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}@media (max-width: 768px){.header h1{font-size:2rem}.header p{font-size:1rem}.chat-container{margin:1rem auto;padding:0 .5rem}.chat-messages{padding:1rem;margin-bottom:1rem}.message-content{max-width:85%}.input-container{padding:1rem}.message-actions,.input-wrapper{flex-direction:column;gap:.5rem}.file-button{align-self:flex-end}.file-preview{margin-top:.5rem;padding:.5rem}}