/* Stavova bodka mikrofonu v hlavicke. */

.header {
    /* Zachovaj existujuce styly, pridaj toto. */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

/* Lava cast hlavicky: tlacidlo temy. */
.header #theme-toggle-button {
    justify-self: start;
}

/* Stred hlavicky: nazov a bodka. */
#header-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: center;
    /* Zrus absolutne pozicovanie. */
    position: static;
    transform: none;
    left: auto;
    right: auto;
    margin: 0;
    width: auto;
    pointer-events: none;
}

#header-title .mic-status-dot {
    pointer-events: auto;
}

/* Prava cast hlavicky: tab tlacidla. */
.header #tab-buttons {
    justify-self: end;
}

@media (max-width: 600px) {
    #header-title {
        font-size: 0;
        gap: 0;
    }

    #header-title .mic-status-dot {
        margin-right: 0;
        pointer-events: auto;
    }
}

.mic-status-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 10px;
    flex-shrink: 0;
    position: relative;
    top: 0;
}

.mic-status-dot::before {
    content: "\f130";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    font-size: 16px;
    line-height: 1;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* idle: mikrak este neziskany */
.mic-status-dot.mic-status--idle::before {
    color: #666;
    text-shadow: none;
}

/* waiting: mikrak je, AudioContext caka na gesto */
.mic-status-dot.mic-status--waiting::before {
    color: #f0a500;
    animation: mic-pulse-amber 2s ease-out infinite;
}

/* listening: mikrak bezi, ale je ticho */
.mic-status-dot.mic-status--listening::before {
    color: #999;
    text-shadow: 0 0 5px rgba(160, 160, 160, 0.5);
    animation: none;
}

/* active: mikrak prijima signal nad prahom */
.mic-status-dot.mic-status--active::before {
    color: #3ecf6e;
    animation: mic-pulse-green 1.4s ease-out infinite;
}

/* blocked: zamietnuty pristup alebo tvrda chyba */
.mic-status-dot.mic-status--blocked::before {
    color: #e05252;
    text-shadow: 0 0 7px rgba(224, 82, 82, 0.6);
    animation: none;
}

/* Keyframy pulzu. */
@keyframes mic-pulse-green {
    0% {
        text-shadow: 0 0 2px rgba(62, 207, 110, 0.9);
    }

    70% {
        text-shadow: 0 0 14px rgba(62, 207, 110, 0);
    }

    100% {
        text-shadow: 0 0 2px rgba(62, 207, 110, 0);
    }
}

@keyframes mic-pulse-amber {
    0% {
        text-shadow: 0 0 2px rgba(240, 165, 0, 0.9);
    }

    70% {
        text-shadow: 0 0 14px rgba(240, 165, 0, 0);
    }

    100% {
        text-shadow: 0 0 2px rgba(240, 165, 0, 0);
    }
}