:root{--bg-color: #0f172a;--chat-bg: #1e293b;--primary: #3b82f6;--primary-hover: #2563eb;--text-primary: #f8fafc;--text-secondary: #94a3b8;--user-msg-bg: #3b82f6;--bot-msg-bg: #334155;--input-bg: #1e293b;--border-color: #334155;--code-bg: #1e293b}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--bg-color);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100vh;overflow:hidden}#root{height:100%;display:flex;flex-direction:column}.chat-container{flex:1;display:flex;flex-direction:column;max-width:900px;margin:0 auto;width:100%;height:100%;padding:20px;box-sizing:border-box;overflow:hidden}.messages-area{flex:1;overflow-y:auto;padding-bottom:20px;display:flex;flex-direction:column;gap:20px;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;min-height:0}.messages-area::-webkit-scrollbar{width:6px}.messages-area::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:3px}.message{display:flex;gap:12px;max-width:80%;animation:fadeIn .3s ease-out}.message.user{align-self:flex-end;flex-direction:row-reverse}.message.assistant{align-self:flex-start}.avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}.user .avatar{background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff}.assistant .avatar{background:linear-gradient(135deg,#10b981,#3b82f6);color:#fff}.message-content{padding:12px 16px;border-radius:16px;line-height:1.6;font-size:15px;position:relative;word-wrap:break-word;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;min-width:0}.user .message-content{background-color:var(--user-msg-bg);color:#fff;border-bottom-right-radius:4px}.assistant .message-content{background-color:var(--bot-msg-bg);color:var(--text-primary);border-bottom-left-radius:4px;border:1px solid var(--border-color)}.markdown-body{font-size:15px}.markdown-body>*:first-child{margin-top:0}.markdown-body>*:last-child{margin-bottom:0}.markdown-body p{margin:.5em 0}.markdown-body pre{background-color:var(--code-bg);padding:12px;border-radius:8px;overflow-x:auto;margin:.8em 0;border:1px solid var(--border-color)}.markdown-body code{font-family:Menlo,Monaco,Courier New,monospace;font-size:.9em;background-color:#0003;padding:.2em .4em;border-radius:4px}.markdown-body pre code{background-color:transparent;padding:0;color:#e2e8f0}.markdown-body ul,.markdown-body ol{padding-left:1.5em;margin:.5em 0}.markdown-body li{margin:.2em 0}.markdown-body a{color:#60a5fa;text-decoration:none}.markdown-body a:hover{text-decoration:underline}.markdown-body table{border-collapse:collapse;width:100%;margin:.8em 0}.markdown-body th,.markdown-body td{border:1px solid var(--border-color);padding:8px;text-align:left}.markdown-body th{background-color:#0003}.markdown-body blockquote{border-left:4px solid var(--primary);margin:.8em 0;padding-left:1em;color:var(--text-secondary)}.think-block{margin:.8em 0;border-radius:8px;overflow:hidden;transition:all .3s ease-in-out}.think-block.collapsed{background-color:#64748b33;border:1px solid var(--border-color);cursor:pointer}.think-block.collapsed:hover{background-color:#64748b4d;border-color:var(--primary)}.think-block.expanded{background-color:#3b82f60d;border:1px solid rgba(59,130,246,.3)}.think-block-header{padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary);-webkit-user-select:none;user-select:none}.think-block.expanded .think-block-header{cursor:pointer}.think-block-header .icon{font-size:16px;flex-shrink:0}.think-block-header .label{flex:1;font-weight:500}.think-block-header .hint{font-size:12px;opacity:.7}.think-block-content{max-height:0;overflow:hidden;transition:max-height .3s ease-in-out,padding .3s ease-in-out;padding:0 12px;color:var(--text-secondary);font-size:13px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}.think-block.expanded .think-block-content{max-height:2000px;padding:0 12px 12px}.think-block.streaming .think-block-content:after{content:"";display:inline-block;width:2px;height:14px;background-color:var(--primary);margin-left:2px;animation:blink 1s infinite;vertical-align:text-bottom}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.input-area{padding:20px;background-color:transparent;max-width:900px;margin:0 auto;width:100%;box-sizing:border-box;flex-shrink:0}.input-container{position:relative;display:flex;align-items:center;background-color:var(--input-bg);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:12px 20px;transition:border-color .2s,box-shadow .2s;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.input-container:focus-within{border-color:var(--primary);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d,0 0 0 2px #3b82f633}textarea{flex:1;background:transparent;border:none;color:var(--text-primary);font-size:16px;resize:none;height:24px;max-height:150px;padding:8px 0;font-family:inherit;outline:none}button.send-btn,button.icon-btn{background-color:var(--primary);color:#fff;border:none;border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s,transform .1s;margin-left:8px}button.icon-btn{background-color:transparent;color:var(--text-secondary)}button.icon-btn:hover{background-color:#ffffff1a;color:var(--text-primary)}button.send-btn:hover{background-color:var(--primary-hover)}button.send-btn:active,button.icon-btn:active{transform:scale(.95)}button.send-btn:disabled{background-color:var(--border-color);cursor:not-allowed;opacity:.7}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.typing-indicator span{display:inline-block;width:6px;height:6px;background-color:var(--text-secondary);border-radius:50%;animation:typing 1.4s infinite ease-in-out both;margin:0 2px}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes typing{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.modal-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease-out}.modal{background:#1e293bf2;padding:24px;border-radius:16px;box-shadow:0 20px 25px -5px #0000004d,0 10px 10px -5px #0003;width:90%;max-width:400px;border:1px solid rgba(255,255,255,.1);color:var(--text-primary);position:relative}.modal h2{margin-top:0;margin-bottom:20px;font-size:1.25rem;font-weight:600}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:.9rem;color:var(--text-secondary)}.form-group input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border-color);background-color:#0003;color:var(--text-primary);font-size:1rem;box-sizing:border-box;transition:border-color .2s}.form-group input:focus{outline:none;border-color:var(--primary)}.form-group small{display:block;margin-top:6px;font-size:.8rem;color:var(--text-secondary);opacity:.8}.modal-actions{display:flex;justify-content:flex-end;margin-top:24px}.modal-close-btn{position:absolute;top:16px;right:16px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center}.modal-close-btn:hover{background-color:#ffffff1a;color:var(--text-primary)}.btn-primary{background-color:var(--primary);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:500;cursor:pointer;transition:background-color .2s}.btn-primary:hover{background-color:var(--primary-hover)}
