.hover-bg:hover {
    background-color: #e4e7eb;
}

/* --- Glow Animation for Input Area --- */
.google-ai-container {
    position: relative;
    display: inline-block;
}

.google-ai-container.d-block {
    display: block;
}

.google-ai-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: 1;
    background: linear-gradient(
        90deg, 
        #4285F4 0%, 
        #34A853 30%, 
        #FBBC05 60%, 
        #EA4335 100%
    );
    background-size: 200% auto;
    border-radius: 100px;
    filter: blur(5px);
    opacity: 0;
    transition: opacity 0.4s ease, background-position 0.4s ease;
}

/* Full Glow Animation (Input Area) */
.google-ai-container:hover::before,
.google-ai-container:focus-within::before {
    opacity: 0.85;
    animation: geserPelangi 2s linear infinite;
}

/* Background Overrides */
.google-ai-container:hover .input-mode-ai,
.google-ai-container:focus-within .input-mode-ai {
    background-color: var(--bs-body-bg) !important;
}

@keyframes geserPelangi {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.btn-mode-ai {
    position: relative;
    z-index: 2;
    transition: background-color 0.3s ease;
}

.input-mode-ai {
    position: relative;
    z-index: 2;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.doodle-img { 
    max-height: 150px; 
    width: auto; 
    max-width: 90vw; 
    object-fit: contain; 
    transition: transform 0.3s ease;
}
.doodle-img:hover {
    transform: scale(1.02);
}

/* --- Typewriter Animation for "Pencarian Gambar" --- */
.typewriter-wrapper {
    display: inline-flex;
    align-items: center;
}

.typewriter-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--gkr-primary, #2B3385);
    /* "Pencarian Gambar" = 16 characters */
    animation: typing 1.5s steps(16, end) forwards, blink-caret 0.75s step-end infinite;
    max-width: 0;
}

@keyframes typing {
    from { max-width: 0; }
    to { max-width: 140px; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--gkr-primary, #2B3385); }
}

.fade-in-new {
    opacity: 0;
    animation: fadeInNew 0.5s ease forwards;
    animation-delay: 1.6s; /* Wait for typing to finish */
}

@keyframes fadeInNew {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

/* KHUSUS TAMPILAN DESKTOP (Lebar Layar >= 992px) */
@media (min-width: 992px) {
    .typewriter-text {
        /* Durasi siklus total 8 detik (1.5s ngetik + 5s jeda + 1.5s hapus) */
        animation: typing-loop 8s steps(16, end) infinite, blink-caret 0.75s step-end infinite;
    }

    @keyframes typing-loop {
        /* 0 - 1.5s: Mengetik (0% -> 18.75%) */
        0% { max-width: 0; }
        18.75%, 81.25% { max-width: 145px; } /* 1.5s - 6.5s: Diam 5 detik */
        /* 6.5s - 8.0s: Menghapus (81.25% -> 100%) */
        100% { max-width: 0; }
    }

    .fade-in-new {
        animation: fade-in-loop 8s infinite;
        animation-delay: 0s;
    }

    @keyframes fade-in-loop {
        0%, 18.75% { opacity: 0; transform: scale(0.5); } /* Tersembunyi saat mengetik */
        22.5%, 77.5% { opacity: 1; transform: scale(1); } /* Muncul jelas di jeda 5 detik */
        81.25%, 100% { opacity: 0; transform: scale(0.5); } /* Menghilang saat dihapus */
    }
}