body{background:#0f1117;margin:0}#root{height:100%}:root{--bg:#0f1117;--surface:#1a1d27;--surface2:#22263a;--border:#2e3250;--accent:#4f8ef7;--accent-dark:#3a70d4;--text:#e2e8f0;--text-muted:#8892a4;--success:#34d399;--error:#f87171;--bubble:#1e3a5f;--bubble-text:#e2e8f0;--radius:14px;--header-h:58px;--input-h:64px;--generate-h:72px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{background:var(--bg);flex-direction:column;max-width:640px;height:100dvh;margin:0 auto;display:flex}.app-header{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 16px;display:flex;position:sticky;top:0}.header-title{color:var(--text);align-items:center;gap:8px;font-size:16px;font-weight:600;display:flex}.header-icon{width:20px;height:20px;color:var(--accent)}.network-status{border-radius:20px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:500;transition:all .3s;display:flex}.network-status.online{color:var(--success);background:#34d3991f}.network-status.offline{color:var(--error);background:#f871711f}.network-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.network-status.online .network-dot{background:var(--success)}.network-status.offline .network-dot{background:var(--error);animation:1.5s infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.chat-area{scroll-behavior:smooth;flex-direction:column;flex:1;gap:10px;padding:16px 12px 8px;display:flex;overflow-y:auto}.empty-state{text-align:center;color:var(--text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:40px 24px;display:flex}.empty-state svg{opacity:.6;width:64px;height:64px}.empty-state p{color:var(--text);font-size:17px;font-weight:600}.empty-state span{color:var(--text-muted);font-size:13px;line-height:1.5}.message-wrapper{flex-direction:column;align-items:flex-end;display:flex}.message-wrapper--selected .message-bubble{outline:2px solid var(--accent);outline-offset:2px}.msg-actions{background:var(--surface2);border:1px solid var(--border);border-radius:10px;gap:4px;margin-bottom:6px;padding:4px 6px;display:flex}.msg-action-btn{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:7px;align-items:center;gap:5px;padding:5px 10px;font-size:13px;font-weight:500;transition:background .15s;display:flex}.msg-action-btn:hover{background:var(--border)}.msg-action-btn--delete{color:var(--error)}.msg-action-btn--delete:hover{background:#f871711f}.msg-edit-wrap{flex-direction:column;gap:6px;display:flex}.msg-edit-input{background:var(--surface);border:1px solid var(--accent);color:var(--text);resize:none;border-radius:8px;width:100%;padding:8px 10px;font-family:inherit;font-size:15px;line-height:1.5}.msg-edit-actions{justify-content:flex-end;gap:8px;display:flex}.msg-edit-save,.msg-edit-cancel{cursor:pointer;border:none;border-radius:7px;padding:5px 14px;font-size:13px;font-weight:600}.msg-edit-save{background:var(--accent);color:#fff}.msg-edit-cancel{background:var(--surface2);color:var(--text-muted)}.message-bubble{background:var(--bubble);border-radius:var(--radius) var(--radius) 4px var(--radius);cursor:pointer;-webkit-user-select:none;user-select:none;max-width:85%;padding:10px 14px;position:relative}.message-index{color:var(--accent);letter-spacing:.05em;margin-bottom:4px;font-size:10px;font-weight:700;display:block}.message-text{color:var(--bubble-text);white-space:pre-wrap;word-break:break-word;font-size:15px;line-height:1.5}.message-time{color:var(--text-muted);text-align:right;margin-top:4px;font-size:11px;display:block}.generate-section{border-top:1px solid var(--border);flex-shrink:0;padding:8px 12px 4px}.generate-hint{color:var(--text-muted);text-align:center;margin-bottom:6px;font-size:12px}.generate-btn{cursor:not-allowed;background:var(--surface2);width:100%;height:48px;color:var(--text-muted);border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;font-size:15px;font-weight:600;transition:all .2s;display:flex}.generate-btn svg{width:18px;height:18px}.generate-btn.ready{background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 4px 16px #4f8ef759}.generate-btn.ready:hover{background:var(--accent-dark)}.generate-btn.ready:active{transform:scale(.98)}.generate-btn.loading{background:var(--surface2);color:var(--text-muted);cursor:wait}.chat-input-bar{background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;align-items:flex-end;gap:8px;padding:8px 12px 12px;display:flex}.chat-textarea{resize:none;border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:12px;outline:none;flex:1;min-height:44px;max-height:120px;padding:10px 14px;font-family:inherit;font-size:15px;line-height:1.5;transition:border-color .2s;overflow-y:auto}.chat-textarea:focus{border-color:var(--accent)}.chat-textarea::placeholder{color:var(--text-muted)}.send-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex}.send-btn:disabled{background:var(--surface2);color:var(--text-muted);cursor:default}.send-btn:not(:disabled):hover{background:var(--accent-dark)}.send-btn:not(:disabled):active{transform:scale(.95)}.send-btn svg{width:18px;height:18px}.error-banner{border-top:1px solid var(--error);color:var(--error);text-align:center;cursor:pointer;background:#f8717126;flex-shrink:0;padding:10px 16px;font-size:13px}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.header-left{align-items:center;gap:10px;min-width:0;display:flex}.header-session-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;max-width:180px;font-size:15px;font-weight:600;overflow:hidden}.menu-btn{background:var(--surface2);width:36px;height:36px;color:var(--text);cursor:pointer;border:none;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;transition:background .2s;display:flex}.menu-btn:hover{background:var(--border)}.menu-btn svg{width:18px;height:18px}.sidebar-backdrop{z-index:40;background:#0000008c;animation:.2s fade-in;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sidebar{background:var(--surface);border-right:1px solid var(--border);z-index:50;flex-direction:column;width:min(300px,85vw);animation:.22s slide-in;display:flex;position:fixed;top:0;bottom:0;left:0;overflow:hidden}@keyframes slide-in{0%{transform:translate(-100%)}to{transform:translate(0)}}.sidebar-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 16px 12px;display:flex}.sidebar-title{color:var(--text);font-size:16px;font-weight:700}.sidebar-close-btn{width:32px;height:32px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:background .15s;display:flex}.sidebar-close-btn:hover{background:var(--surface2)}.sidebar-close-btn svg{width:16px;height:16px}.sidebar-new-btn{border:1px dashed var(--border);color:var(--accent);cursor:pointer;background:0 0;border-radius:12px;flex-shrink:0;align-items:center;gap:8px;margin:12px;padding:10px 14px;font-size:14px;font-weight:600;transition:background .15s,border-color .15s;display:flex}.sidebar-new-btn:hover{border-color:var(--accent);background:#4f8ef714}.sidebar-new-btn svg{flex-shrink:0;width:18px;height:18px}.session-list{flex-direction:column;flex:1;gap:4px;padding:4px 8px 16px;list-style:none;display:flex;overflow-y:auto}.session-empty{color:var(--text-muted);text-align:center;padding:24px 0;font-size:13px}.session-item{cursor:pointer;border-radius:10px;align-items:center;gap:6px;min-width:0;padding:10px 10px 10px 12px;transition:background .15s;display:flex}.session-item:hover{background:var(--surface2)}.session-item.active{border-left:3px solid var(--accent);background:#4f8ef71f;padding-left:9px}.session-item-body{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.session-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}.session-meta{align-items:center;gap:8px;display:flex}.session-count{color:var(--accent);font-size:11px;font-weight:600}.session-date{color:var(--text-muted);font-size:11px}.session-rename-input{background:var(--surface2);border:1px solid var(--accent);width:100%;color:var(--text);border-radius:6px;outline:none;padding:4px 8px;font-family:inherit;font-size:13px}.session-actions{opacity:0;flex-shrink:0;gap:2px;transition:opacity .15s;display:flex}.session-item:hover .session-actions,.session-item.active .session-actions{opacity:1}.session-action-btn{width:28px;height:28px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}.session-action-btn:hover{background:var(--surface2);color:var(--text)}.session-action-btn.danger:hover{color:var(--error);background:#f8717126}.session-action-btn svg{width:14px;height:14px}