/* Custom styles to complement Tailwind CSS */

/* Loading animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Toast animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-enter {
    animation: slideInRight 0.3s ease-out;
}

/* PWA install prompt */
.install-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

/* Message card hover effects */
.message-card {
    transition: all 0.2s ease;
}

.message-card:hover {
    transform: translateY(-2px);
}

/* Character counter colors */
.char-counter.warning {
    color: #f59e0b;
}

.char-counter.danger {
    color: #ef4444;
}

/* Display preview styling */
.display-preview {
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
    color: white;
    aspect-ratio: 16/9;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.display-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0,0 L100,100 M100,0 L0,100' stroke='%23ffffff' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Ripple effect for buttons */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.btn-ripple:active::after {
    width: 200px;
    height: 200px;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
    /* Ensure tap targets are large enough */
    button, .btn, input, select, textarea {
        min-height: 44px;
    }
    
    /* Improve touch scrolling */
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent zoom on input focus */
    input, select, textarea {
        font-size: 16px;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .display-preview {
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for better keyboard navigation */
button:focus,
input:focus,
select:focus,
textarea:focus,
.focusable:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}