:root {
    --spotify-green: #1db954;
    --spotify-green-hover: #1ed760;
    --spotify-black: #191414;
    --spotify-dark-gray: #121212;
    --spotify-gray: #282828;
    --spotify-light-gray: #b3b3b3;
    --spotify-white: #ffffff;
}

body {
    background: var(--spotify-black);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bg-spotify-dark {
    background-color: var(--spotify-dark-gray);
}

.bg-spotify-gray {
    background-color: var(--spotify-gray);
}

.bg-spotify-green {
    background-color: var(--spotify-green);
}

.bg-spotify-green-hover:hover {
    background-color: var(--spotify-green-hover);
}

.text-spotify-green {
    color: var(--spotify-green);
}

.border-spotify-gray {
    border-color: var(--spotify-gray);
}

.border-spotify-green {
    border-color: var(--spotify-green);
}

.message-bubble {
    max-width: 80%;
    word-wrap: break-word;
    cursor: pointer;
    transition: all 0.2s ease;
}

.message-bubble:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 185, 84, 0.2);
}

.copied-animation {
    animation: copied 0.5s ease-in-out;
}

@keyframes copied {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.input-focus:focus {
    border-color: var(--spotify-green);
    box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.1);
}

.slide-up {
    animation: slideUp 0.3s ease-out;
}

.slide-down {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

.highlight-pulse {
    animation: highlightPulse 1s ease-in-out;
}

@keyframes highlightPulse {

    0%,
    100% {
        border-color: var(--spotify-gray);
    }

    50% {
        border-color: var(--spotify-green);
    }
}

/* Safe area для iOS */
.safe-area-top {
    padding-top: max(0.75rem, env(safe-area-inset-top));
}

.safe-area-bottom {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.safe-area-full {
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Покращуємо скролінг на мобільних */
#settingsMenu {
    -webkit-overflow-scrolling: touch;
}

#messages {
    -webkit-overflow-scrolling: touch;
}

/* Мобільні налаштування для інпутів */
@media (max-width: 640px) {

    input[type="text"],
    input[type="password"] {
        font-size: 16px;
        /* Запобігає зумові на iOS */
    }
}

#copyNotification {
    z-index: 11;
}