*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#333}.app{display:flex;flex-direction:column;min-height:100vh;max-width:1200px;margin:0 auto;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 50px #0000001a}.header{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;padding:1rem 2rem;box-shadow:0 2px 20px #0000001a}.header-content{display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;gap:.75rem}.logo-icon{font-size:2rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.logo h1{font-size:1.75rem;font-weight:700;background:linear-gradient(45deg,#fff,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.model-info{display:flex;align-items:center;gap:1rem}.model-badge{background:#fff3;padding:.5rem 1rem;border-radius:20px;font-size:.875rem;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status-indicator{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.status-dot{width:8px;height:8px;border-radius:50%;background:#10b981;animation:pulse 2s infinite}.status-dot.connecting{background:#f59e0b}.status-dot.error{background:#ef4444}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.main{flex:1;display:flex;flex-direction:column;padding:2rem}.chat-container{flex:1;display:flex;flex-direction:column;max-width:800px;margin:0 auto;width:100%}.chat-messages{flex:1;overflow-y:auto;padding:1rem 0;margin-bottom:1rem}.welcome-message{text-align:center;padding:3rem 2rem;color:#6b7280}.welcome-icon{font-size:4rem;margin-bottom:1rem;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.welcome-message h2{font-size:2rem;font-weight:600;margin-bottom:.5rem;color:#374151}.welcome-message p{font-size:1.1rem;margin-bottom:.5rem}.message{margin-bottom:1.5rem;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.message.user{text-align:right}.message.assistant{text-align:left}.message-content{display:inline-block;max-width:80%;padding:1rem 1.5rem;border-radius:20px;word-wrap:break-word;line-height:1.6}.message.user .message-content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-bottom-right-radius:5px}.message.assistant .message-content{background:#f8fafc;color:#374151;border:1px solid #e2e8f0;border-bottom-left-radius:5px}.message-time{font-size:.75rem;color:#9ca3af;margin-top:.5rem;display:block}.chat-input-container{background:#fff;border-radius:20px;padding:1rem;box-shadow:0 4px 20px #0000001a;border:1px solid #e2e8f0}.input-wrapper{display:flex;gap:.75rem;align-items:flex-end}#messageInput{flex:1;border:none;outline:none;resize:none;font-family:inherit;font-size:1rem;line-height:1.5;padding:.75rem;background:#f8fafc;border-radius:12px;min-height:50px;max-height:150px;transition:all .2s ease}#messageInput:focus{background:#f1f5f9;box-shadow:0 0 0 3px #667eea1a}.send-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all .2s ease;flex-shrink:0}.send-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}.send-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.input-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;font-size:.875rem;color:#6b7280}.char-count{font-weight:500}.system-prompt-toggle label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.system-prompt-toggle input[type=checkbox]{width:16px;height:16px;accent-color:#667eea}.system-prompt-panel{position:fixed;top:0;right:-400px;width:400px;height:100vh;background:#fff;box-shadow:-5px 0 20px #0000001a;transition:right .3s ease;z-index:1000;display:flex;flex-direction:column}.system-prompt-panel.open{right:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e2e8f0;background:#f8fafc}.panel-header h3{font-size:1.25rem;font-weight:600;color:#374151}.close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.close-button:hover{background:#e2e8f0;color:#374151}#systemPromptInput{flex:1;border:none;outline:none;resize:none;font-family:inherit;font-size:.875rem;line-height:1.5;padding:1.5rem;background:#fff}.typing-indicator{display:flex;align-items:center;gap:.5rem;padding:1rem 1.5rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:20px 20px 20px 5px;max-width:80px}.typing-dots{display:flex;gap:4px}.typing-dot{width:8px;height:8px;border-radius:50%;background:#9ca3af;animation:typing 1.4s infinite ease-in-out}.typing-dot:nth-child(1){animation-delay:-.32s}.typing-dot:nth-child(2){animation-delay:-.16s}@keyframes typing{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}@media (max-width: 768px){.header{padding:1rem}.header-content{flex-direction:column;gap:1rem;text-align:center}.main{padding:1rem}.message-content{max-width:90%}.system-prompt-panel{width:100%;right:-100%}}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#94a3b8}