*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(to right,#6a11cb,#2575fc);font-family:Poppins,sans-serif;min-height:100vh;color:#fff;display:flex;justify-content:center;align-items:center}.app-container{width:clamp(1000px,85vh,1400px);height:clamp(700px,90vh,900px);display:flex;background:#ffffff1a;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:28px;box-shadow:0 12px 48px #00000040;overflow:hidden}.sidebar{width:280px;background:#0a0a1ef2;padding:28px 18px;display:flex;flex-direction:column;align-items:center;overflow:hidden;height:100%;position:relative}.sidebar h2{font-size:2rem;margin-bottom:20px}.member{background-color:#00f7ff;color:#000;width:80%;max-width:200px;margin:0 auto 12px;padding:10px 20px;border-radius:20px;font-weight:600;cursor:pointer;transition:background-color .3s ease,transform .2s ease;-webkit-user-select:none;user-select:none;text-align:center}.member.self-member{background-color:#007bff;color:#fff;border:2px solid #00f7ff}.member:hover{background-color:#00c7cb;transform:scale(1.05)}.chat-section{flex:1;display:flex;flex-direction:column;background:#fff;color:#000;padding:24px}.header{display:flex;justify-content:space-between;align-items:center}.header h3{font-size:1.8rem}.status-dot{width:16px;height:16px;border-radius:50%;border:2px solid #fff}.status-dot.online{background-color:#00da00}.status-dot.offline{background-color:#ccc}.chat-display{flex:1;background-color:#f5f5f5;border-radius:14px;padding:16px;margin:16px 0;overflow-y:auto;scroll-behavior:smooth;display:flex;flex-direction:column}.sender-inline{font-weight:600;color:#444;margin-right:6px}.join-message,.leave-message{background-color:#fcfcfc;padding:8px 14px;border-radius:8px;margin-bottom:8px;font-style:italic;align-self:center}.join-message{color:#555;border-left:4px solid #00c7cb}.leave-message{color:#a00;border-left:4px solid #ff4e50}.public-message{background-color:#f1f0f0;color:#333;max-width:65%;padding:10px 14px;border-radius:18px 18px 18px 4px;margin-bottom:10px;align-self:flex-start;word-break:break-word}.my-message{background-color:#dcf8c6;color:#333;max-width:65%;padding:10px 14px;border-radius:18px 18px 4px;margin-bottom:10px;align-self:flex-end;word-break:break-word}.private-message{background-color:#fff9c4;color:#333;max-width:70%;padding:10px 14px;border-left:5px solid #f39c12;border-radius:12px;margin-bottom:10px;align-self:flex-start}.private-message.self{background-color:#fceabb;align-self:flex-end}.ghost-view-message{background-color:#00f2fe1a;color:#00c7cb;max-width:70%;padding:10px 14px;border-left:4px solid #00f2fe;border-radius:12px;margin-bottom:10px;align-self:center;font-style:italic;word-break:break-word}.button-row{display:flex;gap:14px;flex-wrap:wrap}button{background:#00a8ff;color:#fff;padding:10px 20px;border:none;border-radius:10px;font-weight:600;cursor:pointer;transition:background .3s ease,transform .2s ease}button:hover{background:#007fcc;transform:scale(1.03)}button:focus,input:focus{outline:2px solid #00a8ff;outline-offset:2px}.disconnect-button{width:90%;padding:12px 20px;background:linear-gradient(90deg,#ff4e50,#f92672);font-size:1rem;font-weight:700;border-radius:60px;border:none;color:#fff;transition:background .3s ease,transform .2s ease;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.disconnect-button:hover{background:linear-gradient(90deg,#f92672,#ff4e50);filter:brightness(1.1);transform:translate(-50%) scale(1.05)}input{padding:10px;border-radius:10px;border:1px solid #ccc;outline:none;flex:1}.input-wrapper{position:relative;flex:1}.send-button{background:#00a8ff;border:none;border-radius:50%;padding:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s ease,transform .2s ease}.send-button:hover{background:#007fcc;transform:scale(1.05)}.send-button img{width:20px;height:20px}.input-wrapper input{width:100%;padding:12px 60px 12px 20px;border-radius:999px;border:1.5px solid rgb(0 168 255 / .3);background:#fff3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#333;font-size:1rem;transition:all .3s ease;box-shadow:inset 0 0 5px #0000000d}.input-wrapper input:focus{outline:none;border:2px solid #00a8ff;box-shadow:0 0 8px #00a8ff66;background:#ffffff4d}.char-counter{position:absolute;right:8px;bottom:15px;font-size:.75rem;color:#15b1c6c5;pointer-events:none}.join-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;background:#0f0f3ce6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;width:400px;max-width:90vw;padding:40px 32px 60px;box-shadow:0 15px 50px #0006;height:350px}.join-title{font-size:2.8rem;font-weight:800;margin-bottom:30px;text-align:center;color:#00d4ff}.join-input{width:100%;padding:14px 20px;border-radius:15px;border:none;outline:none;font-size:1.2rem;margin-bottom:40px;background:#fffffff2;color:#333;text-align:center}.join-button{padding:12px 36px;border:none;border-radius:20px;background:linear-gradient(90deg,#4facfe,#00f2fe);font-weight:700;font-size:1.2rem;color:#fff;cursor:pointer;transition:background .3s ease,transform .2s ease,box-shadow .3s ease;box-shadow:0 6px 20px #00f2fe99}.join-button:hover{transform:scale(1.05)}.private-popup{position:fixed;inset:0;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.popup-content{background:#fff;color:#000;padding:30px 36px;border-radius:20px;min-width:320px;max-width:90vw;display:flex;flex-direction:column;gap:18px}.popup-buttons{display:flex;justify-content:space-around;gap:16px}.ghost-button{width:28px;height:28px;cursor:pointer;border-radius:50%;padding:3px;background:#fff0;transition:transform .2s ease,filter .2s ease}.ghost-button:hover{transform:scale(1.1);filter:brightness(1.1)}.ghost-button.active{filter:drop-shadow(0 0 6px rgb(0 242 254 / .8));transform:scale(1.15)}.ghost-toast{position:fixed;bottom:40px;left:50%;transform:translate(-50%);background:#0f0f0fe6;color:#00f2fe;padding:14px 28px;border-radius:24px;font-weight:600;font-size:1rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 10px #00f2fe4d;z-index:2000;opacity:1;animation:fadeInOut 3s forwards;text-align:center;pointer-events:none;letter-spacing:.3px}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(20px)}10%,90%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(20px)}}.chat-display::-webkit-scrollbar,.sidebar::-webkit-scrollbar{width:6px}.chat-display::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:3px}.sidebar-toggle-button{display:none;background:none;border:none;padding:8px;margin:8px;z-index:30}.close-button,.close-sidebar-button{display:none}.sidebar-members{scroll-behavior:smooth}.sidebar-members{overscroll-behavior:contain}@media (max-width:768px){.app-container{width:100vw!important;height:99vh!important;max-width:none!important;max-height:none!important;flex-direction:row;position:relative;overflow:hidden}.sidebar{position:fixed;top:0;left:0;height:100%;width:250px;background:#0a0a1e;z-index:100;display:flex;flex-direction:column;transform:translate(-100%);transition:transform .3s ease;overflow:hidden}.sidebar.active{transform:translate(0)}.sidebar.hidden{transform:translate(-100%)}.sidebar-toggle-button{position:fixed;top:10px;left:10px;display:block;width:32px;height:32px;border:none;border-radius:50%;background:linear-gradient(135deg,#00a8ff,#00f2fe);box-shadow:0 0 8px #00a8ff80;cursor:pointer}.close-sidebar-button{position:absolute;top:8px;right:10px;width:16px;height:16px;border:none;border-radius:50%;background:linear-gradient(135deg,#9b59b6,#8e44ad);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;font-weight:600;color:#fff;box-shadow:0 0 10px #9b59b666;transition:all .3s ease;cursor:pointer;z-index:999;padding:13px}.close-sidebar-button:hover{box-shadow:0 0 14px #9b59b6b3;transform:scale(1.1)}.chat-section{flex:1;display:flex;flex-direction:column;width:100%;min-width:0;padding:10px;background:#fff;color:#000}.header{position:sticky;top:0;background:#fff;z-index:15;padding:8px 14px;display:flex;align-items:center;justify-content:space-between}.header h3{font-size:1.3rem}.chat-display{flex:1;overflow-y:auto;margin:10px 0;border-radius:12px;padding:12px;font-size:.9rem;background:#f5f5f5}.input-wrapper{position:relative;flex:1}.input-wrapper input{width:100%;padding:12px 60px 12px 16px;font-size:1rem;color:inherit;background:#fff0;border:1.5px solid rgb(0 168 255 / .3);border-radius:999px;outline:none;min-width:0}.send-button{width:44px;height:44px;padding:10px;border-radius:50%;background-color:#007bff;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}.char-counter{position:absolute;right:12px;font-size:.75rem;color:#15b1c6c5;white-space:nowrap}.sidebar>h2{position:sticky;top:0;background:#0a0a1ef2;z-index:1;padding-bottom:10px;text-align:center;font-size:1.8rem;color:#fff;font-weight:700;border-bottom:1px solid rgb(255 255 255 / .1)}.sidebar-members{flex:1;overflow-y:auto}.member{margin:13px 20px;padding:8px 12px;font-size:.9rem;color:#fff}.sidebar-bottom{position:sticky;bottom:0;background:#0a0a1ef2;padding:10px;display:flex;flex-direction:column;gap:10px;z-index:1}.disconnect-button{width:100%;padding:8px 14px;font-size:.9rem;border-radius:50px;background:linear-gradient(90deg,#ff4e50,#f92672);color:#fff;border:none}.ghost-button{margin-left:60px}.join-screen{width:100%;max-width:300px;margin:auto;padding:48px 32px;min-height:360px;display:flex;flex-direction:column;align-items:center;background:#0b0b3b;border-radius:24px;box-shadow:0 20px 40px #0000004d;color:#fff;position:relative}.join-screen img{width:40px;margin-bottom:20px}.join-title{font-size:2.6rem;font-weight:800;margin-bottom:30px;color:#00f2fe;text-shadow:0 0 12px rgb(0 242 254 / .5)}.join-input{width:100%;padding:14px 20px;font-size:1rem;margin-bottom:28px;border-radius:16px;border:none;outline:none;background:#fff;color:#333;text-align:center;box-shadow:inset 0 0 5px #0000001a}.join-button{padding:10px 0;width:60%;font-size:1rem;font-weight:600;border-radius:999px;background:linear-gradient(90deg,#00f2fe,#4facfe);border:none;color:#fff;cursor:pointer;box-shadow:0 0 16px #00f2fe80;transition:transform .2s ease,box-shadow .3s ease}.join-button:hover{transform:scale(1.05);box-shadow:0 0 20px #00f2feb3}}.sidebar-members{flex:1;overflow-y:auto;width:100%;padding-bottom:40px;scrollbar-width:none;-ms-overflow-style:none}.sidebar-members::-webkit-scrollbar{width:6px;display:none}.sidebar-members::-webkit-scrollbar-thumb{background-color:#fff3;border-radius:3px}.private-target-bar{display:flex;justify-content:space-between;align-items:center;background:#fff9c4;border-left:5px solid #f39c12;border-radius:8px;padding:6px 10px;margin:8px 0;font-size:.95rem;color:#333}.cancel-private-button{background:#fff0;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#f39c12;padding:0 6px}.cancel-private-button:hover{color:#d35400}