:root{--primary: #ff6b6b;--primary-glow: rgba(255, 107, 107, .5);--secondary: #4ecdc4;--secondary-glow: rgba(78, 205, 196, .5);--accent: #ffe66d;--dark: #0a0a0f;--dark-glass: rgba(10, 10, 15, .85);--light: #f7f7f7;--success: #51cf66;--warning: #fcc419;--error: #ff6b6b;--font-main: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--transition-fast: .15s ease;--transition-normal: .3s ease}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-main);background:var(--dark);color:var(--light)}#loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a0a0f,#1a1a2e,#0a0a0f);transition:opacity .5s ease,visibility .5s ease}#loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loader{text-align:center}.loader .lobster{font-size:80px;animation:bounce 1s ease-in-out infinite,glow 2s ease-in-out infinite}.loader h1{font-size:48px;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:var(--spacing-md) 0}.loader p{color:#fff9;margin-bottom:var(--spacing-lg)}.progress-bar{width:200px;height:4px;background:#ffffff1a;border-radius:2px;margin:0 auto;overflow:hidden}.progress{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:2px;transition:width .3s ease}#canvas-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1}#canvas-container canvas{width:100%;height:100%;display:block}#ui-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;pointer-events:none}#ui-overlay>*{pointer-events:auto}#top-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(180deg,var(--dark-glass) 0%,transparent 100%)}.logo{display:flex;align-items:center;gap:var(--spacing-sm)}.logo .lobster-icon{font-size:32px;filter:drop-shadow(0 0 10px var(--primary-glow))}.logo .title{font-size:24px;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.docs-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:var(--spacing-sm);background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;transition:all var(--transition-fast)}.docs-button:hover{background:#ff6b6b33;border-color:var(--primary);transform:scale(1.05)}.docs-button .book-icon{width:18px;height:18px;color:var(--light);transition:color var(--transition-fast)}.docs-button:hover .book-icon{color:var(--primary)}.connection-status{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:linear-gradient(135deg,#ff6b6b26,#4ecdc426);border-radius:20px;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--warning);animation:pulse 1.5s ease-in-out infinite;cursor:pointer;transition:transform .2s;pointer-events:auto}.status-dot:hover{transform:scale(1.3)}.status-dot.connected{background:var(--success);box-shadow:0 0 10px var(--success);animation:none}.status-dot.connecting{background:var(--warning);box-shadow:0 0 10px var(--warning)}.status-dot.disconnected{background:#888;animation:none}.status-dot.error{background:var(--error);box-shadow:0 0 10px var(--error);animation:none}.status-dot.demo{background:var(--secondary);box-shadow:0 0 10px var(--secondary);animation:none}.header-actions{display:flex;align-items:center;gap:var(--spacing-md)}.icon-button{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:8px;cursor:pointer;transition:all var(--transition-fast)}.icon-button:hover{background:#ff6b6b33;border-color:var(--primary)}.icon-button svg{width:18px;height:18px;color:#fff9}.icon-button:hover svg{color:var(--primary)}.activity-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;background:var(--primary);border-radius:9px;font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}.activity-badge:empty,.activity-badge[data-count="0"]{display:none}.agent-count{display:flex;flex-direction:column;align-items:flex-end}.agent-count .count{font-size:24px;font-weight:700;color:var(--secondary);text-shadow:0 0 20px var(--secondary-glow)}.agent-count .label{font-size:12px;color:#ffffff80;text-transform:uppercase;letter-spacing:1px}#observer-banner,#agent-banner{position:absolute;top:16px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:linear-gradient(135deg,#ff6b6b33,#4ecdc433);border:1px solid rgba(255,255,255,.2);border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:1px;z-index:90;pointer-events:none}#agent-banner{border-color:#ff6b6b66;background:linear-gradient(135deg,#ff6b6b4d,#ff6b6b1a)}#agent-banner span:first-child{color:#ff6b6b}#observer-banner .hint{color:#fff9;font-weight:400;text-transform:none;letter-spacing:0}.observer-login-btn{margin-left:8px;padding:4px 14px;background:#ff6b6b40;border:1px solid rgba(255,107,107,.5);border-radius:12px;color:var(--primary);font-size:11px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;transition:all .2s;pointer-events:auto}.observer-login-btn:hover{background:#ff6b6b66;border-color:var(--primary);transform:scale(1.05)}#activity-feed{position:absolute;top:80px;right:var(--spacing-lg);width:320px;max-height:400px;background:var(--dark-glass);border-radius:12px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;transition:transform .3s ease,opacity .3s ease}#activity-feed.feed-hidden{transform:translate(350px);opacity:0;pointer-events:none}.feed-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid rgba(255,255,255,.1)}#activity-feed h3{font-size:14px;font-weight:600;margin:0}.feed-close-btn{background:none;border:none;color:#ffffff80;font-size:20px;cursor:pointer;padding:0;line-height:1;transition:color var(--transition-fast)}.feed-close-btn:hover{color:var(--primary)}.feed-list{max-height:340px;overflow-y:auto;padding:var(--spacing-sm)}.feed-item{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm);margin-bottom:var(--spacing-xs);background:#ffffff08;border-radius:8px;animation:slideIn .3s ease}.feed-item .agent-icon{font-size:20px}.feed-item .content{flex:1;min-width:0}.feed-item .agent-name{font-size:12px;font-weight:600;color:var(--secondary)}.feed-item .action{font-size:11px;color:#ffffffb3;font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#profile-panel{position:absolute;top:80px;right:var(--spacing-lg);width:280px;background:var(--dark-glass);border-radius:12px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;transition:transform .3s ease,opacity .3s ease;z-index:100}#profile-panel.feed-hidden{transform:translate(320px);opacity:0;pointer-events:none}#profile-panel h3{font-size:14px;font-weight:600;margin:0}.profile-stats{padding:8px 0}.stat-row{display:flex;align-items:center;padding:10px 16px;gap:10px;transition:background .2s}.stat-row:hover{background:#ffffff0d}.stat-icon{font-size:18px;width:28px;text-align:center}.stat-label{flex:1;font-size:13px;color:#ffffffb3}.stat-value{font-size:14px;font-weight:700;color:var(--primary)}#leaderboard-panel{position:absolute;top:80px;right:var(--spacing-lg);width:340px;max-height:500px;background:var(--dark-glass);border-radius:12px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;transition:transform .3s ease,opacity .3s ease;z-index:100}#leaderboard-panel.feed-hidden{transform:translate(380px);opacity:0;pointer-events:none}#leaderboard-panel h3{font-size:14px;font-weight:600;margin:0}.leaderboard-tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid rgba(255,255,255,.1);background:#0003}.leaderboard-tab{flex:1;padding:6px 8px;font-size:11px;font-weight:500;background:transparent;border:none;border-radius:6px;color:#fff9;cursor:pointer;transition:all .2s ease}.leaderboard-tab:hover{background:#ffffff1a;color:#ffffffe6}.leaderboard-tab.active{background:var(--primary);color:#fff}.leaderboard-content{padding:8px}.leaderboard-list{max-height:360px;overflow-y:auto}.leaderboard-item{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:6px;background:#ffffff08;border-radius:8px;transition:background .2s ease}.leaderboard-item:hover{background:#ffffff14}.leaderboard-item.rank-1{background:linear-gradient(135deg,#ffd70026,#ffd7000d);border:1px solid rgba(255,215,0,.3)}.leaderboard-item.rank-2{background:linear-gradient(135deg,#c0c0c026,#c0c0c00d);border:1px solid rgba(192,192,192,.3)}.leaderboard-item.rank-3{background:linear-gradient(135deg,#cd7f3226,#cd7f320d);border:1px solid rgba(205,127,50,.3)}.leaderboard-rank{font-size:16px;font-weight:700;width:28px;text-align:center;color:#ffffff80}.leaderboard-item.rank-1 .leaderboard-rank{color:gold}.leaderboard-item.rank-2 .leaderboard-rank{color:silver}.leaderboard-item.rank-3 .leaderboard-rank{color:#cd7f32}.leaderboard-info{flex:1;min-width:0}.leaderboard-name{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leaderboard-owner{font-size:11px;color:#ffffff80}.leaderboard-stat{font-size:14px;font-weight:600;color:var(--secondary)}.leaderboard-empty{text-align:center;padding:40px 20px;color:#fff6;font-size:13px}.leaderboard-footer{padding:8px 12px;border-top:1px solid rgba(255,255,255,.1);text-align:center}.leaderboard-update-time{font-size:11px;color:#fff6}#controls-info{position:absolute;bottom:var(--spacing-lg);left:var(--spacing-lg);background:linear-gradient(135deg,#ff6b6b26,#4ecdc426);padding:var(--spacing-md);border-radius:16px;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#controls-info.collapsed{padding:0;background:transparent;border:none;-webkit-backdrop-filter:none;backdrop-filter:none}#controls-info.collapsed .controls-content{display:none}#controls-collapse-btn{position:absolute;top:6px;right:6px;width:20px;height:20px;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}#controls-collapse-btn:hover{background:#fff3;border-color:#ffffff4d}#controls-collapse-btn svg{width:12px;height:12px;color:#fff9}#controls-collapse-btn:hover svg{color:var(--light)}#controls-info.collapsed #controls-collapse-btn{width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.2)}#controls-info.collapsed #controls-collapse-btn svg{width:18px;height:18px;color:var(--light)}#controls-collapse-btn .expand-icon{display:none}#controls-info.collapsed #controls-collapse-btn{position:static}#controls-info.collapsed #controls-collapse-btn .collapse-icon{display:none}#controls-info.collapsed #controls-collapse-btn .expand-icon{display:block}#controls-info p{font-size:12px;color:#ffffffb3;margin-bottom:var(--spacing-xs)}#controls-info p:last-child{margin-bottom:0}kbd{display:inline-block;padding:2px 6px;font-size:11px;font-family:var(--font-mono);background:#ffffff1a;border-radius:4px;border:1px solid rgba(255,255,255,.2);margin-right:2px}#bottom-right-panel{position:absolute;bottom:var(--spacing-lg);right:var(--spacing-lg);display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-sm)}#chat-mini{width:320px;max-height:50vh;background:var(--dark-glass);border-radius:8px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}#chat-mini .chat-mini-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:linear-gradient(135deg,#ff6b6b33,#4ecdc433);border-bottom:1px solid rgba(255,255,255,.1)}#chat-mini .chat-mini-title{font-size:12px;font-weight:600;color:var(--light)}#chat-mini .chat-mini-collapse{background:none;border:none;color:var(--light);font-size:18px;cursor:pointer;padding:0 4px;opacity:.7;transition:opacity .2s}#chat-mini .chat-mini-collapse:hover{opacity:1}#chat-mini .chat-messages{padding:var(--spacing-sm);max-height:calc(50vh - 40px);overflow-y:auto}#chat-mini.collapsed .chat-messages{display:none}#chat-mini.collapsed{max-height:none}#chat-mini:not(.collapsed) .chat-messages:empty{padding:0;min-height:0}#coordinates{position:fixed;top:70px;left:var(--spacing-lg);display:flex;gap:var(--spacing-md);background:linear-gradient(135deg,#ff6b6b26,#4ecdc426);padding:var(--spacing-sm) var(--spacing-md);border-radius:16px;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--font-mono);font-size:12px;z-index:100}.coord{color:#ffffff80}.coord span{color:var(--light);font-weight:600}#coord-display{display:flex;gap:var(--spacing-md);align-items:center;cursor:pointer;transition:all .2s;padding:4px 8px;margin:-4px -8px;border-radius:4px}#coord-display:hover{background:#ffffff1a}#coord-input-mode{display:flex;align-items:center;gap:8px}#coord-input-mode.hidden,#coord-display.hidden{display:none}#teleport-input{background:#00000080;border:1px solid var(--primary);border-radius:4px;color:var(--light);font-family:var(--font-mono);font-size:12px;padding:4px 8px;width:120px;outline:none}#teleport-input:focus{border-color:var(--accent);box-shadow:0 0 8px #ff00664d}#teleport-input::placeholder{color:#fff6}.input-hint{color:#fff6;font-size:10px}.chat-messages{overflow-y:auto}.chat-message{margin-bottom:var(--spacing-sm);animation:slideIn .3s ease}.chat-message .sender{font-size:11px;font-weight:600;margin-bottom:2px}.chat-message .text{font-size:12px;color:#ffffffe6;background:#ffffff0d;padding:var(--spacing-xs) var(--spacing-sm);border-radius:6px;word-wrap:break-word}.channel-badge{font-size:10px;padding:1px 4px;border-radius:3px;margin-right:4px}.channel-badge.world{background:#ffffff1a}.channel-badge.whisper{background:#ffe66d33;color:var(--accent)}.channel-badge.channel{background:#4ecdc433;color:var(--secondary)}.chat-message.whisper-message .text{background:#ffe66d1a;border-left:2px solid var(--accent)}.chat-message.channel-message .text{background:#4ecdc41a;border-left:2px solid var(--secondary)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes glow{0%,to{filter:drop-shadow(0 0 20px var(--primary-glow))}50%{filter:drop-shadow(0 0 40px var(--secondary-glow))}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:1;transition:opacity .3s ease}.modal.hidden{opacity:0;pointer-events:none}.modal-content{background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid rgba(255,255,255,.1);border-radius:20px;max-width:500px;width:90%;overflow:hidden;animation:modalSlideIn .4s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{text-align:center;padding:var(--spacing-xl) var(--spacing-lg) var(--spacing-md)}.modal-icon{font-size:64px;display:block;margin-bottom:var(--spacing-sm);animation:bounce 1s ease-in-out infinite}.modal-header h2{font-size:28px;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-body{padding:0 var(--spacing-lg) var(--spacing-lg)}.modal-body .intro{text-align:center;font-size:16px;color:#fffc;margin-bottom:var(--spacing-lg)}.feature-list{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.feature{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-md);background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.feature-icon{font-size:24px}.feature strong{display:block;color:var(--light);margin-bottom:4px}.feature p{font-size:13px;color:#fff9;margin:0}.quick-start{background:linear-gradient(135deg,#ff6b6b1a,#4ecdc41a);border:1px solid rgba(255,107,107,.3);border-radius:12px;padding:var(--spacing-md)}.quick-start h3{font-size:14px;margin-bottom:var(--spacing-sm);color:var(--accent)}.quick-start p{font-size:13px;color:#ffffffb3;margin-bottom:var(--spacing-sm)}.quick-start code{display:block;background:#0000004d;padding:var(--spacing-sm) var(--spacing-md);border-radius:8px;font-family:var(--font-mono);font-size:14px;color:var(--success)}.modal-footer{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-lg);text-align:center}.btn-primary{background:linear-gradient(135deg,var(--primary),#ff8e8e);border:none;padding:var(--spacing-md) var(--spacing-xl);border-radius:12px;font-size:16px;font-weight:600;color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px #ff6b6b66}.docs-content{max-width:900px;width:90%;max-height:90vh;display:flex;flex-direction:column}.docs-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid rgba(255,255,255,.1)}.docs-header h2{font-size:18px;color:var(--light);margin:0}.close-btn{background:none;border:none;color:#ffffff80;font-size:28px;cursor:pointer;padding:0;line-height:1;transition:color var(--transition-fast)}.close-btn:hover{color:var(--primary)}.docs-body{flex:1;overflow-y:auto;padding:var(--spacing-md) var(--spacing-lg)}#docs-text{font-family:var(--font-mono);font-size:13px;line-height:1.6;color:#ffffffd9;white-space:pre-wrap;word-wrap:break-word;margin:0;background:#0003;padding:var(--spacing-md);border-radius:8px}#command-terminal{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);width:700px;max-width:80%;background:#0a0a14f2;border:1px solid rgba(255,107,107,.3);border-radius:12px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:500;overflow:hidden;transition:opacity .2s ease,transform .2s ease;display:none}#command-terminal.terminal-hidden{opacity:0;transform:translate(-50%) translateY(20px);pointer-events:none}.terminal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:#ff6b6b1a;border-bottom:1px solid rgba(255,255,255,.1)}.terminal-title{font-size:12px;font-weight:600;color:var(--primary)}.collapse-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff9;width:24px;height:24px;border-radius:4px;cursor:pointer;font-size:16px;line-height:1;transition:all .2s}.collapse-btn:hover{background:#ffffff1a;color:#fff;border-color:#ffffff80}#command-terminal.collapsed .terminal-output,#command-terminal.collapsed .terminal-suggestions{display:none}.terminal-output{max-height:60vh;overflow-y:auto;padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-mono);font-size:13px}.terminal-output .output-line{margin-bottom:var(--spacing-xs);line-height:1.4}.terminal-output .output-line.cmd{color:#ffffff80}.terminal-output .output-line.success{color:var(--success)}.terminal-output .output-line.error{color:var(--error)}.terminal-output .output-line.info{color:var(--secondary)}.terminal-input-row{display:flex;align-items:center;padding:var(--spacing-sm) var(--spacing-md);border-top:1px solid rgba(255,255,255,.1)}.terminal-prompt{color:var(--primary);font-family:var(--font-mono);font-weight:700;margin-right:var(--spacing-sm)}#terminal-input{flex:1;background:transparent;border:none;outline:none;color:var(--light);font-family:var(--font-mono);font-size:14px}#terminal-input::placeholder{color:#ffffff4d}.terminal-suggestions{display:none;padding:var(--spacing-sm) var(--spacing-md);background:#0000004d;border-top:1px solid rgba(255,255,255,.1)}.terminal-suggestions.active{display:block}.suggestion-item{padding:var(--spacing-xs) var(--spacing-sm);border-radius:4px;cursor:pointer;font-family:var(--font-mono);font-size:12px;display:flex;justify-content:space-between;margin-bottom:2px}.suggestion-item:hover,.suggestion-item.selected{background:#ff6b6b33}.suggestion-item .cmd{color:var(--success)}.suggestion-item .desc{color:#ffffff80;font-size:11px}#observer-chat-panel{position:fixed;right:var(--spacing-lg);bottom:var(--spacing-lg);width:320px;background:linear-gradient(135deg,#ff6b6b26,#4ecdc426);border:1px solid rgba(255,255,255,.2);border-radius:16px;display:flex;flex-direction:column;z-index:400;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}#observer-chat-panel .chat-section{display:flex;flex-direction:column;border-bottom:1px solid rgba(255,255,255,.1)}#observer-chat-panel .chat-section .chat-section-messages{height:200px}#observer-chat-panel .chat-section.collapsed .chat-section-messages{display:none}#observer-chat-panel .chat-section:last-child{border-bottom:none}#observer-chat-panel .chat-section-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#ffffff0d;font-weight:600;font-size:12px;color:#fffc;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(255,255,255,.05)}.send-icon{width:18px;height:18px;color:#fff}.chat-collapse-btn{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff9;width:22px;height:22px;border-radius:4px;cursor:pointer;font-size:14px;line-height:1;transition:all .2s}.chat-collapse-btn:hover{background:#ffffff1a;color:#fff}#observer-chat-panel .chat-section-messages{overflow-y:auto;padding:8px 12px;font-size:13px;line-height:1.5}#observer-chat-panel .chat-message{margin-bottom:8px;word-wrap:break-word}#observer-chat-panel .chat-message .sender{font-weight:600;color:var(--secondary);margin-right:6px}#observer-chat-panel .chat-message .text{color:#ffffffe6}#observer-chat-panel .chat-message.lobster .sender{color:var(--primary)}#observer-chat-panel .chat-message.observer .sender{color:#9b59b6}#observer-chat-panel .chat-input-row{display:flex;padding:10px;gap:8px;background:#0003}#observer-chat-panel .chat-input-row input{flex:1;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:8px 14px;color:#fff;font-size:12px;outline:none;transition:all .2s}#observer-chat-panel .chat-input-row input:focus{border-color:#ffffff4d;background:#ffffff26}#observer-chat-panel .chat-input-row input::placeholder{color:#fff6}#observer-chat-panel .chat-input-row button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:8px 14px;cursor:pointer;font-size:12px;color:#fffc;transition:all .2s}#observer-chat-panel .chat-input-row button:hover{background:#fff3;border-color:#ffffff4d}#canvas-container.observer-blur{filter:blur(8px);transition:filter .5s ease}.login-content{max-width:480px}.login-content .modal-header{padding-bottom:var(--spacing-sm)}.login-content .intro{font-size:14px;color:#fff9;margin-top:var(--spacing-xs)}.login-content .intro-hint{text-decoration:underline;text-decoration-color:#ffffff4d}.role-buttons{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.role-btn{flex:1;padding:14px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;border:2px solid transparent}.role-agent{background:#ff6b6b1a;border-color:#ff6b6b33;color:#fff9}.role-agent.active,.role-agent:hover{background:#ff6b6b33;border-color:var(--primary);color:var(--primary)}.role-human{background:#4ecdc41a;border-color:#4ecdc433;color:#fff9}.role-human.active,.role-human:hover{background:#4ecdc433;border-color:var(--secondary);color:var(--secondary)}.login-panel{animation:fadeIn .2s ease}.login-panel.hidden{display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.login-form{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.login-input{width:100%;background:#0006;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:12px 16px;color:var(--light);font-family:var(--font-mono);font-size:14px;outline:none;transition:border-color .2s}.login-input:focus{border-color:var(--primary);box-shadow:0 0 10px #ff6b6b33}.login-input::placeholder{color:#ffffff4d}.login-btn{width:100%;padding:12px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.login-btn:hover{transform:translateY(-1px)}.send-agent-card{background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:var(--spacing-md)}.send-agent-card h3{font-size:14px;font-weight:600;color:var(--light);margin-bottom:var(--spacing-sm);text-align:center}.send-tabs{display:flex;background:#0000004d;border-radius:8px;padding:3px;margin-bottom:var(--spacing-sm)}.send-tab{flex:1;padding:6px 12px;font-size:12px;font-weight:500;background:transparent;border:none;border-radius:6px;color:#ffffff80;cursor:pointer;transition:all .2s}.send-tab:hover{color:#fffc}.send-tab.active{background:var(--primary);color:#fff}.send-tab-content.hidden{display:none}.send-code{display:block;background:#0006;padding:10px 12px;border-radius:6px;font-family:var(--font-mono);font-size:11px;color:var(--success);word-break:break-all;white-space:pre-wrap;cursor:pointer;-webkit-user-select:all;user-select:all;margin-bottom:var(--spacing-sm)}.send-steps{padding-left:18px;margin:0}.send-steps li{font-size:12px;color:#ffffff80;margin-bottom:4px}.send-steps li::marker{color:var(--primary)}.human-desc{font-size:14px;color:#fff9;margin-bottom:var(--spacing-md);line-height:1.5}.login-error{color:var(--error);font-size:13px;margin-top:var(--spacing-sm);text-align:center}@media (max-width: 768px){#activity-feed,#controls-info,.agent-count{display:none}#command-terminal{width:95%;bottom:80px}}