@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--sidebar-w:256px;--header-h:56px;--input-area-h:auto;--bg:#fff;--bg-sidebar:#f9f9f9;--bg-hover:#f0f0f0;--bg-active:#ebebeb;--bg-user-bubble:#f4f4f5;--bg-asst-bubble:#fff;--border:#e5e5e5;--text:#111;--text-muted:#8a8a8a;--text-sidebar:#333;--accent:#111;--accent-hover:#333;--send-bg:#111;--send-color:#fff;--send-disabled:#d0d0d0;--error-bg:#fff5f5;--error-border:#fecaca;--error-text:#b91c1c;--offline-bg:#fefce8;--offline-border:#fde68a;--offline-text:#92400e;--green:#22c55e;--red:#ef4444;color:var(--text);background:var(--bg);font-family:Inter,system-ui,sans-serif;font-size:14px}html,body{height:100%}#root{height:100dvh}.app-layout{background:var(--bg);height:100dvh;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg-sidebar);border-right:1px solid var(--border);flex-direction:column;display:flex;overflow:hidden}.sidebar-header{border-bottom:1px solid var(--border);flex-direction:column;gap:10px;padding:16px 12px 12px;display:flex}.brand{letter-spacing:-.5px;color:var(--text);padding:0 4px;font-size:20px;font-weight:700}.btn-new{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;align-items:center;gap:7px;padding:8px 12px;font-family:inherit;font-size:13px;font-weight:500;transition:background .15s;display:flex}.btn-new:hover{background:var(--accent-hover)}.conversation-list{scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex:1;padding:8px;overflow-y:auto}.empty-hint{color:var(--text-muted);text-align:center;padding:24px 0;font-size:12px}.conv-item{cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;margin-bottom:2px;padding:8px 10px;transition:background .12s;display:flex}.conv-item:hover{background:var(--bg-hover)}.conv-item.active{background:var(--bg-active)}.conv-title{color:var(--text-sidebar);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;line-height:1.4;overflow:hidden}.btn-delete{color:var(--text-muted);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:5px;flex-shrink:0;align-items:center;padding:4px;transition:opacity .15s,color .15s,background .15s;display:flex}.conv-item:hover .btn-delete{opacity:1}.btn-delete:hover{color:var(--red);background:#fee2e2}.chat-panel{background:var(--bg);flex-direction:column;flex:1;display:flex;overflow:hidden}.chat-header{height:var(--header-h);min-height:var(--header-h);border-bottom:1px solid var(--border);background:var(--bg);justify-content:space-between;align-items:center;padding:0 20px;display:flex}.chat-header-title{color:var(--text);white-space:nowrap;text-overflow:ellipsis;max-width:60%;font-size:14px;font-weight:600;overflow:hidden}.status-indicator{color:var(--text-muted);-webkit-user-select:none;user-select:none;align-items:center;gap:7px;font-size:12px;font-weight:500;display:flex}.status-dot{border-radius:50%;flex-shrink:0;width:9px;height:9px}.status-green{background:var(--green);animation:2s ease-in-out infinite pulse-green;box-shadow:0 0 #22c55e99}.status-red{background:var(--red);animation:none}.status-unknown{background:#d1d5db;animation:none}@keyframes pulse-green{0%{box-shadow:0 0 #22c55e8c}60%{box-shadow:0 0 0 6px #22c55e00}to{box-shadow:0 0 #22c55e00}}.messages-area{scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex:1;padding:24px 0 8px;overflow-y:auto}.welcome{text-align:center;height:100%;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:32px;display:flex}.welcome-icon{background:var(--bg-hover);width:60px;height:60px;color:var(--text);border-radius:16px;justify-content:center;align-items:center;margin-bottom:6px;display:flex}.welcome h2{color:var(--text);font-size:20px;font-weight:600}.welcome p{color:var(--text-muted);font-size:14px}.bubble-row{gap:12px;width:100%;max-width:820px;margin:0 auto;padding:6px 24px;display:flex}.bubble-avatar{border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;margin-top:2px;display:flex}.bubble-user .bubble-avatar{background:var(--bg-hover);color:var(--text)}.bubble-assistant .bubble-avatar{background:var(--accent);color:#fff}.bubble-content{flex:1;min-width:0}.bubble-meta{align-items:baseline;gap:8px;margin-bottom:4px;display:flex}.bubble-role{color:var(--text);font-size:13px;font-weight:600}.bubble-time{color:var(--text-muted);font-size:11px}.bubble-text{color:var(--text);word-break:break-word;font-size:14px;line-height:1.65}.bubble-text p{margin:0 0 8px}.bubble-text p:last-child{margin-bottom:0}.bubble-text h1,.bubble-text h2,.bubble-text h3{margin:12px 0 6px;font-weight:600}.bubble-text code{background:var(--bg-hover);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-family:Menlo,Consolas,monospace;font-size:13px}.bubble-text pre{border:1px solid var(--border);background:#f6f6f7;border-radius:8px;margin:8px 0;padding:12px 14px;overflow-x:auto}.bubble-text pre code{background:0 0;border:none;padding:0;font-size:13px}.bubble-text ul,.bubble-text ol{margin:6px 0;padding-left:20px}.bubble-text li{margin:3px 0}.typing-loader{background:var(--bg-hover);border-radius:12px;align-items:center;gap:5px;width:fit-content;padding:10px 12px;display:flex}.typing-loader .dot{background:#9ca3af;border-radius:50%;width:7px;height:7px;animation:1.2s ease-in-out infinite bounce}.typing-loader .dot:first-child{animation-delay:0s}.typing-loader .dot:nth-child(2){animation-delay:.18s}.typing-loader .dot:nth-child(3){animation-delay:.36s}@keyframes bounce{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}.error-banner{background:var(--error-bg);border:1px solid var(--error-border);max-width:820px;color:var(--error-text);border-radius:8px;align-items:center;gap:8px;width:calc(100% - 48px);margin:8px auto;padding:10px 16px;font-size:13px;display:flex}.offline-banner{background:var(--offline-bg);border-top:1px solid var(--offline-border);color:var(--offline-text);justify-content:center;align-items:center;gap:7px;padding:8px 16px;font-size:12px;font-weight:500;line-height:1;display:flex}.offline-banner svg{flex-shrink:0;position:relative;top:0}.input-area{border-top:1px solid var(--border);background:var(--bg);padding:12px 16px 10px}.input-box{border:1.5px solid var(--border);background:var(--bg);border-radius:12px;align-items:center;gap:8px;max-width:820px;margin:0 auto;padding:6px 8px 6px 12px;transition:border-color .15s,box-shadow .15s;display:flex}.input-box:focus-within:not(.input-disabled){border-color:#888;box-shadow:0 0 0 3px #0000000f}.input-box.input-disabled{border-color:var(--border);opacity:.65;background:#fafafa}.input-textarea{resize:none;color:var(--text);scrollbar-width:thin;background:0 0;border:none;outline:none;flex:1;max-height:160px;padding:4px 0;font-family:inherit;font-size:14px;line-height:1.55}.input-textarea::placeholder{color:var(--text-muted)}.input-textarea:disabled{cursor:not-allowed;color:var(--text-muted)}.btn-send{background:var(--send-bg);width:34px;min-width:34px;height:34px;color:var(--send-color);cursor:pointer;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,transform .1s;display:flex}.btn-send:hover:not(:disabled){background:var(--accent-hover)}.btn-send:active:not(:disabled){transform:scale(.93)}.btn-send:disabled{background:var(--send-disabled);cursor:not-allowed}.input-hint{text-align:center;color:var(--text-muted);max-width:820px;margin-top:6px;margin-left:auto;margin-right:auto;font-size:11px}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}.sidebar-footer{border-top:1px solid var(--border);padding:10px 8px 14px}.btn-logout{width:100%;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:8px 10px;font-family:inherit;font-size:13px;font-weight:500;transition:background .12s,color .12s;display:flex}.btn-logout:hover{color:var(--red);background:#fee2e2}.login-bg{background:#f5f5f5;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login-card{border:1px solid var(--border);background:#fff;border-radius:16px;width:100%;max-width:380px;padding:40px 36px 36px;box-shadow:0 4px 24px #00000012}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.login-card.shake{animation:.45s shake}.login-brand{flex-direction:column;align-items:center;gap:6px;margin-bottom:32px;display:flex}.login-logo{background:var(--accent);color:#fff;border-radius:14px;justify-content:center;align-items:center;width:52px;height:52px;margin-bottom:4px;display:flex}.login-title{letter-spacing:-.5px;color:var(--text);font-size:22px;font-weight:700}.login-subtitle{color:var(--text-muted);font-size:13px}.login-form{flex-direction:column;gap:16px;display:flex}.login-field{flex-direction:column;gap:6px;display:flex}.login-label{color:var(--text);font-size:13px;font-weight:500}.login-input{border:1.5px solid var(--border);width:100%;color:var(--text);background:var(--bg);border-radius:8px;outline:none;padding:10px 12px;font-family:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}.login-input:focus{border-color:#888;box-shadow:0 0 0 3px #0000000f}.login-input-wrap{align-items:center;display:flex;position:relative}.login-input-wrap .login-input{padding-right:38px}.login-eye{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:4px;align-items:center;padding:4px;transition:color .12s;display:flex;position:absolute;right:10px}.login-eye:hover{color:var(--text)}.login-error{color:var(--error-text);background:var(--error-bg);border:1px solid var(--error-border);border-radius:8px;align-items:center;gap:7px;padding:9px 12px;font-size:13px;display:flex}.login-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;margin-top:4px;padding:11px;font-family:inherit;font-size:14px;font-weight:600;transition:background .15s,transform .1s}.login-btn:hover:not(:disabled){background:var(--accent-hover)}.login-btn:active:not(:disabled){transform:scale(.98)}.login-btn:disabled{background:var(--send-disabled);cursor:not-allowed}.btn-hamburger{width:36px;height:36px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;transition:background .12s;display:none}.btn-hamburger:hover{background:var(--bg-hover)}.sidebar-backdrop{z-index:40;background:#00000059;animation:.2s fade-in;display:none;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media (width<=768px){.btn-hamburger{display:flex}.sidebar-backdrop{display:block}.sidebar{z-index:50;width:min(280px,85vw);height:100dvh;box-shadow:none;animation:none;display:none;position:fixed;top:0;left:0}.sidebar.sidebar-open{animation:.25s cubic-bezier(.4,0,.2,1) slide-in;display:flex;box-shadow:4px 0 24px #0000001f}@keyframes slide-in{0%{transform:translate(-100%)}to{transform:translate(0)}}.chat-panel{width:100%;min-width:0}.messages-area{-webkit-overflow-scrolling:touch;overscroll-behavior:none}.chat-header{padding:0 12px;padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));gap:10px}.chat-header-title{text-align:center;flex:1;font-size:14px}.bubble-row{padding:4px 12px}.bubble-avatar{width:26px;height:26px}.bubble-text{font-size:14px}.btn-delete{opacity:1}.input-area{padding:8px 10px;padding-bottom:max(8px, env(safe-area-inset-bottom))}.input-hint{font-size:10px}.error-banner{width:calc(100% - 24px);margin:6px 12px}.welcome{padding:24px 20px}.welcome h2{font-size:17px}.welcome p{font-size:13px}.login-card{border-radius:12px;padding:32px 24px 28px}.login-bg{align-items:flex-start;padding:60px 16px 16px}}@media (width<=400px){.bubble-row{gap:8px;padding:4px 8px}.status-label{display:none}}