:root{--bg-app: #0f1115;--bg-sidebar: rgba(18, 20, 26, .8);--bg-chat: #161920;--accent: #3b82f6;--accent-secondary: #8b5cf6;--text-main: #e2e8f0;--text-muted: #94a3b8;--bubble-me: linear-gradient(135deg, #3b82f6, #2563eb);--bubble-them: #2d3441;--glass-border: rgba(255, 255, 255, .05)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,sans-serif;background-color:var(--bg-app);color:var(--text-main);height:100vh;overflow:hidden}.app-container{display:flex;height:100vh;width:100vw}.sidebar{width:320px;background:var(--bg-sidebar);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);display:flex;flex-direction:column}.sidebar-header{padding:1.5rem;border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:.75rem}.logo-icon{font-size:1.5rem}.logo-text{font-weight:700;font-size:1.25rem}.logo-text span{color:var(--accent)}.camera-list{flex:1;overflow-y:auto;padding:1rem}.add-camera-btn{width:100%;padding:.75rem;background:var(--accent);border:none;border-radius:.5rem;color:#fff;font-weight:600;cursor:pointer;margin-bottom:1.5rem;transition:opacity .2s}.add-camera-btn:hover{opacity:.9}.camera-item{padding:1rem;border-radius:.75rem;margin-bottom:.5rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:1rem}.camera-item:hover{background:#ffffff08}.camera-item.active{background:#3b82f61a;border:1px solid rgba(59,130,246,.2)}.camera-status{width:8px;height:8px;border-radius:50%;background:#10b981}.camera-info h4{font-size:.95rem;margin-bottom:.25rem}.camera-info p{font-size:.8rem;color:var(--text-muted)}.chat-area{flex:1;display:flex;flex-direction:column;background:var(--bg-chat);position:relative}.chat-header{padding:1rem 2rem;background:#161920cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center;z-index:10}.messages-container{flex:1;padding:2rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem}.message{max-width:70%;display:flex;flex-direction:column}.message.received{align-self:flex-start}.message.sent{align-self:flex-end}.message-bubble{padding:1rem;border-radius:1.25rem;font-size:.95rem;line-height:1.5;position:relative}.received .message-bubble{background:var(--bubble-them);border-bottom-left-radius:.25rem;border:1px solid var(--glass-border)}.sent .message-bubble{background:var(--bubble-me);color:#fff;border-bottom-right-radius:.25rem;box-shadow:0 4px 15px #2563eb33}.message-time{font-size:.7rem;color:var(--text-muted);margin-top:.4rem;padding:0 .5rem}.sent .message-time{text-align:right}.alert-card{background:#0003;border-radius:.75rem;padding:.75rem;margin-top:.5rem;border:1px solid rgba(255,255,255,.05)}.alert-type{font-weight:700;font-size:.8rem;color:#fbbf24;text-transform:uppercase;margin-bottom:.25rem}.video-preview-container{width:100%;aspect-ratio:16/9;background:#000;border-radius:1rem;overflow:hidden;margin-bottom:1rem;border:1px solid var(--glass-border);position:relative}.video-preview-container video{width:100%;height:100%;object-fit:cover}.video-label{position:absolute;top:1rem;left:1rem;background:#00000080;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.chat-input-container{padding:1.5rem 2rem;border-top:1px solid var(--glass-border);background:var(--bg-sidebar)}.input-wrapper{background:var(--bg-chat);border:1px solid var(--glass-border);border-radius:1rem;display:flex;align-items:center;padding:.5rem 1rem}.input-wrapper input{flex:1;background:transparent;border:none;color:#fff;padding:.75rem;outline:none;font-size:1rem}.send-btn{background:var(--accent);border:none;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}.send-btn:hover{transform:scale(1.05)}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message{animation:slideIn .3s ease-out forwards}.discovery-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0a0b0fe6;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:1000;display:flex;align-items:center;justify-content:center}.discovery-modal{width:90%;max-width:600px;background:var(--bg-sidebar);border:1px solid var(--glass-border);border-radius:1.5rem;padding:3rem;text-align:center;box-shadow:0 25px 50px -12px #00000080}.radar-container{width:150px;height:150px;margin:0 auto 2rem;position:relative;display:flex;align-items:center;justify-content:center}.radar-circle{position:absolute;width:100%;height:100%;border:2px solid var(--accent);border-radius:50%;opacity:.1;animation:pulse 2s infinite}.radar-sweep{position:absolute;width:50%;height:50%;top:0;left:50%;background:linear-gradient(90deg,var(--accent),transparent);transform-origin:bottom left;animation:rotate 2s linear infinite;border-radius:100% 0 0}@keyframes pulse{0%{transform:scale(1);opacity:.3}to{transform:scale(1.5);opacity:0}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.results-list{margin-top:2rem;text-align:left;max-height:300px;overflow-y:auto}.discovery-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#ffffff08;border:1px solid var(--glass-border);border-radius:.75rem;margin-bottom:.75rem;animation:slideIn .3s ease-out forwards}.discovery-item h5{margin-bottom:.2rem}.discovery-item p{font-size:.8rem;color:var(--text-muted)}.connect-btn{padding:.5rem 1rem;background:var(--accent);border:none;border-radius:2rem;color:#fff;font-size:.8rem;font-weight:600;cursor:pointer}.close-discovery-btn{margin-top:2rem;background:transparent;border:none;color:var(--text-muted);cursor:pointer;text-decoration:underline}