*{box-sizing:border-box;margin:0;padding:0}:root{--primary-color:#1e3a8a;--primary-hover:#1e40af;--secondary-color:#f1f5f9;--border-color:#e2e8f0;--text-primary:#2d3748;--text-secondary:#6b7280;--background-main:#fff;--background-alt:#f9fafb;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 10px 15px #0000001a;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px}body{color:var(--text-primary);background:var(--background-main);height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}.chat-header{background:var(--background-main);border-bottom:1px solid var(--border-color);padding:var(--spacing-md) var(--spacing-lg);z-index:100;position:relative}.header-content{justify-content:space-between;align-items:center;max-width:800px;margin:0 auto;display:flex}.chat-title{align-items:center;gap:var(--spacing-sm);color:var(--text-primary);font-size:1.25rem;font-weight:600;display:flex}.chat-title i{color:var(--primary-color);font-size:1.5rem}.header-actions{gap:var(--spacing-sm);display:flex}.header-btn{border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--spacing-sm);cursor:pointer;color:var(--text-secondary);background:0 0;justify-content:center;align-items:center;min-width:40px;height:40px;transition:all .2s;display:flex}.header-btn:hover{background:var(--background-alt);color:var(--text-primary)}.chat-container{padding:var(--spacing-lg);background:var(--background-main);flex:1;overflow-y:auto}.messages-container{max-width:800px;padding-bottom:var(--spacing-xl);margin:0 auto}.welcome-message{text-align:center;padding:var(--spacing-xl) var(--spacing-lg);color:var(--text-secondary)}.welcome-icon{color:var(--primary-color);margin-bottom:var(--spacing-md);font-size:3rem}.welcome-message h2{color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:1.5rem;font-weight:600}.welcome-message p{max-width:500px;margin:0 auto;font-size:1rem;line-height:1.5}.message{gap:var(--spacing-md);margin-bottom:var(--spacing-lg);align-items:flex-start;display:flex}.message.user-message{flex-direction:row-reverse}.avatar{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:.875rem;display:flex}.user-message .avatar{background:var(--primary-color);color:#fff}.ai-message .avatar{background:var(--secondary-color);color:var(--primary-color);border:1px solid var(--border-color)}.message-content{max-width:70%;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);word-wrap:break-word;line-height:1.5}.user-message .message-content{background:var(--primary-color);color:#fff;border-bottom-right-radius:var(--spacing-xs)}.ai-message .message-content{background:var(--secondary-color);color:var(--text-primary);border:1px solid var(--border-color);border-bottom-left-radius:var(--spacing-xs)}.message-timestamp{color:var(--text-secondary);margin-top:var(--spacing-xs);text-align:center;font-size:.75rem}.error-message .message-content{color:#dc2626;background:#fee2e2;border:1px solid #fecaca}.typing-indicator{opacity:1;transition:opacity .3s}.typing-indicator.hidden{opacity:0;pointer-events:none}.typing-animation{align-items:center;gap:4px;display:flex}.typing-animation span{background:var(--text-secondary);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite typing}.typing-animation span:first-child{animation-delay:0s}.typing-animation span:nth-child(2){animation-delay:.2s}.typing-animation span:nth-child(3){animation-delay:.4s}@keyframes typing{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-10px)}}.input-container{background:var(--background-main);border-top:1px solid var(--border-color);padding:var(--spacing-lg)}.input-wrapper{gap:var(--spacing-md);background:var(--background-main);border:1px solid var(--border-color);border-radius:var(--radius-lg);max-width:800px;padding:var(--spacing-md);box-shadow:var(--shadow-sm);align-items:flex-end;margin:0 auto;transition:border-color .2s,box-shadow .2s;display:flex}.input-wrapper:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 3px #10a37f1a}#user-input{resize:none;color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;min-height:24px;max-height:120px;font-family:inherit;font-size:1rem;line-height:1.5;overflow-y:auto}#user-input::placeholder{color:var(--text-secondary)}.send-btn{background:var(--primary-color);border-radius:var(--radius-sm);cursor:pointer;color:#fff;border:none;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.send-btn:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.send-btn:disabled{background:var(--text-secondary);cursor:not-allowed;transform:none}.input-footer{max-width:800px;margin:var(--spacing-sm) auto 0;color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:.75rem;display:flex}.character-count{font-weight:500}@media (width<=768px){.chat-header,.chat-container,.input-container{padding:var(--spacing-md)}.message-content{max-width:85%}.welcome-message{padding:var(--spacing-lg) var(--spacing-md)}.input-hint{display:none}}@media (width<=480px){.chat-title span{display:none}.header-actions{gap:var(--spacing-xs)}.message-content{max-width:90%;padding:var(--spacing-sm) var(--spacing-md)}}.chat-container::-webkit-scrollbar{width:6px}.chat-container::-webkit-scrollbar-track{background:0 0}.chat-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.chat-container::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.message-content.loading{background:var(--background-alt);color:var(--text-secondary);font-style:italic}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message{animation:.3s slideIn}