button {
  
    cursor:pointer;
}

a {
    cursor: pointer;
}

a:hover {
    animation: shakey 1s ease-in-out;
}

button:hover {
    animation: shakey 1s ease-in-out;
}

a:active {
    transform: translateY(5px);
}

button:active {
    transform: translateY(5px);
}

text-shakex:hover {
    animation: shakex 1s ease-in-out;
}


.navbar-show-effect {
  animation: navbarShowAnim 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
}

@keyframes navbarShowAnim {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Effect voor navbar verbergen (fade out + slide down) */
.navbar-hide-effect {
  animation: navbarHideAnim 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
}

@keyframes navbarHideAnim {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(40px);
  }
}

@keyframes shakey {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(5px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes shakex {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(5px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Animatieklassen en keyframes uit custom.css */
.animate-pop {
    animation: pop-in 0.25s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes pop-in {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.animate-fadein {
    animation: fade-in 0.5s;
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.btn-microphone.recording {
    background: var(--recording) !important;
    border-color: var(--recording) !important;
    animation: pulse 1s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(231,76,60,0.7); }
    70% { box-shadow: 0 0 0 10px rgba(231,76,60,0); }
    100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); }
}

.menu-button-fab {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 2000;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--chat-gradient-start) 0%, var(--chat-gradient-end) 100%);
    color: var(--main-fg);
    border: none;
    box-shadow: 0 6px 24px 0 var(--fab-shadow), 0 1.5px 4px 0 var(--black-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: background 0.3s, box-shadow 0.3s, bottom 0.3s;
    cursor: pointer;
    outline: none;
    padding: 0;
    animation: menu-fab-fadein 0.5s;
}
.menu-button-fab.menu-button-fab-open {
    animation: menu-fab-bounce 0.4s, menu-fab-pulse 1.2s infinite alternate;
}
@keyframes menu-fab-fadein {
    from { opacity: 0; transform: translateX(-50%) scale(0.7); box-shadow: var(--menu-fab-fadein-from); }
    to { opacity: 1; transform: translateX(-50%) scale(1); box-shadow: var(--menu-fab-fadein-to); }
}
@keyframes menu-fab-pulse {
    0% { box-shadow: var(--menu-fab-pulse-0); }
    100% { box-shadow: var(--menu-fab-pulse-100); }
}
.menu-button-fab-label {
    display: none;
}

.menu-button-fab-top {
    top: 24px;
    bottom: auto !important;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    z-index: 2001;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--chat-gradient-start) 0%, var(--chat-gradient-end) 100%);
    color: var(--main-fg);
    border: none;
    box-shadow: 0 6px 24px 0 var(--fab-shadow), 0 1.5px 4px 0 var(--black-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: background 0.3s, box-shadow 0.3s, top 0.3s;
    cursor: pointer;
    outline: none;
    padding: 0;
    animation: menu-fab-fadein 0.5s;
}
.menu-button-fab-top.menu-button-fab-open {
    animation: menu-fab-bounce 0.4s, menu-fab-pulse 1.2s infinite alternate;
}
.menu-button-fab.menu-button-fab-top:hover, .menu-button-fab.menu-button-fab-top:focus {
    animation: none;
}
.menu-button-fab-bottom-right {
    position: fixed;
    right: 20px;
    top: auto;
    left: auto;
    bottom: 15px;
    transform: none;
    z-index: 2001;
}
.menu-button-fab-bottom-right.menu-button-fab-open {
    animation: menu-fab-bounce 0.4s, menu-fab-pulse 1.2s infinite alternate;
}