@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap";:root{--bg-color:#060509;--panel-bg:#120e1e99;--panel-border:#ffffff0f;--panel-border-glow:#7c3aed40;--primary-glow:linear-gradient(135deg, #8b5cf6, #6366f1);--primary-solid:#7c3aed;--primary-light:#7c3aed26;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dark:#0f172a;--online-color:#00f5a0;--online-glow:#00f5a04d;--danger-color:#f43f5e;--danger-glow:#f43f5e59;--sidebar-width:380px;--card-radius:18px;--input-radius:24px}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#7c3aed4d transparent;margin:0;padding:0;font-family:Plus Jakarta Sans,sans-serif}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#7c3aed40;border-radius:20px}::-webkit-scrollbar-thumb:hover{background:#7c3aed80}body{background-color:var(--bg-color);color:var(--text-main);width:100vw;height:100vh;font-family:Plus Jakarta Sans,sans-serif;position:relative;overflow:hidden}.bg-glow-container{z-index:-1;pointer-events:none;background:radial-gradient(circle at 10% 20%,#140a28cc 0%,#050508 90%);position:absolute;inset:0;overflow:hidden}.bg-glow-circle-1{filter:blur(80px);background:radial-gradient(circle,#7c3aed26 0%,#0000 70%);width:50vw;height:50vw;animation:25s infinite alternate float-slow;position:absolute;top:-10%;right:-10%}.bg-glow-circle-2{filter:blur(100px);background:radial-gradient(circle,#6366f11f 0%,#0000 70%);width:60vw;height:60vw;animation:35s infinite alternate-reverse float-slow;position:absolute;bottom:-10%;left:-10%}@keyframes float-slow{0%{transform:translate(0)scale(1)}50%{transform:translate(5%,5%)scale(1.1)}to{transform:translate(-5%,-5%)scale(.9)}}.app-container{-webkit-backdrop-filter:blur(16px);width:100vw;height:100vh;display:flex;overflow:hidden}.glass-panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--card-radius);box-shadow:0 8px 32px #0006}.glass-panel-interactive{transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-panel-interactive:hover{border-color:var(--panel-border-glow);box-shadow:0 8px 32px #7c3aed1a}h1,h2,h3,.app-title-font{letter-spacing:-.02em;font-family:Outfit,sans-serif;font-weight:700}.gradient-text{background:linear-gradient(90deg,#a78bfa,#818cf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);border-right:1px solid var(--panel-border);z-index:10;background:#0a08108c;flex-direction:column;height:100%;transition:transform .3s;display:flex}.sidebar-header{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;padding:20px;display:flex}.profile-section{align-items:center;gap:12px;display:flex}.avatar-wrapper{border:2px solid var(--primary-solid);background:#ffffff0d;border-radius:50%;width:44px;height:44px;padding:2px;position:relative}.avatar{object-fit:cover;border-radius:50%;width:100%;height:100%}.status-dot{background-color:var(--online-color);width:12px;height:12px;box-shadow:0 0 8px var(--online-glow);border:2px solid #0c0a12;border-radius:50%;position:absolute;bottom:0;right:0}.status-dot.offline{background-color:var(--text-muted);box-shadow:none}.profile-info h3{color:var(--text-main);font-size:15px}.profile-info p{color:var(--text-muted);font-size:11px}.sidebar-tabs{border-bottom:1px solid var(--panel-border);gap:8px;padding:10px 15px;display:flex}.tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:6px;padding:8px;font-size:13px;font-weight:600;transition:all .2s;display:flex}.tab-btn.active{background:var(--primary-light);color:#c084fc}.conversations-container{flex:1;padding:10px;overflow-y:auto}.conversation-card{cursor:pointer;border:1px solid #0000;border-radius:12px;align-items:center;gap:12px;margin-bottom:4px;padding:12px;transition:all .2s;display:flex}.conversation-card:hover{background:#ffffff08;border-color:#ffffff0d}.conversation-card.active{background:var(--primary-light);border-color:#7c3aed4d}.card-details{flex:1;min-width:0}.card-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.card-header h4{color:var(--text-main);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.card-time{color:var(--text-muted);font-size:10px}.card-meta{justify-content:space-between;align-items:center;display:flex}.card-preview{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;flex:1;margin-right:8px;font-size:12px;overflow:hidden}.badge{background:var(--primary-glow);color:#fff;text-align:center;border-radius:10px;min-width:16px;padding:2px 6px;font-size:10px;font-weight:700;box-shadow:0 0 10px #7c3aed66}.chat-area{background:#06050959;flex-direction:column;flex:1;height:100%;display:flex;position:relative}.chat-header{border-bottom:1px solid var(--panel-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0a081066;justify-content:space-between;align-items:center;height:75px;min-height:75px;padding:0 24px;display:flex}.header-info{align-items:center;gap:12px;display:flex}.header-details h3{color:var(--text-main);font-size:16px}.connection-pill{color:var(--text-muted);background:#ffffff0d;border-radius:12px;align-items:center;gap:4px;margin-top:2px;padding:2px 8px;font-size:10px;font-weight:600;display:inline-flex}.connection-pill.p2p{color:var(--online-color);background:#00f5a01a;border:1px solid #00f5a033}.connection-pill.relayed{color:#fbbf24;background:#f59e0b1a;border:1px solid #f59e0b33}.header-actions{gap:12px;display:flex}.icon-btn{border:1px solid var(--panel-border);width:40px;height:40px;color:var(--text-main);cursor:pointer;background:#ffffff08;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.icon-btn:hover{background:var(--primary-light);border-color:var(--primary-solid);color:#c084fc;transform:translateY(-2px)}.icon-btn.call-end{color:var(--danger-color);background:#f43f5e1a;border-color:#f43f5e33}.icon-btn.call-end:hover{background:var(--danger-color);color:#fff}.messages-container{flex-direction:column;flex:1;gap:16px;padding:24px;display:flex;overflow-y:auto}.message-bubble-row{width:100%;display:flex}.message-bubble-row.sent{justify-content:flex-end}.message-bubble-row.received{justify-content:flex-start}.bubble{border-radius:18px;max-width:65%;padding:12px 16px;font-size:14.5px;line-height:1.5;animation:.25s cubic-bezier(.175,.885,.32,1.15) forwards bubble-entrance;position:relative;box-shadow:0 4px 15px #00000026}@keyframes bubble-entrance{0%{opacity:0;transform:translateY(12px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.sent .bubble{background:var(--primary-glow);color:#fff;border-bottom-right-radius:4px}.received .bubble{border:1px solid var(--panel-border);color:var(--text-main);background:#ffffff0d;border-bottom-left-radius:4px}.bubble-meta{color:#fff9;justify-content:flex-end;align-items:center;gap:4px;margin-top:4px;font-size:10px;display:flex}.received .bubble-meta{color:var(--text-muted)}.sender-tag{color:#c084fc;margin-bottom:4px;font-size:11px;font-weight:700}.chat-input-bar{border-top:1px solid var(--panel-border);background:#0a081073;align-items:center;gap:12px;padding:16px 24px;display:flex}.input-container{border:1px solid var(--panel-border);border-radius:var(--input-radius);background:#ffffff0a;flex:1;align-items:center;padding:4px 16px;transition:all .3s;display:flex;position:relative}.input-container:focus-within{border-color:var(--primary-solid);box-shadow:0 0 12px var(--panel-border-glow)}.chat-input{color:var(--text-main);background:0 0;border:none;outline:none;flex:1;min-height:40px;padding:10px 0;font-size:14px}.chat-input::placeholder{color:var(--text-muted)}.attachment-preview{background:var(--panel-bg);border:1px solid var(--primary-solid);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;align-items:center;gap:8px;margin-bottom:10px;padding:8px;display:flex;position:absolute;bottom:100%;left:20px}.preview-thumbnail{object-fit:cover;border-radius:6px;width:40px;height:40px}.setup-container{z-index:10;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative}.setup-card{flex-direction:column;gap:24px;width:450px;max-width:90%;padding:40px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:var(--text-muted);font-size:13px;font-weight:600}.form-input{border:1px solid var(--panel-border);color:var(--text-main);background:#ffffff0a;border-radius:10px;outline:none;padding:12px 16px;font-size:14px;transition:all .3s}.form-input:focus{border-color:var(--primary-solid);box-shadow:0 0 8px var(--panel-border-glow)}.primary-btn{background:var(--primary-glow);color:#fff;cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:14px;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 15px #7c3aed4d}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7c3aed73}.secondary-btn{border:1px solid var(--panel-border);color:var(--text-main);cursor:pointer;background:#ffffff0d;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:12px;font-weight:600;transition:all .2s;display:flex}.secondary-btn:hover{border-color:var(--text-muted);background:#ffffff1a}.call-overlay{z-index:1000;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#06040aeb;flex-direction:column;justify-content:space-between;align-items:center;padding:40px;display:flex;position:fixed;inset:0}.call-profile{flex-direction:column;align-items:center;gap:16px;margin-top:60px;display:flex}.call-avatar{border:4px solid var(--primary-solid);width:120px;height:120px;box-shadow:0 0 30px var(--panel-border-glow);border-radius:50%;padding:4px}.call-status-pulse{color:#a78bfa;font-size:14px;animation:1.5s infinite alternate pulse-opacity}@keyframes pulse-opacity{0%{opacity:.5}to{opacity:1}}.video-grid{border-radius:var(--card-radius);border:1px solid var(--panel-border);background:#000;width:100%;height:60%;position:relative;overflow:hidden;box-shadow:0 10px 40px #0009}.remote-video{object-fit:cover;width:100%;height:100%}.local-video-pip{border:2px solid var(--primary-solid);z-index:10;background:#111;border-radius:12px;width:150px;height:200px;position:absolute;top:20px;right:20px;overflow:hidden;box-shadow:0 4px 15px #00000080}.local-video{object-fit:cover;width:100%;height:100%}.call-controls{z-index:1001;gap:20px;margin-bottom:20px;display:flex}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:99;background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-card{flex-direction:column;gap:20px;width:450px;max-width:90%;padding:28px;display:flex}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-header h3{font-size:18px}.file-attachment-card{background:#ffffff0f;border:1px solid #ffffff0a;border-radius:8px;align-items:center;gap:12px;margin-top:6px;padding:8px 12px;display:flex}.file-attachment-card.img-preview{border:none;max-height:240px;padding:0;overflow:hidden}.attachment-img{object-fit:contain;width:100%;height:100%}.audio-message-player{align-items:center;gap:8px;margin-top:6px;display:flex}.typing-indicator{border:1px solid var(--panel-border);color:var(--text-muted);background:#ffffff08;border-radius:16px;align-items:center;gap:4px;padding:8px 16px;font-size:12px;display:inline-flex}.typing-dot{background:var(--primary-solid);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite dot-jump}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes dot-jump{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-5px)}}.contact-select-list{flex-direction:column;gap:6px;max-height:200px;display:flex;overflow-y:auto}.contact-select-row{cursor:pointer;background:#ffffff05;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 12px;transition:background .2s;display:flex}.contact-select-row:hover{background:#ffffff0d}.mobile-back-btn{display:none}@media (width<=768px){.sidebar{width:100%;height:100%;position:absolute;top:0;left:0;transform:translate(-100%)}.sidebar.mobile-open{transform:translate(0)}.chat-area{width:100%}.bubble{max-width:85%}.mobile-back-btn{display:flex}}