*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow:hidden}button{font-family:inherit}#root{width:100%;height:100vh}.app{width:100%;height:100vh;display:flex;overflow:hidden}.confirm-modal-overlay{z-index:1000;background:0 0;justify-content:center;align-items:center;transition:background .2s;display:flex;position:fixed;inset:0}.confirm-modal-overlay.active{background:#0006}.confirm-modal{opacity:0;background:#fff;border-radius:12px;min-width:300px;padding:24px;transition:opacity .2s,transform .2s;transform:scale(.9)translateY(8px);box-shadow:0 8px 24px #00000026}.confirm-modal.active{opacity:1;transform:scale(1)translateY(0)}.confirm-modal .confirm-modal-title{color:#111827;text-align:center;margin:0 0 20px;font-size:15px;font-weight:500}.confirm-modal .confirm-modal-actions{justify-content:center;gap:12px;display:flex}.confirm-modal .confirm-modal-actions button{cursor:pointer;border:none;border-radius:8px;padding:8px 24px;font-size:14px;transition:background .2s,color .2s}.confirm-modal .confirm-modal-actions .confirm-modal-cancel{color:#374151;background:#f3f4f6}.confirm-modal .confirm-modal-actions .confirm-modal-cancel:hover{background:#e5e7eb}.confirm-modal .confirm-modal-actions .confirm-modal-confirm{color:#fff;background:#ef4444}.confirm-modal .confirm-modal-actions .confirm-modal-confirm:hover{background:#dc2626}.sidebar{background:#fff;border-right:1px solid #e5e7eb;flex-direction:column;width:250px;height:100vh;transition:width .3s;display:flex;position:relative}.sidebar.collapsed{width:60px}.sidebar.collapsed .nav-label{opacity:0;visibility:hidden}.sidebar.collapsed .sidebar-header .collapse-btn{opacity:0;pointer-events:none;display:none}.sidebar.collapsed .history-section{opacity:0;visibility:hidden;pointer-events:none}.sidebar .sidebar-border{cursor:col-resize;z-index:10;-webkit-user-select:none;user-select:none;width:4px;height:100%;position:absolute;top:0;right:0}.sidebar .sidebar-border:hover,.sidebar .sidebar-border:active{background:#4646461a}.sidebar .sidebar-header{box-sizing:border-box;justify-content:space-between;align-items:center;height:64px;padding:16px;display:flex}.sidebar .sidebar-header .logo-btn{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:32px;height:32px;font-size:20px;display:flex}.sidebar .sidebar-header .logo-btn .logo-icon{width:18px;height:auto}.sidebar .sidebar-header .collapse-btn{cursor:pointer;color:#6b7280;opacity:1;visibility:visible;background:0 0;border:none;justify-content:center;align-items:center;width:24px;height:24px;font-size:20px;transition:opacity .3s,visibility .3s;display:flex}.sidebar .sidebar-header .collapse-btn img{opacity:.6;width:16px;height:16px}.sidebar .sidebar-header .collapse-btn:hover{color:#111827}.sidebar .sidebar-header .collapse-btn:hover img{opacity:1}.sidebar .sidebar-nav{flex-direction:column;gap:4px;padding:8px;display:flex}.sidebar .sidebar-nav .nav-item{cursor:pointer;color:#374151;text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:12px;width:100%;padding:10px 12px;font-size:14px;transition:background .2s;display:flex}.sidebar .sidebar-nav .nav-item:hover{background:#e5e7eb}.sidebar .sidebar-nav .nav-item.active{background:#e5e7eb;font-weight:500}.sidebar .sidebar-nav .nav-item .nav-icon{width:18px;height:18px}.sidebar .sidebar-nav .nav-item .nav-label{opacity:1;visibility:visible;white-space:nowrap;flex:1;transition:opacity .3s,visibility .3s;overflow:hidden}.sidebar .sidebar-nav .nav-item .submenu-icon{color:#9ca3af;font-size:16px}.sidebar .history-section{opacity:1;visibility:visible;flex:1;padding:16px 8px;transition:opacity .3s,visibility .3s;overflow-y:auto}.sidebar .history-section .history-header{color:#6b7280;text-transform:uppercase;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;font-weight:600;display:flex}.sidebar .history-section .history-header .expand-btn{cursor:pointer;color:#9ca3af;background:0 0;border:none;font-size:16px}.sidebar .history-section .history-list{flex-direction:column;gap:2px;display:flex}.sidebar .history-section .history-list .history-item{cursor:pointer;color:#374151;text-align:left;box-sizing:border-box;background:0 0;border:none;border-radius:6px;align-items:center;gap:4px;width:100%;padding:8px 12px;font-size:13px;transition:background .2s;display:flex;position:relative}.sidebar .history-section .history-list .history-item:hover{background:#e5e7eb}.sidebar .history-section .history-list .history-item:hover .history-item-menu-btn{opacity:1}.sidebar .history-section .history-list .history-item.active{background:#e5e7eb}.sidebar .history-section .history-list .history-item .history-item-title{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.sidebar .history-section .history-list .history-item .history-item-menu-btn{opacity:0;cursor:pointer;color:#6b7280;letter-spacing:1px;background:0 0;border:none;border-radius:4px;flex-shrink:0;padding:2px 4px;font-size:16px;line-height:1;transition:opacity .15s,background .15s,color .15s}.sidebar .history-section .history-list .history-item .history-item-menu-btn:hover{color:#111827;background:#d1d5db}.sidebar .history-section .history-list .history-item .history-item-dropdown{z-index:100;background:#fff;border:1px solid #e5e7eb;border-radius:8px;min-width:100px;position:absolute;top:calc(100% + 4px);right:8px;overflow:hidden;box-shadow:0 4px 12px #0000001a}.sidebar .history-section .history-list .history-item .history-item-dropdown .history-item-dropdown-delete{cursor:pointer;color:#ef4444;text-align:left;background:0 0;border:none;width:100%;padding:8px 14px;font-size:13px;transition:background .15s}.sidebar .history-section .history-list .history-item .history-item-dropdown .history-item-dropdown-delete:hover{background:#fee2e2}.sidebar .sidebar-user{border-top:1px solid #e5e7eb;justify-content:space-between;align-items:center;gap:8px;min-height:60px;padding:12px 16px;display:flex}.sidebar .sidebar-user .user-info{opacity:1;visibility:visible;flex-direction:column;gap:2px;transition:opacity .3s,visibility .3s;display:flex;overflow:hidden}.sidebar .sidebar-user .user-info .user-name{color:#111827;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.sidebar .sidebar-user .user-info .user-email{color:#9ca3af;white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.sidebar .sidebar-user .logout-btn{cursor:pointer;color:#9ca3af;background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:16px;transition:background .2s,color .2s;display:flex}.sidebar .sidebar-user .logout-btn:hover{color:#ef4444;background:#fee2e2}.sidebar.collapsed .sidebar-user{justify-content:center}.sidebar.collapsed .sidebar-user .user-info{opacity:0;visibility:hidden;width:0;overflow:hidden}.side-panel{width:0;min-width:0;height:100vh;transition:width .3s,min-width .3s;overflow:hidden}.side-panel.open{width:420px;min-width:420px}.side-panel .side-panel-inner{background:#fff;border-left:1px solid #e5e7eb;flex-direction:column;width:420px;height:100%;display:flex}.side-panel .side-panel-header{box-sizing:border-box;border-bottom:1px solid #f3f4f6;justify-content:space-between;align-items:center;height:64px;padding:16px 20px;display:flex}.side-panel .side-panel-header .side-panel-title{color:#111827;font-size:16px;font-weight:600}.side-panel .side-panel-header .side-panel-close{cursor:pointer;color:#6b7280;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;transition:all .15s;display:flex}.side-panel .side-panel-header .side-panel-close:hover{color:#111827;background:#f3f4f6}.side-panel .side-panel-body{flex:1;padding:24px 20px;overflow-y:auto}.side-panel .side-panel-body::-webkit-scrollbar{width:6px}.side-panel .side-panel-body::-webkit-scrollbar-track{background:0 0}.side-panel .side-panel-body::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px}.side-panel .side-panel-body::-webkit-scrollbar-thumb:hover{background:#d1d5db}.side-panel .side-panel-preview{flex-direction:column;align-items:center;gap:12px;display:flex}.side-panel .side-panel-preview .preview-image{object-fit:contain;border-radius:8px;width:100%}.side-panel .side-panel-preview .preview-name{color:#6b7280;word-break:break-all;margin:0;font-size:13px}.side-panel .side-panel-placeholder{color:#9ca3af;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;height:100%;display:flex}.side-panel .side-panel-placeholder p{margin:0;font-size:15px}.side-panel .side-panel-placeholder .hint{color:#d1d5db;font-size:13px}.input-box-container{width:100%;max-width:800px;padding:0 24px 24px}.input-box-container .image-preview-bar{gap:8px;margin-bottom:8px;padding:8px 12px;display:flex;overflow-x:auto}.input-box-container .image-preview-bar .image-preview-item{border:1px solid #e5e7eb;border-radius:8px;flex-shrink:0;width:64px;height:64px;position:relative;overflow:hidden}.input-box-container .image-preview-bar .image-preview-item .preview-thumb{object-fit:cover;width:100%;height:100%}.input-box-container .image-preview-bar .image-preview-item .upload-overlay{background:#0006;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.input-box-container .image-preview-bar .image-preview-item .upload-overlay .upload-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.6s linear infinite spin}.input-box-container .image-preview-bar .image-preview-item .remove-btn{color:#fff;cursor:pointer;opacity:0;background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:12px;line-height:1;transition:opacity .15s;display:flex;position:absolute;top:2px;right:2px}.input-box-container .image-preview-bar .image-preview-item:hover .remove-btn{opacity:1}.input-box-container .input-box{background:#f9fafb;border:2px solid #e5e7eb;border-radius:50px;align-items:center;gap:12px;padding:10px;transition:all .2s;display:flex}.input-box-container .input-box:focus-within{background:#fff;border-color:#9ca3af;box-shadow:0 0 0 3px #9ca3af1a}.input-box-container .input-box .attach-btn{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:20px;transition:background .2s;display:flex}.input-box-container .input-box .attach-btn img{width:16px;height:auto}.input-box-container .input-box .attach-btn:hover{background:#e5e7eb}.input-box-container .input-box .attach-btn:disabled{opacity:.5;cursor:not-allowed}.input-box-container .input-box .message-input{color:#111827;background:0 0;border:none;outline:none;flex:1;font-size:15px}.input-box-container .input-box .message-input::placeholder{color:#9ca3af}.input-box-container .input-box .send-btn{cursor:pointer;opacity:0;pointer-events:none;background:#111827;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;transition:opacity .2s,transform .2s,background .2s;display:flex;transform:scale(.6)}.input-box-container .input-box .send-btn--visible{opacity:1;pointer-events:auto;transform:scale(1)}.input-box-container .input-box .send-btn:hover{background:#374151}.input-box-container .input-box .send-btn:active{transform:scale(.92)}@keyframes spin{to{transform:rotate(360deg)}}.chat-main{background:#fff;flex-direction:column;flex:1;min-width:0;height:100vh;transition:flex .3s;display:flex}.chat-main .chat-header{box-sizing:border-box;justify-content:flex-end;align-items:center;gap:12px;height:64px;padding:16px 24px;display:flex}.chat-main .chat-header .header-btn{cursor:pointer;color:#374151;background:#fff;border:1px solid #e5e7eb;border-radius:20px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;transition:all .2s;display:flex}.chat-main .chat-header .header-btn:hover{background:#f9fafb;border-color:#d1d5db}.chat-main .chat-header .header-btn span:first-child{font-size:16px}.chat-main .chat-content{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:30px;padding:40px 24px;display:flex;overflow-y:auto}.chat-main .chat-content .welcome-section,.chat-main .chat-content .welcome-section .grok-logo{justify-content:center;align-items:center;display:flex}.chat-main .chat-content .welcome-section .grok-logo .logo-icon{width:190px;height:auto}.chat-box{background:#fcfcfc;border:1px solid #e5e7eb;border-radius:12px;flex-direction:column;flex:1;min-width:0;height:100vh;transition:flex .3s;display:flex;overflow:hidden}.chat-box .chat-box-messages{flex-direction:column;flex:1;gap:4px;padding:32px 0 16px;display:flex;overflow-y:auto}.chat-box .chat-box-messages::-webkit-scrollbar{width:6px}.chat-box .chat-box-messages::-webkit-scrollbar-track{background:0 0}.chat-box .chat-box-messages::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px}.chat-box .chat-box-messages::-webkit-scrollbar-thumb:hover{background:#d1d5db}.chat-box .chat-box-messages .message-wrapper{width:100%;max-width:800px;margin:0 auto;padding:2px 24px;display:flex}.chat-box .chat-box-messages .message-wrapper.user{justify-content:flex-end}.chat-box .chat-box-messages .message-wrapper.ai{justify-content:flex-start}.chat-box .chat-box-messages .message-wrapper .message-bubble{word-break:break-word;white-space:pre-wrap;max-width:70%;padding:12px 16px;font-size:15px;line-height:1.6}.chat-box .chat-box-messages .message-wrapper .message-bubble.user{color:#111827;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:20px 20px 4px}.chat-box .chat-box-messages .message-wrapper .message-bubble.ai{color:#111827;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:20px 20px 20px 4px;max-width:70%;padding:12px 16px}.chat-box .chat-box-messages .message-wrapper .message-bubble .message-images{flex-wrap:wrap;gap:6px;margin-bottom:8px;display:flex}.chat-box .chat-box-messages .message-wrapper .message-bubble .message-images .message-image{object-fit:cover;cursor:pointer;border-radius:8px;max-width:200px;max-height:200px;transition:opacity .15s}.chat-box .chat-box-messages .message-wrapper .message-bubble .message-images .message-image:hover{opacity:.85}.chat-box .chat-box-input{border-top:1px solid #f3f4f6;justify-content:center;padding-top:8px;display:flex}.login-page{background:#f3f4f6;justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.login-card{background:#fff;border-radius:16px;flex-direction:column;align-items:center;width:100%;max-width:400px;padding:40px 36px;display:flex;box-shadow:0 4px 24px #00000014}.login-logo{margin-bottom:8px;font-size:40px}.login-title{color:#111827;margin-bottom:28px;font-size:22px;font-weight:700}.login-tabs{background:#f3f4f6;border-radius:10px;width:100%;margin-bottom:24px;padding:4px;display:flex}.login-tabs button{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:7px;flex:1;padding:8px 0;font-size:14px;font-weight:500;transition:background .2s,color .2s}.login-tabs button.active{color:#111827;background:#fff;box-shadow:0 1px 4px #0000001a}.login-tabs button:hover:not(.active){color:#374151}.login-form{flex-direction:column;gap:16px;width:100%;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:#374151;font-size:13px;font-weight:500}.form-group input{color:#111827;border:1px solid #e5e7eb;border-radius:8px;outline:none;padding:10px 14px;font-size:14px;transition:border-color .2s}.form-group input::placeholder{color:#9ca3af}.form-group input:focus{border-color:#6b7280}.login-error{color:#ef4444;text-align:center;margin:-4px 0;font-size:13px}.submit-btn{color:#fff;cursor:pointer;background:#111827;border:none;border-radius:8px;margin-top:4px;padding:11px 0;font-size:15px;font-weight:500;transition:background .2s}.submit-btn:hover:not(:disabled){background:#374151}.submit-btn:disabled{opacity:.6;cursor:not-allowed}