.task-modal-overlay{position:fixed;inset:0;background:#0009;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.task-modal{background:#fff;border-radius:16px;box-shadow:0 20px 60px #bf242a26;width:100%;max-width:1200px;height:80vh;display:flex;flex-direction:column;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.task-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:2px solid var(--color-secondary, #fdeff2);background:linear-gradient(to right,#fff 0%,var(--color-secondary, #fdeff2) 100%)}.task-modal-title{font-size:20px;font-weight:700;color:#333;display:flex;align-items:center;gap:12px}.task-modal-title-icon{width:24px;height:24px;color:var(--color-primary, #bf242a);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.task-modal-actions{display:flex;align-items:center;gap:16px}.task-modal-timer{font-size:14px;font-weight:600;color:var(--color-primary, #bf242a);padding:6px 12px;background:var(--color-secondary, #fdeff2);border-radius:6px}.task-modal-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#999;cursor:pointer;border-radius:6px;transition:all .2s ease}.task-modal-btn:hover{background:var(--color-secondary, #fdeff2);color:var(--color-primary, #bf242a)}.task-modal-body{flex:1;display:flex;overflow:hidden}.task-steps-panel{width:50%;padding:24px;overflow-y:auto;border-right:2px solid var(--color-secondary, #fdeff2)}.task-steps-list{display:flex;flex-direction:column;gap:20px}.task-step-item{display:flex;gap:16px;position:relative}.task-step-item:before{content:"";position:absolute;left:16px;top:40px;bottom:-20px;width:2px;background:linear-gradient(to bottom,var(--color-secondary, #fdeff2),transparent)}.task-step-item:last-child:before{display:none}.task-step-icon{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;background:#f5f5f5;color:#999;border:3px solid white;box-shadow:0 2px 8px #0000001a;position:relative;z-index:1}.task-step-icon.pending{background:#f5f5f5;color:#999}.task-step-icon.processing{background:var(--color-primary, #bf242a);color:#fff;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.task-step-icon.success{background:#10b981;color:#fff}.task-step-icon.failed{background:#ef4444;color:#fff}.task-step-content{flex:1;padding-top:4px}.task-step-title{font-size:16px;font-weight:600;color:#333;margin-bottom:6px}.task-step-description{font-size:14px;color:#666;line-height:1.5;margin-bottom:12px}.task-step-status{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;background:var(--color-secondary, #fdeff2);border-radius:6px;font-size:13px;color:var(--color-primary, #bf242a)}.task-step-spinner{width:16px;height:16px;border:2px solid var(--color-secondary, #fdeff2);border-top-color:var(--color-primary, #bf242a);border-radius:50%;animation:spin .8s linear infinite}.task-step-thumbnail{margin-top:12px;cursor:pointer;border-radius:8px;overflow:hidden;transition:all .3s ease;border:2px solid transparent}.task-step-thumbnail:hover{border-color:var(--color-primary, #bf242a);transform:scale(1.02)}.task-step-thumbnail img,.task-step-thumbnail video{width:120px;height:120px;object-fit:cover;display:block}.task-step-time{font-size:12px;color:#999;margin-top:6px}.task-step-image-placeholder{margin-top:12px;width:120px;height:120px;border-radius:8px;background:linear-gradient(135deg,#f5f5f5,#e0e0e0);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.task-step-image-placeholder:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);animation:shimmer-slide 2s infinite}@keyframes shimmer-slide{0%{transform:translate(-50%) translateY(-50%)}to{transform:translate(50%) translateY(50%)}}.task-step-image-loading-spinner{width:40px;height:40px;border:4px solid rgba(191,36,42,.2);border-top-color:var(--color-primary, #bf242a);border-radius:50%;animation:spin .8s linear infinite;position:relative;z-index:1}.agent-upgrade-card{margin-top:24px;padding:24px;background:linear-gradient(135deg,var(--color-secondary, #fdeff2) 0%,#fff 100%);border:2px solid var(--color-primary, #bf242a);border-radius:12px;text-align:center;animation:slideIn .5s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.agent-upgrade-icon{font-size:48px;margin-bottom:12px;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.agent-upgrade-card h4{font-size:18px;font-weight:700;color:#333;margin:0 0 8px}.agent-upgrade-card p{font-size:14px;color:#666;margin:0 0 16px}.agent-upgrade-card .btn{margin:0 auto}.task-preview-panel{width:50%;padding:24px;display:flex;flex-direction:column;gap:16px;background:#fafafa}.task-preview-main{flex:1;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 12px #0000000d;border:2px solid var(--color-secondary, #fdeff2)}.task-preview-main img,.task-preview-main video{max-width:100%;max-height:100%;object-fit:contain}.task-preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:12px;color:#999}.task-preview-placeholder svg{width:64px;height:64px;color:#ddd}.task-preview-placeholder p{font-size:16px;font-weight:500}.task-preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.task-preview-thumbnail{aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s ease;border:3px solid transparent;background:#fff}.task-preview-thumbnail:hover{border-color:var(--color-primary, #bf242a);transform:translateY(-2px);box-shadow:0 6px 16px #bf242a33}.task-preview-thumbnail.active{border-color:var(--color-primary, #bf242a)}.task-preview-thumbnail img,.task-preview-thumbnail video{width:100%;height:100%;object-fit:cover;display:block}.task-modal-footer{padding:20px 24px;border-top:2px solid var(--color-secondary, #fdeff2);background:#fff}.task-progress-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.task-progress-label{font-size:14px;font-weight:600;color:#666}.task-progress-value{font-size:18px;font-weight:700;color:var(--color-primary, #bf242a)}.task-progress-bar-container{width:100%;height:8px;background:var(--color-secondary, #fdeff2);border-radius:4px;overflow:hidden}.task-progress-bar{height:100%;background:linear-gradient(to right,var(--color-primary, #bf242a),#e63946);border-radius:4px;transition:width .5s ease;position:relative}.task-progress-bar:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.task-minimized{position:fixed;bottom:24px;right:24px;background:#fff;box-shadow:0 8px 24px #bf242a33;border-radius:12px;padding:16px 20px;z-index:1000;cursor:pointer;transition:all .3s ease;border:2px solid var(--color-secondary, #fdeff2)}.task-minimized:hover{transform:translateY(-4px);box-shadow:0 12px 32px #bf242a4d}.task-minimized-content{display:flex;align-items:center;gap:16px}.task-minimized-spinner{width:32px;height:32px;border:3px solid var(--color-secondary, #fdeff2);border-top-color:var(--color-primary, #bf242a);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}.task-minimized-text h4{font-size:15px;font-weight:600;color:#333;margin:0 0 4px}.task-minimized-text p{font-size:13px;color:var(--color-primary, #bf242a);margin:0;font-weight:600}.task-loading{position:fixed;inset:0;background:#0009;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.task-loading-content{background:#fff;border-radius:16px;padding:40px;text-align:center;box-shadow:0 20px 60px #bf242a26}.task-loading-spinner{width:48px;height:48px;border:4px solid var(--color-secondary, #fdeff2);border-top-color:var(--color-primary, #bf242a);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 20px}.task-loading-text{font-size:16px;color:#666}@media (max-width: 1024px){.task-modal{height:90vh}.task-modal-body{flex-direction:column}.task-steps-panel,.task-preview-panel{width:100%;border-right:none}.task-steps-panel{height:40%;border-bottom:2px solid var(--color-secondary, #fdeff2)}.task-preview-panel{height:60%}.task-preview-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 640px){.task-modal{height:95vh;border-radius:12px}.task-modal-header{padding:16px}.task-modal-title{font-size:16px}.task-steps-panel,.task-preview-panel{padding:16px}.task-preview-grid{grid-template-columns:repeat(2,1fr);gap:8px}.task-minimized{bottom:16px;right:16px;padding:12px 16px}.task-minimized-content{gap:12px}.task-minimized-spinner{width:28px;height:28px}}[data-theme=dark] .task-modal-overlay{background:#000c}[data-theme=dark] .task-modal{background:var(--color-bg-secondary, #1a1a1a);box-shadow:0 20px 60px #00000080}[data-theme=dark] .task-modal-header{background:linear-gradient(to right,var(--color-bg-secondary, #1a1a1a) 0%,rgba(0,123,67,.1) 100%);border-bottom:2px solid rgba(0,123,67,.2)}[data-theme=dark] .task-modal-title{color:var(--color-text, #ffffff)}[data-theme=dark] .task-modal-timer{background:#007b4333;color:var(--color-primary, #00a85a)}[data-theme=dark] .task-modal-btn{color:var(--color-text-secondary, #bed3ca)}[data-theme=dark] .task-modal-btn:hover{background:#007b4333;color:var(--color-primary, #00a85a)}[data-theme=dark] .task-steps-panel{border-right:2px solid rgba(0,123,67,.2)}[data-theme=dark] .task-step-item:before{background:linear-gradient(to bottom,rgba(0,123,67,.3),transparent)}[data-theme=dark] .task-step-icon{background:var(--color-bg, #16160e);color:var(--color-text-secondary, #bed3ca);border-color:var(--color-bg-secondary, #1a1a1a)}[data-theme=dark] .task-step-icon.pending{background:var(--color-bg, #16160e);color:#666}[data-theme=dark] .task-step-icon.processing{background:var(--color-primary, #00a85a);color:#fff}[data-theme=dark] .task-step-title{color:var(--color-text, #ffffff)}[data-theme=dark] .task-step-description{color:var(--color-text-secondary, #bed3ca)}[data-theme=dark] .task-step-status{background:#007b4333;color:var(--color-primary, #00a85a)}[data-theme=dark] .task-step-spinner{border-color:#007b4333;border-top-color:var(--color-primary, #00a85a)}[data-theme=dark] .task-step-thumbnail{border-color:#007b4333}[data-theme=dark] .task-step-thumbnail:hover{border-color:var(--color-primary, #00a85a)}[data-theme=dark] .task-step-time{color:#666}[data-theme=dark] .task-step-image-placeholder{background:linear-gradient(135deg,var(--color-bg, #16160e) 0%,rgba(0,123,67,.1) 100%)}[data-theme=dark] .task-step-image-loading-spinner{border-color:#007b4333;border-top-color:var(--color-primary, #00a85a)}[data-theme=dark] .agent-upgrade-card{background:linear-gradient(135deg,rgba(0,123,67,.2) 0%,var(--color-bg-secondary, #1a1a1a) 100%);border-color:var(--color-primary, #00a85a)}[data-theme=dark] .agent-upgrade-card h4{color:var(--color-text, #ffffff)}[data-theme=dark] .agent-upgrade-card p{color:var(--color-text-secondary, #bed3ca)}[data-theme=dark] .task-preview-panel{background:var(--color-bg, #16160e)}[data-theme=dark] .task-preview-main{background:var(--color-bg-secondary, #1a1a1a);border-color:#007b4333}[data-theme=dark] .task-preview-placeholder{color:#666}[data-theme=dark] .task-preview-placeholder svg{color:#444}[data-theme=dark] .task-preview-thumbnail{background:var(--color-bg-secondary, #1a1a1a);border-color:#007b4333}[data-theme=dark] .task-preview-thumbnail:hover{border-color:var(--color-primary, #00a85a);box-shadow:0 6px 16px #00a85a4d}[data-theme=dark] .task-preview-thumbnail.active{border-color:var(--color-primary, #00a85a)}[data-theme=dark] .task-modal-footer{background:var(--color-bg-secondary, #1a1a1a);border-top:2px solid rgba(0,123,67,.2)}[data-theme=dark] .task-progress-label{color:var(--color-text-secondary, #bed3ca)}[data-theme=dark] .task-progress-value{color:var(--color-primary, #00a85a)}[data-theme=dark] .task-progress-bar-container{background:#007b4333}[data-theme=dark] .task-progress-bar{background:linear-gradient(to right,var(--color-primary, #00a85a),#00ff88)}[data-theme=dark] .task-minimized{background:var(--color-bg-secondary, #1a1a1a);border-color:#007b434d;box-shadow:0 8px 24px #00a85a33}[data-theme=dark] .task-minimized:hover{box-shadow:0 12px 32px #00a85a4d}[data-theme=dark] .task-minimized-spinner{border-color:#007b4333;border-top-color:var(--color-primary, #00a85a)}[data-theme=dark] .task-minimized-text h4{color:var(--color-text, #ffffff)}[data-theme=dark] .task-minimized-text p{color:var(--color-primary, #00a85a)}[data-theme=dark] .task-loading{background:#000c}[data-theme=dark] .task-loading-content{background:var(--color-bg-secondary, #1a1a1a);box-shadow:0 20px 60px #00000080}[data-theme=dark] .task-loading-spinner{border-color:#007b4333;border-top-color:var(--color-primary, #00a85a)}[data-theme=dark] .task-loading-text{color:var(--color-text-secondary, #bed3ca)}
