:root{--bg-primary:#0f0f13;--bg-secondary:#1a1b23;--bg-tertiary:#252736;--accent-primary:#1b602f;--accent-secondary:#0f4d24;--accent-pink:#f784c5;--resistance-blue:#000072;--text-primary:#f0f0f5;--text-secondary:#a0a0b0;--text-muted:#6a6a7a;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--admin-badge:linear-gradient(270deg,#ff0080,#ff8c00,#f784c5,#1b602f,#ff1493);--user-message:linear-gradient(135deg,#1b602f,#0f4d24);--other-message:#2d2e3f;--border-radius:16px;--border-radius-sm:10px;--shadow:0 10px 25px rgba(0,0,0,.3);--transition:all .3s cubic-bezier(.4,0,.2,1)}*,::after,::before{box-sizing:border-box}*{-webkit-tap-highlight-color:transparent;outline:none}*:focus,*:active,*:hover{outline:none!important;box-shadow:none!important}body,html{margin:0;padding:0;height:100%;font-family:Inter,sans-serif}body{background:var(--bg-primary);display:flex;justify-content:center;align-items:center;color:var(--text-primary)}.chat-container{flex:1;display:flex;flex-direction:column;max-width:600px;width:100%;height:100vh;margin:auto;background:var(--bg-secondary);border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow);position:relative}.login-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(15,15,19,.95);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;padding:20px;text-align:center;backdrop-filter:blur(10px)}.login-screen h2{color:var(--text-primary);margin-bottom:20px;font-size:1.8rem;font-weight:700}.login-screen p{color:var(--text-secondary);margin-bottom:30px;max-width:400px;line-height:1.5;font-weight:400}.auth-form{display:flex;flex-direction:column;gap:15px;width:100%;max-width:350px;padding:25px;background:var(--bg-tertiary);border-radius:var(--border-radius);box-shadow:var(--shadow)}.auth-form input{padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:var(--border-radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;transition:var(--transition);width:100%}.auth-form input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(27,96,47,.2)}.auth-form button.primary-btn{background:var(--user-message);color:#fff;border:none;padding:14px;border-radius:var(--border-radius-sm);font-size:1rem;font-weight:500;cursor:pointer;transition:var(--transition);width:100%}.auth-form button.primary-btn:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 4px 12px rgba(27,96,47,.3)}.auth-form p{font-size:.9rem;color:var(--text-secondary);margin:0}.auth-form a{color:var(--accent-primary);text-decoration:none;transition:color .3s}.auth-form a:hover{color:var(--accent-secondary)}.toggle-link{margin-top:20px;color:var(--text-secondary);font-size:.9rem;text-decoration:none;transition:var(--transition)}.toggle-link:hover{color:var(--accent-primary)}.divider{display:flex;align-items:center;text-align:center;margin:20px 0;color:var(--text-muted);font-size:.9rem;width:100%}.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid rgba(255,255,255,.1)}.divider::before{margin-right:10px}.divider::after{margin-left:10px}.google-signin-btn{display:flex;align-items:center;justify-content:center;background:#fff;color:#333;border:1px solid rgba(0,0,0,.1);border-radius:var(--border-radius-sm);padding:12px 20px;font-size:16px;font-weight:500;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.1);transition:var(--transition);width:100%}.google-signin-btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.15);background:#f0f0f0}.google-icon-svg{width:24px;height:24px;margin-right:12px}.form-header{margin-bottom:10px}.form-header h2{margin:0 0 5px;font-size:1.5rem}.form-header p{margin:0;color:var(--text-secondary);font-size:.9rem}.form-switch{margin-top:15px;font-size:.9rem;color:var(--text-secondary)}.form-switch a{color:var(--accent-primary);text-decoration:none;font-weight:500}.form-switch a:hover{text-decoration:underline}@media (min-width:768px){.auth-buttons{flex-direction:row;max-width:400px}}@media (max-width:600px){.auth-form{padding:20px;max-width:320px}.login-screen{padding:15px}}.header{position:fixed;top:0;left:0;right:0;margin:auto;max-width:600px;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--bg-tertiary);color:var(--text-primary);border-bottom:1px solid rgba(255,255,255,.08);z-index:1000;backdrop-filter:blur(8px)}.header-left{display:flex;align-items:center;gap:12px}.header img{width:42px;height:42px;border-radius:50%;object-fit:cover}.header h3{font-size:1.15rem;font-weight:700;letter-spacing:.5px}.user-info{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-secondary)}.avatar-container{position:relative;display:inline-block}.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.avatar-change-btn{position:absolute;bottom:-5px;right:-5px;background:var(--accent-primary);color:#fff;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.6rem;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:var(--transition);z-index:2}.avatar-change-btn:hover{transform:scale(1.1)}.logout-btn,.edit-btn{background:transparent;border:0;color:var(--text-secondary);cursor:pointer;font-size:.9rem;padding:6px;border-radius:var(--border-radius-sm);transition:var(--transition);width:28px;height:28px;display:flex;align-items:center;justify-content:center}.logout-btn:hover{color:var(--danger);background:rgba(239,68,68,.1)}.edit-btn:hover{color:var(--accent-primary);background:rgba(27,96,47,.1)}.messages{flex:1;overflow-y:auto;padding:80px 15px 150px;display:flex;flex-direction:column;gap:16px;background:var(--bg-primary);scroll-behavior:smooth;background-image:radial-gradient(circle at 25% 25%,rgba(27,96,47,.05) 0,transparent 40%),radial-gradient(circle at 75% 75%,rgba(15,77,36,.05) 0,transparent 40%)}.message{display:flex;max-width:80%;gap:12px;animation:fadeIn .3s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.mine{align-self:flex-end;flex-direction:row-reverse}.message-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--accent-primary);align-self:flex-end}.message-content{position:relative;padding:12px 14px;border-radius:18px;background:var(--other-message);color:var(--text-primary);box-shadow:0 4px 12px rgba(0,0,0,.2);transition:var(--transition);max-width:calc(100% - 50px);font-size:0.9rem;overflow-wrap:break-word;word-wrap:break-word}.message-content:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25)}.message.mine .message-content{background:var(--user-message);color:#fff}.message .user{font-weight:600;color:var(--accent-primary);font-size:.85rem;margin-bottom:4px;display:flex;align-items:center;gap:6px}.message.mine .user{color:rgba(255,255,255,.9)}.message .timestamp-container{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:4px}.message .timestamp{font-size:.7rem;color:var(--text-muted)}.message.mine .timestamp{color:rgba(255,255,255,.7)}.admin-badge{background:var(--admin-badge);background-size:400% 400%;animation:rainbowShift 8s ease infinite;color:#fff;font-size:.65rem;padding:2px 6px;border-radius:4px;font-weight:600;margin-left:6px;text-shadow:0 1px 2px rgba(0,0,0,.4)}@keyframes rainbowShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.korupsi-badge{position:relative;background:#2b0000;color:#ff1a1a;font-size:.75rem;padding:3px 8px;border-radius:4px;font-weight:700;font-family:'Nosifer',cursive;text-transform:uppercase;text-shadow:0 0 4px #ff0000,0 0 8px #800000;overflow:hidden}.korupsi-badge::after{content:"";position:absolute;left:50%;width:4px;height:12px;background:#b30000;border-radius:50%;animation:drip 2s infinite}@keyframes drip{0%{top:-12px;opacity:0}30%{top:0;opacity:1}to{top:24px;opacity:0}}.medan-badge{position:relative;background:linear-gradient(145deg,#2a0000,#000);color:#ff2e2e;font-size:.75rem;padding:4px 12px;border-radius:6px;font-weight:900;letter-spacing:1.5px;margin-left:6px;border:1px solid #660000;text-transform:uppercase;text-shadow:0 0 6px #ff1a1a,0 0 12px rgba(255,0,0,.6);box-shadow:inset 0 2px 4px rgba(255,0,0,.2),inset -2px -2px 6px rgba(0,0,0,.9),0 0 10px rgba(255,0,0,.4),0 0 20px rgba(100,0,0,.6);overflow:hidden}.medan-badge::after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,0,0,.15) 0%,transparent 70%);animation:aura-pulse 3s infinite ease-in-out;z-index:0}@keyframes aura-pulse{0%{transform:scale(1);opacity:.6}50%{transform:scale(1.3);opacity:.3}100%{transform:scale(1);opacity:.6}}.medan-badge span{position:relative;z-index:1}.delete-btn{background:rgba(239,68,68,.2);border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--danger);font-size:.6rem;transition:var(--transition);opacity:0}.message:hover .delete-btn{opacity:1}.delete-btn:hover{background:rgba(239,68,68,.3);transform:scale(1.1)}.reply-btn{background:rgba(27,96,47,.2);border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent-primary);font-size:.6rem;transition:var(--transition);opacity:0}.message:hover .reply-btn{opacity:1}.reply-btn:hover{background:rgba(27,96,47,.3);transform:scale(1.1)}.deleted-message{font-style:italic;color:var(--text-muted)!important;background:rgba(160,160,176,.1)!important}.deleted-message .message-content{background:transparent!important}#replyPreview{display:none;position:fixed;bottom:95px;left:50%;transform:translateX(-50%);max-width:600px;width:100%;padding:10px 14px;background:rgba(27,96,47,.15);border-left:4px solid var(--accent-primary);font-size:.85rem;color:var(--text-primary);backdrop-filter:blur(8px);border-radius:var(--border-radius-sm);z-index:999}#replyPreview button{position:absolute;top:6px;right:10px;background:0;border:0;font-size:1.1rem;color:var(--danger);cursor:pointer;transition:var(--transition)}#replyPreview button:hover{transform:scale(1.1)}.reply-container{background-color:#3A3A3A;color:#f0f0f5;border-left:4px solid var(--accent-primary);border-radius:var(--border-radius-sm);padding:8px 12px;margin-bottom:5px;font-size:0.9em;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reply-container .reply-sender{font-weight:600;color:var(--text-secondary);margin-bottom:2px}.message-reply-container{background-color:#3a3a3a;color:#f0f0f5;border-left:4px solid var(--accent-primary);border-radius:var(--border-radius-sm);padding:8px 12px;margin-bottom:6px;font-size:0.8rem;word-wrap:break-word}.message.mine .message-reply-container{background-color:rgba(255,255,255,.1);border-left:4px solid rgba(255,255,255,.7);color:#f0f0f5}.message-reply-container .reply-sender{font-weight:600;color:var(--text-secondary);margin-bottom:2px}.input-area{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:600px;width:100%;padding:14px;background:var(--bg-tertiary);border-top:1px solid rgba(255,255,255,.08);display:flex;gap:10px;align-items:center;backdrop-filter:blur(8px)}textarea{flex:1;resize:none;padding:10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:var(--border-radius-sm);min-height:42px;max-height:120px;background:var(--bg-secondary);color:var(--text-primary);font-size:.9rem;line-height:1.4;transition:var(--transition)}textarea:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(27,96,47,.2)}textarea::placeholder{color:var(--text-muted)}button{padding:10px 16px;background:var(--user-message);color:#fff;border:0;border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition);height:42px;display:flex;align-items:center;justify-content:center;font-size:0.9rem}button:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 4px 12px rgba(27,96,47,.3)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}.scroll-button{position:fixed;bottom:140px;right:18px;background:var(--accent-primary);color:#fff;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);font-size:1.2rem;z-index:100;opacity:0;transform:translateY(10px);pointer-events:none;transition:var(--transition)}.scroll-button.visible{opacity:1;transform:translateY(0);pointer-events:auto}.scroll-button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px rgba(27,96,47,.4)}.file-upload-btn{background:var(--bg-secondary);color:var(--text-primary);border:1px solid rgba(255,255,255,.1);border-radius:var(--border-radius-sm);width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);position:relative}.file-upload-btn:hover{background:var(--accent-primary);color:#fff}.file-preview{display:none;position:fixed;bottom:95px;left:50%;transform:translateX(-50%);max-width:600px;width:100%;padding:10px 14px;background:rgba(27,96,47,.15);border-left:4px solid var(--accent-primary);font-size:.85rem;color:var(--text-primary);backdrop-filter:blur(8px);border-radius:var(--border-radius-sm);z-index:999}.file-preview img{max-width:100%;max-height:150px;border-radius:var(--border-radius-sm);margin-top:8px;cursor:zoom-in}.file-preview button{position:absolute;top:6px;right:10px;background:0;border:0;font-size:1.1rem;color:var(--danger);cursor:pointer;transition:var(--transition)}.file-preview button:hover{transform:scale(1.1)}.file-message img{max-width:100%;max-height:200px;border-radius:var(--border-radius-sm);margin-top:8px;cursor:zoom-in}#videoModal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.95);z-index:3000;backdrop-filter:blur(10px);justify-content:center;align-items:center}#videoModal .image-modal-content{position:relative;width:90%;max-width:800px;background:#000;border-radius:8px;overflow:hidden}#modalVideo{width:100%;max-height:80vh;display:block}.file-message video{all:unset;display:block;width:100%!important;max-height:370px!important;border-radius:var(--border-radius-sm)!important;margin-top:8px!important;cursor:pointer!important;transition:transform 0.3s ease!important;box-shadow:0 4px 12px rgba(0,0,0,.2)!important;background:#000!important}.file-message video::-webkit-media-controls-panel,.file-message video::-webkit-media-controls-enclosure{border-radius:var(--border-radius-sm);overflow:hidden}.file-message video:hover{transform:scale(1.02)}#videoModal .modal-close,#videoModal .modal-download{position:absolute;top:15px;background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;z-index:10;transition:var(--transition)}#videoModal .modal-close{right:15px}#videoModal .modal-close:hover{background:var(--danger);transform:scale(1.1)}#videoModal .modal-download{right:65px}#videoModal .modal-download:hover{background:var(--accent-primary);transform:scale(1.1)}.file-message a{display:inline-block;margin-top:8px;padding:8px 12px;background:var(--accent-primary);color:#fff;border-radius:var(--border-radius-sm);text-decoration:none;transition:var(--transition)}.file-message a:hover{opacity:.9;transform:translateY(-2px)}.image-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);display:flex;justify-content:center;align-items:center;z-index:3000;backdrop-filter:blur(10px)}.image-modal-content{position:relative;max-width:90%;max-height:90%}.image-modal-content img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5)}.modal-close{position:absolute;top:15px;right:15px;background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;z-index:10;transition:var(--transition)}.modal-close:hover{background:var(--danger);transform:scale(1.1)}.modal-download{position:absolute;top:15px;right:65px;background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;z-index:10;transition:var(--transition)}.modal-download:hover{background:var(--accent-primary);transform:scale(1.1)}.avatar-modal,.name-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:2000;backdrop-filter:blur(5px)}.avatar-modal-content,.name-modal-content{background:var(--bg-tertiary);padding:25px;border-radius:var(--border-radius);width:90%;max-width:400px;box-shadow:var(--shadow)}.avatar-modal h3,.name-modal h3{margin-top:0;color:var(--text-primary)}.avatar-preview-container{width:120px;height:120px;margin:15px auto;border-radius:50%;overflow:hidden;border:3px solid var(--accent-primary)}.avatar-preview-container img{width:100%;height:100%;object-fit:cover}.avatar-modal input,.name-modal input{width:100%;padding:12px;border-radius:var(--border-radius-sm);border:1px solid rgba(255,255,255,.1);background:var(--bg-secondary);color:var(--text-primary);margin:15px 0;font-size:1rem}.avatar-modal-buttons,.name-modal-buttons{display:flex;gap:10px;justify-content:flex-end}.avatar-modal-buttons button,.name-modal-buttons button{padding:10px 20px}.input-with-counter{position:relative;margin:15px 0}.input-with-counter input{margin:0}.char-count{position:absolute;bottom:10px;right:10px;font-size:.8rem;color:var(--text-muted)}@media (max-width:600px){.chat-container{border-radius:0}.header{padding:12px 16px}.user-info span{display:none}.message{max-width:88%}.input-area{padding:12px}.scroll-button{bottom:130px;right:15px;width:40px;height:40px;font-size:1.1rem}.delete-btn,.reply-btn{opacity:1}.modal-close,.modal-download{width:35px;height:35px;font-size:1rem}.modal-download{right:55px}}.custom-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;z-index:2000;backdrop-filter:blur(5px)}.custom-modal-content{background:var(--bg-tertiary);padding:25px;border-radius:var(--border-radius);width:90%;max-width:400px;box-shadow:var(--shadow);text-align:center}.custom-modal-content h3{margin-top:0;color:var(--text-primary)}.custom-modal-content p{color:var(--text-secondary);margin-bottom:20px}.modal-buttons{display:flex;gap:10px;justify-content:center}.modal-buttons button{padding:10px 20px;width:100px}.date-header{text-align:center;margin:15px 0;font-size:0.8rem;color:var(--text-secondary);position:relative;z-index:10;user-select:none;pointer-events:none}.date-header span{background:var(--bg-tertiary);padding:6px 12px;border-radius:var(--border-radius-sm);box-shadow:0 2px 8px rgba(0,0,0,.2);font-weight:500;display:inline-block}.resistance-blue-badge{background:var(--resistance-blue);color:#fff;font-size:.65rem;padding:2px 6px;border-radius:4px;font-weight:600;margin-left:6px;text-shadow:0 1px 2px rgba(0,0,0,.4)}.brave-pink-badge{background:var(--accent-pink);color:#000;font-size:.65rem;padding:2px 6px;border-radius:4px;font-weight:600;margin-left:6px;text-shadow:0 1px 2px rgba(255,255,255,.4)}.hero-green-badge{background:var(--accent-primary);color:#fff;font-size:.65rem;padding:2px 6px;border-radius:4px;font-weight:600;margin-left:6px;text-shadow:0 1px 2px rgba(0,0,0,.4)}