/* Custom styles to complement Bootstrap */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.card {
    border-radius: 8px;
    margin-bottom: 1rem;
}

.tone-btn {
    width: 100%;
}

#generatedLetter {
    font-family: monospace;
    white-space: pre-wrap;
}

/* Mobile responsiveness improvements */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
}

/* Hover effects */
.tone-btn:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* Copy button animation */
#copyButton {
    transition: all 0.3s ease;
}

#copyButton:active {
    transform: scale(0.95);
}