[x-cloak] {
    display: none !important;
}

/* Glassmorphism Utilities */

.glass-panel {

    background-color: rgba(30, 41, 59, 0.5);

    /* slate-800/50 */

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);

}



.glass-input {

    background-color: rgba(15, 23, 42, 0.6) !important;

    /* slate-900/60 */

    border: 1px solid rgba(51, 65, 85, 0.8) !important;

    /* slate-700/80 */

    color: white !important;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.glass-input:focus {

    background-color: rgba(15, 23, 42, 0.9) !important;

    border-color: #3b82f6 !important;

    /* blue-500 */

    outline: none !important;

    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;

}



.glass-input::placeholder {

    color: rgba(148, 163, 184, 0.7) !important;

    /* slate-400/70 */

}



/* Scrollbar Customization */

.custom-scrollbar::-webkit-scrollbar {

    width: 6px;

    height: 6px;

}



.custom-scrollbar::-webkit-scrollbar-track {

    background: rgba(30, 41, 59, 0.5);

    border-radius: 4px;

}



.custom-scrollbar::-webkit-scrollbar-thumb {

    background: rgba(71, 85, 105, 0.8);

    border-radius: 4px;

}



.custom-scrollbar::-webkit-scrollbar-thumb:hover {

    background: rgba(99, 102, 241, 0.8);

}



/* Animation Utilities */

@keyframes fadeInDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.animate-fade-in-down {

    animation: fadeInDown 0.5s ease-out forwards;

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.animate-fade-in-up {

    animation: fadeInUp 0.5s ease-out forwards;

}

/* Dashboard Specific Styles (Migrated from dashboard.php) */
.activity-glass {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.5rem;
    padding: 1rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .activity-glass {
        padding: 1.5rem;
        border-radius: 2rem;
    }
}

.activity-glass:hover {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Card Type Glows */
.glass-glow-emerald { box-shadow: 0 0 20px rgba(16, 185, 129, 0.05); }
.glass-glow-blue { box-shadow: 0 0 20px rgba(59, 130, 246, 0.05); }
.glass-glow-purple { box-shadow: 0 0 20px rgba(168, 85, 247, 0.05); }

.bubble-sent {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 1rem 1rem 0.25rem 1rem;
    padding: 0.75rem;
    font-size: 0.8rem;
    position: relative;
}

.bubble-received {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem 1rem 1rem 0.25rem;
    padding: 0.75rem;
    font-size: 0.8rem;
    position: relative;
}

.bubble-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.05);
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.iniciado-fixed-v2 {
    background: #0f172a; /* Slate-900 (Solid) */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px; /* More "boxed" look */
    padding: 3px 10px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tab-btn {
    padding: 0.8rem 0.5rem;
    border-radius: 1.25rem;
    font-weight: 800;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-align: center;
    min-height: 80px;
}

@media (min-width: 768px) {
    .tab-btn {
        font-size: 0.85rem;
        min-height: 90px;
    }
}

.tab-btn.active {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.tab-btn.inactive {
    background: rgba(255, 255, 255, 0.03);
    color: #94a3b8;
    border: 1px solid transparent;
}

/* iOS Safe Area Padding */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.company-logo-wrapper {
    background-color: rgba(15, 23, 42, 0.8);
    padding: 0.25rem;
    /* p-1 equivalent */
    border-radius: 0.5rem;
    /* rounded-lg equivalent */
    border: 1px solid rgba(255, 255, 255, 0.1);
    object-fit: contain;
}