* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;        /* sztywna wysokość -> scroll dzieje się wewnątrz, nie na body */
    overflow: hidden;
}

/* karuzela stron: viewport przycina, tor przesuwa się w bok */
.carousel-viewport {
    flex: 1;
    min-height: 0;         /* pozwala kurczyć się poniżej treści -> wewnętrzny scroll */
    overflow: hidden;
    position: relative;
    touch-action: pan-y;   /* pion scrolluje natywnie, poziom obsługuje JS */
}

.carousel-track {
    display: flex;
    height: 100%;
    will-change: transform;
}

.carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    min-height: 0;         /* kluczowe: bez tego flex item nie kurczy się i scrolluje body */
    padding: 20px;
    background-color: #f5f5f5;
    overflow-y: auto;
}

.bottom-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #333;
    color: white;
    position: sticky;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.panel-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.record-button {
    width: 80px;
    height: 80px;
    background-color: red;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.7);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    font-size: 28px;
    color: white;
}

.record-button:active,
.record-button.recording {
    transform: scale(1.3);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.9);
}

/* nagrywanie bez trzymania palca — kulka pulsuje rozmiarem, że wciąż nagrywa */
.record-button.locked {
    animation: record-pulse 1.2s ease-in-out infinite;
}

@keyframes record-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.3); }
}

#cancelZone,
#lockZone {
    display: flex; /* <-- to najważniejsze! */
    width: 80px;
    height: 80px;
    background-color: black;
    color: white;
    font-size: 28px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    opacity: 0;           /* domyślnie niewidoczne */
    visibility: hidden;   /* i ukryte */
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

/* kulka najechała na strefę — podświetlenie sterowane klasą, nie stylem inline */
#cancelZone.is-over {
    background-color: darkred;
}

#lockZone.is-over {
    background-color: #1e5090;
}

/* nagrywanie z zablokowanym przyciskiem: strefa zamienia się w „stop” */
#lockZone.is-locked {
    background-color: #1e5090;
}

/* wskaźnik pozycji w karuzeli (np. „3 / 5 · historia") */
.carousel-indicator {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    background-color: rgba(30, 80, 144, 0.92);
    color: #fff;
    font-size: 12px;
    border-radius: 12px;
    z-index: 10000;
    pointer-events: none;
    display: none;
}

.carousel-indicator.is-history {
    background-color: rgba(180, 60, 0, 0.92);
}

/* overlay: koło z punktu puszczenia, morfuje w prostokąt obejmujący element */
.record-wave {
    position: fixed;
    box-sizing: border-box;
    border: 3px solid red;
    background-color: rgba(255, 0, 0, 0.25);
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.7);
    pointer-events: none;
    z-index: 9999;
}

@media (max-width: 768px) {
    .main-content {
        padding: 15px;
    }

    .bottom-panel {
        padding: 15px;
    }

    .record-button {
        width: 70px;
        height: 70px;
    }

    #cancelZone,
    #lockZone {
        width: 70px;
        height: 70px;
        font-size: 24px;
    }
}
