/* Custom styles for Speech to Text app */

body {
    background-color: #f8f9fa;
}

.card {
    border: none;
    border-radius: 10px;
}

.card-header {
    border-radius: 10px 10px 0 0 !important;
}

.btn-lg {
    padding: 15px 30px;
    font-size: 1.2rem;
}

#transcript {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    line-height: 1.6;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}

.badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}

/* Animacja dla wskaźnika nagrywania */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.spinner-border.text-danger {
    animation: pulse 1s ease-in-out infinite;
}

/* Responsywność */
@media (max-width: 768px) {
    .btn-lg {
        padding: 12px 24px;
        font-size: 1rem;
    }
    
    .card {
        margin: 10px;
    }
}

/* Dodatkowe style dla lepszego UX */
.alert {
    border-radius: 8px;
}

.btn {
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn:disabled {
    transform: none;
    opacity: 0.6;
    cursor: not-allowed;
}

#transcript:empty::before {
    content: "Tutaj pojawi się przetranskrybowany tekst...";
    color: #6c757d;
    font-style: italic;
}