:root{--bg-color:#05070a;--bg-secondary:#0a0c10a6;--accent-cyan:#00f0ff;--accent-cyan-glow:#00f0ff99;--accent-purple:#bd00ff;--accent-purple-glow:#bd00ff99;--accent-blue:#0d6efd;--text-primary:#fff;--text-secondary:#8b9bb4;--border-color:#ffffff26;--glass-bg:#0f141c66;--glass-border:#ffffff1a;--glass-highlight:#ffffff0d;--font-heading:"Outfit", sans-serif;--font-body:"Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;line-height:1.6;position:relative;overflow-x:hidden}body:before,body:after{content:"";z-index:-1;filter:blur(100px);opacity:.15;pointer-events:none;border-radius:50%;width:60vw;height:60vw;animation:20s cubic-bezier(.4,0,.2,1) infinite alternate floatOrb;position:fixed}body:before{background:radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);top:-20%;left:-10%}body:after{background:radial-gradient(circle, var(--accent-purple) 0%, transparent 70%);animation-delay:-10s;bottom:-20%;right:-10%}@keyframes floatOrb{0%{transform:translate(0)scale(1)}50%{transform:translate(5%,5%)scale(1.1)}to{transform:translate(-5%,10%)scale(.9)}}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--text-primary);letter-spacing:-.02em;font-weight:600}a{color:var(--accent-cyan);text-decoration:none;transition:color .3s}a:hover{color:var(--accent-purple);text-shadow:0 0 8px var(--accent-purple-glow)}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 0 var(--glass-highlight), 0 8px 32px 0 #00000080;border-radius:20px;padding:24px;position:relative;overflow:hidden}.glass-panel:before{content:"";-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(135deg,#fff3 0%,#fff0 100%);border-radius:20px;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.text-glow{text-shadow:0 0 15px var(--accent-cyan-glow)}.text-gradient{background:linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;display:inline-block}.btn{font-family:var(--font-heading);cursor:pointer;border:1px solid var(--glass-border);color:var(--text-primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border-radius:12px;padding:12px 24px;font-size:.95rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-block}.btn:hover{background:#ffffff14;transform:translateY(-2px);box-shadow:0 4px 15px #0003}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);color:#fff;z-index:1;border:none;position:relative}.btn-primary:before{content:"";background:linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-cyan) 100%);opacity:0;z-index:-1;border-radius:12px;transition:opacity .3s;position:absolute;inset:0}.btn-primary:hover:before{opacity:1}.btn-primary:hover{box-shadow:0 0 20px var(--accent-cyan-glow);transform:translateY(-2px)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.app-container{grid-template-rows:100vh;grid-template-columns:280px 1fr 320px;gap:24px;max-width:1800px;margin:0 auto;padding:24px;display:grid}.sidebar{flex-direction:column;gap:32px;height:calc(100vh - 48px);display:flex}.brand{border-bottom:1px solid var(--glass-highlight);align-items:center;gap:16px;padding-bottom:12px;display:flex}.brand-icon{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));width:40px;height:40px;font-size:1.2rem;font-weight:700;font-family:var(--font-heading);box-shadow:0 0 20px var(--accent-purple-glow);border-radius:12px;justify-content:center;align-items:center;display:flex;position:relative}.brand-icon:after{content:"";background:linear-gradient(135deg, var(--accent-cyan), transparent, var(--accent-purple));z-index:-1;filter:blur(5px);border-radius:14px;position:absolute;inset:-2px}.brand h1{letter-spacing:-.5px;font-size:1.8rem}.nav-menu{flex-direction:column;gap:8px;display:flex}.nav-item{color:var(--text-secondary);cursor:pointer;border-radius:12px;align-items:center;gap:14px;padding:14px 18px;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.nav-item:hover{color:var(--text-primary);background:#ffffff0d;transform:translate(4px)}.nav-item.active{color:var(--accent-cyan);border-left:3px solid var(--accent-cyan);background:linear-gradient(90deg,#00f0ff1a,#0000)}.nav-item.active:before{content:"";background:var(--accent-cyan);width:3px;box-shadow:0 0 15px var(--accent-cyan-glow);position:absolute;top:0;bottom:0;left:0}.main-content{flex-direction:column;height:calc(100vh - 48px);display:flex}.header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.header h2{margin-bottom:4px;font-size:2rem}.header p{color:var(--text-secondary);font-size:.95rem}.chat-room{flex-direction:column;flex:1;display:flex;overflow:hidden;box-shadow:inset 0 0 50px #00000080}.chat-messages{flex-direction:column;flex:1;gap:20px;margin-bottom:24px;padding-right:12px;display:flex;overflow-y:auto}.message{gap:16px;animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards slideUpFade;display:flex}.message-avatar{background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.2rem;font-weight:700;display:flex;box-shadow:0 4px 10px #0000004d}.message-avatar.ai{color:var(--accent-cyan);background:linear-gradient(135deg,#b026ff26,#00f0ff26);border-color:#00f0ff66;box-shadow:0 0 15px #00f0ff33}.message-content{border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border-radius:0 16px 16px;max-width:85%;padding:18px 20px;transition:all .3s;position:relative}.message-content:hover{background:#ffffff0d;border-color:#ffffff26}.message-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.message-sender{color:var(--accent-cyan);letter-spacing:.5px;font-size:.95rem;font-weight:700}.message:not(:first-child) .message-sender[data-isai=false]{color:var(--text-primary)}.message-time{color:var(--text-secondary);font-size:.8rem}.message-text{white-space:pre-wrap;font-size:.95rem;line-height:1.6}.typing-indicator{align-items:center;gap:5px;padding:5px 0;display:flex}.typing-dot{background-color:var(--accent-cyan);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite both typingBounce}.typing-dot:first-child{animation-delay:-.32s}.typing-dot:nth-child(2){animation-delay:-.16s}@keyframes typingBounce{0%,80%,to{opacity:.5;transform:scale(0)}40%{opacity:1;box-shadow:0 0 10px var(--accent-cyan-glow);transform:scale(1)}}.chat-input{border:1px solid var(--glass-border);background:#0000004d;border-radius:16px;align-items:center;gap:16px;padding:12px 16px;transition:all .3s;display:flex}.chat-input:focus-within{border-color:var(--accent-cyan);background:#00000080;box-shadow:0 0 20px #00f0ff33}.chat-input input{color:var(--text-primary);font-family:var(--font-body);background:0 0;border:none;outline:none;flex:1;padding:8px;font-size:1rem}.chat-input input::placeholder{color:var(--text-secondary)}.agents-panel{flex-direction:column;gap:24px;height:calc(100vh - 48px);display:flex}.panel-header{border-bottom:1px solid var(--glass-highlight);margin-bottom:8px;padding-bottom:16px;font-size:1.4rem}.agent-card{border:1px solid var(--glass-highlight);background:#ffffff05;border-radius:16px;align-items:center;gap:16px;padding:16px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.agent-card:before{content:"";background:linear-gradient(to bottom, var(--accent-cyan), var(--accent-purple));opacity:0;width:4px;height:100%;transition:opacity .3s;position:absolute;top:0;left:0}.agent-card:hover{background:#ffffff0f;border-color:#ffffff26;transform:translate(-6px);box-shadow:0 8px 20px #0000004d}.agent-card:hover:before{opacity:1}.status-dot{background:#0f8;border-radius:50%;flex-shrink:0;width:12px;height:12px;position:relative;box-shadow:0 0 12px #0f89}.status-dot.busy{background:#ffb800;box-shadow:0 0 12px #ffb80099}.status-dot:after{content:"";border:1px solid #0f8;border-radius:50%;animation:2s infinite pulse;position:absolute;inset:-4px}.status-dot.busy:after{border-color:#ffb800;animation:1s infinite pulseBusy}.agent-info{flex:1}.agent-name{letter-spacing:.3px;margin-bottom:2px;font-size:1.05rem;font-weight:700}.agent-role{color:var(--text-secondary);font-size:.85rem}@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pulse{0%{opacity:.8;transform:scale(.8)}to{opacity:0;transform:scale(1.5)}}@keyframes pulseBusy{0%{opacity:.8;transform:scale(.8)}to{opacity:0;transform:scale(1.2)}}.dashboard-view{flex:1;padding:24px;overflow-y:auto}.analytics-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px;display:grid}.stat-card{background:#0f121999;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;padding:24px;transition:all .3s;display:flex}.stat-card:hover{border-color:var(--accent-cyan);transform:translateY(-5px);box-shadow:0 10px 30px #00f0ff26}.stat-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-size:.9rem}.stat-value{color:#fff;margin-bottom:8px;font-size:2.5rem;font-weight:700}.stat-trend{color:var(--accent-cyan);font-size:.85rem}.health-bar-container{background:#0f121999;border:1px solid #ffffff1a;border-radius:16px;padding:24px}.health-bar{background:#ffffff1a;border-radius:4px;height:8px;margin-top:12px;overflow:hidden}.health-bar-fill{background:linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));width:98%;height:100%;box-shadow:0 0 10px var(--accent-cyan);border-radius:4px}.roster-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;display:grid}.roster-card{background:#0f121999;border:1px solid #ffffff1a;border-radius:16px;align-items:center;gap:20px;padding:24px;transition:all .3s;display:flex}.roster-card:hover{border-color:var(--accent-purple);box-shadow:0 10px 30px #bd00ff26}.roster-avatar{background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:3rem;display:flex;box-shadow:0 0 20px #00f0ff33}.settings-grid{grid-template-columns:1fr;gap:16px;max-width:800px;display:grid}.setting-item{background:#0f121999;border:1px solid #ffffff1a;border-radius:16px;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.setting-info h4{color:#fff;margin:0 0 4px;font-size:1.1rem}.setting-info p{color:var(--text-secondary);margin:0;font-size:.9rem}.toggle-switch{cursor:pointer;background:#fff3;border-radius:13px;width:50px;height:26px;transition:all .3s;position:relative}.toggle-switch.active{background:var(--accent-cyan);box-shadow:0 0 10px #00f0ff80}.toggle-switch:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:all .3s;position:absolute;top:3px;left:3px}.toggle-switch.active:after{transform:translate(24px)}.modal-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2000;background:#000000b3;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.modal-content{width:90%;max-width:400px;box-shadow:0 20px 50px #00000080, inset 0 0 0 1px var(--glass-highlight);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);background:#0f1219d9;border-radius:20px;padding:32px;animation:.3s cubic-bezier(.4,0,.2,1) slideUp;position:relative}.modal-header{text-align:center;margin-bottom:24px}.modal-header h2{margin-bottom:8px;font-size:1.5rem}.input-group{margin-bottom:20px}.input-group label{color:var(--text-secondary);margin-bottom:8px;font-size:.9rem;display:block}.modal-input,.modal-select{width:100%;color:var(--text-primary);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:12px 16px;font-size:1rem;transition:all .3s}.modal-input:focus,.modal-select:focus{border-color:var(--accent-cyan);outline:none;box-shadow:0 0 15px #00f0ff33}.modal-select option{color:#fff;background:#0a0c10}.modal-actions{gap:12px;margin-top:32px;display:flex}.btn-cancel{color:var(--text-primary);cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:12px;flex:1;padding:12px;font-weight:600;transition:all .3s}.btn-cancel:hover{background:#ffffff1a}.btn-confirm{flex:2}.deploy-spinner{border:3px solid #ffffff1a;border-top-color:#fff;border-radius:50%;width:20px;height:20px;margin:0 auto;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=1200px){.app-container{grid-template-columns:240px 1fr 280px}}@media (width<=1024px){.app-container{grid-template-columns:240px 1fr}.agents-panel{display:none}}@media (width<=768px){.app-container{grid-template-columns:1fr;padding:16px}.sidebar{z-index:1000;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-right:1px solid var(--glass-highlight);background:#0a0c10f2;border-radius:0;width:280px;height:100vh;padding:24px;transition:left .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;left:-100%}.sidebar.mobile-open{left:0}.main-content{height:calc(100vh - 32px)}.header h2{font-size:1.5rem}.mobile-menu-btn{color:var(--accent-cyan);cursor:pointer;background:0 0;border:none;margin-right:12px;font-size:1.8rem;display:block!important}}.mobile-menu-btn{display:none}
