/* PWA-specific styles */

/* Install button */
.btn-install-pwa {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    border: 3px solid #4A90E2;
    background-color: #4A90E2;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.btn-install-pwa:hover {
    background-color: #357ABD;
    border-color: #357ABD;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-install-pwa:active {
    transform: scale(0.98);
}

/* Update button */
.btn-update-app {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    border: 3px solid #FF9800;
    background-color: #FF9800;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    animation: pulse 2s infinite;
}

.btn-update-app:hover {
    background-color: #F57C00;
    border-color: #F57C00;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-update-app:active {
    transform: scale(0.98);
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 152, 0, 0);
    }
}

/* iOS safe area support */
@supports (padding: max(0px)) {
    body {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

/* Prevent bounce effect on iOS */
html, body {
    overscroll-behavior-y: none;
}

/* Standalone mode detection */
@media all and (display-mode: standalone) {
    /* Add extra padding for status bar on iOS */
    body {
        padding-top: max(10px, env(safe-area-inset-top));
    }
    
    /* Hide install button when already installed */
    #pwaInstallSection {
        display: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-icon, .btn-control {
        border-width: 3px;
    }
}

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

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
    }
    
    .container {
        background-color: #2d2d2d;
        border-color: #444;
    }
    
    .text-area {
        background-color: #2d2d2d;
        color: #e0e0e0;
    }
    
    .text-area:focus {
        background-color: #3a3a3a;
    }
    
    .modal-content {
        background-color: #2d2d2d;
        border-color: #444;
    }
    
    .setting-group label {
        color: #e0e0e0;
    }
    
    .voice-info {
        background-color: #1a3a5a;
        color: #90c8ff;
    }
    
    .speed-value {
        background-color: #1a3a5a;
        color: #90c8ff;
        border-color: #4A90E2;
    }
}