*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a0a;--surface: #141414;--surface-2: #1c1c1c;--surface-3: #252525;--border: rgba(255, 255, 255, .06);--border-2: rgba(255, 255, 255, .12);--text: #e8e8e8;--text-2: #a0a0a0;--text-3: #555555;--accent: #ffffff;--radius: 16px;--radius-sm: 10px;--ease: cubic-bezier(.16, 1, .3, 1);--header-h: 56px;--input-h: auto}@media (max-width: 640px){:root{--radius: 12px;--radius-sm: 8px}}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);height:100dvh;height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{height:100dvh;height:100vh;display:flex;flex-direction:column}.main{display:flex;flex:1;flex-direction:column;overflow:hidden;min-height:0}.chat-container{flex:1;overflow-y:auto;padding:24px 16px 8px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.chat-container::-webkit-scrollbar{width:4px}.chat-container::-webkit-scrollbar-track{background:transparent}.chat-container::-webkit-scrollbar-thumb{background:var(--text-3);border-radius:2px}.chat-container::-webkit-scrollbar-thumb:hover{background:var(--text-2)}::selection{background:rgba(255,255,255,.15)}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes appIn{0%{opacity:0}to{opacity:1}}#app{animation:appIn .5s ease both}.input-footer{display:flex;justify-content:space-between;align-items:center;padding:6px 24px;font-size:11px;color:var(--text-3);flex-shrink:0;border-top:1px solid var(--border);background:var(--bg);max-width:100%}.input-footer .status{display:flex;align-items:center;gap:5px}.input-footer .status:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text-3);flex-shrink:0;transition:background .2s ease,box-shadow .2s ease}.input-footer .status.online:before{background:#4ade80;box-shadow:0 0 4px #4ade804d}.input-footer .status.offline:before{background:#f87171}@media (max-width: 640px){.chat-container{padding:16px 12px 8px}.header{padding:0 16px}.input-area{padding:10px 12px 12px}.messages{padding:0 4px}}.header{display:flex;justify-content:space-between;align-items:center;padding:0 24px;height:var(--header-h);border-bottom:1px solid var(--border);flex-shrink:0;background:rgba(10,10,10,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:fadeUp .4s var(--ease) both}.header-left{display:flex;align-items:center;gap:12px}.logo{font-size:15px;font-weight:600;letter-spacing:-.03em;color:var(--text);margin:0;white-space:nowrap}.model-name{font-size:11px;color:var(--text-3);padding:3px 8px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);letter-spacing:.01em;white-space:nowrap;flex-shrink:0}.header-right{display:flex;gap:4px}.header-right button{padding:6px 12px;font-size:13px;color:var(--text-2);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;font-family:inherit;letter-spacing:-.01em;white-space:nowrap}.header-right button:hover{background:var(--surface-2);color:var(--text)}.header-right button:active{transform:scale(.96)}@media (max-width: 640px){.header{padding:0 16px}.model-name,.header-right button span{display:none}}.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px 60px;text-align:center;animation:fadeUp .5s var(--ease) .1s both}.welcome-icon{width:40px;height:40px;color:var(--text-3);margin-bottom:20px;animation:float 4s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.welcome-icon svg{width:100%;height:100%;stroke:currentColor}.welcome h2{font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--text);margin-bottom:6px;animation:fadeUp .5s var(--ease) .2s both}.welcome p{font-size:13px;color:var(--text-3);margin-bottom:32px;animation:fadeUp .5s var(--ease) .3s both}.quick-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:480px;animation:fadeUp .5s var(--ease) .4s both}.action-btn{padding:9px 16px;font-size:13px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:100px;cursor:pointer;transition:all .15s var(--ease);font-family:inherit;letter-spacing:-.01em}.action-btn:hover{background:var(--surface-3);border-color:var(--border-2);color:var(--text);transform:translateY(-1px)}.action-btn:active{transform:translateY(0) scale(.97)}@media (max-width: 640px){.welcome{padding:60px 16px 40px}.welcome h2{font-size:18px}.welcome p{font-size:12px}.action-btn{padding:8px 14px;font-size:12px}}.messages{display:flex;flex-direction:column;gap:20px;max-width:680px;margin:0 auto;padding-bottom:32px}.message{display:flex;gap:10px;animation:fadeUp .3s var(--ease) both;align-items:flex-end}.message.user{flex-direction:row-reverse}.message:nth-child(1){animation-delay:0s}.message:nth-child(2){animation-delay:.04s}.message:nth-child(3){animation-delay:.08s}.message:nth-child(4){animation-delay:.12s}.message:nth-child(5){animation-delay:.16s}.message:nth-child(n+6){animation-delay:.2s}.message-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.message-avatar svg{width:14px;height:14px}.message.user .message-avatar{background:var(--accent);color:var(--bg)}.message.assistant .message-avatar{background:var(--surface-3);border:1px solid var(--border)}.message-content{padding:10px 14px;line-height:1.6;white-space:pre-wrap;word-break:break-word;font-size:14px;letter-spacing:-.01em;max-width:calc(100% - 48px);word-wrap:break-word}.message.user .message-content{background:var(--accent);color:var(--bg);border-radius:var(--radius) 4px var(--radius) var(--radius)}.message.assistant .message-content{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:4px var(--radius) var(--radius) var(--radius)}.message:hover .message-content{border-color:var(--border-2)}.message.user:hover .message-content{background:#f5f5f5}.message.assistant:hover .message-content{background:var(--surface-3)}.loading{display:flex;align-items:center;gap:8px;color:var(--text-3);font-size:13px;padding:2px 0}.loading:before{content:"";width:12px;height:12px;border:1.5px solid var(--surface-3);border-top-color:var(--text-2);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}.loading-dots:after{content:"";animation:dots 1.5s steps(4,end) infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 640px){.messages{gap:16px}.message-content{font-size:15px;max-width:calc(100% - 44px)}.message-avatar{width:24px;height:24px}.message-avatar svg{width:12px;height:12px}}.input-area{padding:12px 24px 14px;border-top:1px solid var(--border);flex-shrink:0;background:var(--bg);animation:fadeUp .4s var(--ease) .15s both}.input-wrapper{display:flex;gap:8px;align-items:flex-end;max-width:680px;margin:0 auto}.input{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;color:var(--text);font-size:14px;resize:none;min-height:44px;max-height:160px;outline:none;transition:border-color .15s ease,background .15s ease;font-family:inherit;line-height:1.5;letter-spacing:-.01em}.input::placeholder{color:var(--text-3)}.input:focus{border-color:var(--border-2);background:var(--surface-3)}.input:disabled{opacity:.4;cursor:not-allowed}.send-btn{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--accent);border:none;color:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s var(--ease);flex-shrink:0}.send-btn:hover:not(:disabled){opacity:.8;transform:scale(1.04)}.send-btn:active:not(:disabled){transform:scale(.96)}.send-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}.send-btn svg{width:15px;height:15px;transition:transform .15s var(--ease)}.send-btn:hover:not(:disabled) svg{transform:translate(1px,-1px)}.modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;align-items:center;justify-content:center;padding:16px}.modal.active{display:flex}.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:420px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;animation:modalIn .25s var(--ease);box-shadow:0 24px 48px #00000080}@keyframes modalIn{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 12px;border-bottom:1px solid var(--border);flex-shrink:0}.modal-header h3{font-size:14px;font-weight:600;letter-spacing:-.02em}.close-btn{background:none;border:none;color:var(--text-3);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .15s ease}.close-btn:hover{color:var(--text);background:var(--surface-2)}.modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px;flex:1;overflow-y:auto}.setting-item{display:flex;flex-direction:column;gap:5px;animation:fadeUp .2s var(--ease) both}.setting-item:nth-child(1){animation-delay:.05s}.setting-item:nth-child(2){animation-delay:.1s}.setting-item label{font-size:10px;font-weight:500;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}.setting-item input[type=number]{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;color:var(--text);font-size:13px;outline:none;width:100%;transition:all .15s ease;font-family:inherit;letter-spacing:-.01em}.setting-item input:focus{border-color:var(--border-2);background:var(--surface-3)}.temp-row{display:flex;align-items:center;gap:10px}.setting-item input[type=range]{flex:1;accent-color:var(--text-2);cursor:pointer}.temp-value{font-size:12px;font-weight:500;color:var(--text-2);min-width:28px;text-align:right;font-variant-numeric:tabular-nums}.modal-footer{display:flex;justify-content:flex-end;gap:6px;padding:10px 18px 14px;border-top:1px solid var(--border);flex-shrink:0}.btn{padding:7px 14px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s var(--ease);font-family:inherit;letter-spacing:-.01em}.btn-primary{background:var(--accent);color:var(--bg)}.btn-primary:hover{opacity:.85;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0) scale(.97)}.btn-secondary{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}.btn-secondary:hover{background:var(--surface-3);color:var(--text)}.btn-secondary:active{transform:scale(.97)}@media (max-width: 640px){.modal{padding:12px}.modal-content{max-height:90vh}}