#app {
            display: none;
        }
        
        #current-user-avatar {
          background-color: #f0f0f0; 
        }
        
        @keyframes float {
            0%, 100% { 
                transform: translateY(0);
                opacity: 0.4;
            }
            50% { 
                transform: translateY(-10px);
                opacity: 0.9;
            }
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .floating {
            animation: float 6s ease-in-out infinite;
        }

        .gradient-bg {
            background: linear-gradient(135deg, #f5f2dc, #d4e3f5, #f5f2dc);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .input-group {
            transition: all 0.3s ease;
        }

        .input-group:focus-within {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(22, 93, 255, 0.2);
        }

        .icon-float {
            transition: all 0.3s ease;
        }

        .input-group:focus-within .icon-float {
            transform: translateY(-5px);
            color: #165DFF;
            text-shadow: 0 0 8px rgba(22, 93, 255, 0.5);
        }

        .btn-login {
            background: linear-gradient(135deg, #165DFF, #00C1D4);
            background-size: 200% 200%;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(22, 93, 255, 0.4);
            background-position: 100% 100%;
        }

        .btn-login:active {
            transform: translateY(0);
        }

        .btn-login::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(30deg);
            transition: all 0.6s ease;
        }

        .btn-login:hover::after {
            transform: rotate(30deg) translate(20%, 20%);
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            pointer-events: none;
        }

        @keyframes slideInRight {
            0% {
                opacity: 0;
                transform: translateX(20px);
            }
            80% {
                transform: translateX(-5px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInLeft {
            0% {
                opacity: 0;
                transform: translateX(-20px);
            }
            80% {
                transform: translateX(5px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideUp {
            0% {
                opacity: 0;
                transform: translateY(10%);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message-animation-send {
            animation: slideInRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        .message-animation-receive {
            animation: slideInLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }

        .emoji-selector-animation {
            animation: slideUp 0.3s ease-out forwards;
        }

        .media-selector-animation {
            animation: slideUp 0.3s ease-out forwards;
        }

        #settings-modal > div {
            background: rgba(255, 255, 255, 0.60);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border-radius: 20px;
            overflow: hidden;
          }

        #settings-modal {
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(3px);
        }
      
      .overlay {
            background: rgba(255, 255, 255, 0.80);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border-radius: 20px;
            z-index: 50;
        }
      
      .dark-overlay {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
            z-index: 30; 
        }
      
      .wallpaper-option {
        transition: all 0.3s ease;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      }

      .wallpaper-option:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(22, 93, 255, 0.2);
      }

      .wallpaper-option img {
        transition: transform 0.5s ease;
      }

      .wallpaper-option:hover img {
        transform: scale(1.05);
      }

      #upload-btn, #upload-avatar-btn {
        background: linear-gradient(135deg, #165DFF, #00C1D4);
        color: white;
        border: none;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(22, 93, 255, 0.2);
      }

      #upload-btn:hover, #upload-avatar-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(22, 93, 255, 0.3);
      }

      #upload-btn:active, #upload-avatar-btn:active {
        transform: translateY(0);
      }