/* iOS-specific styles and optimizations */

/* Custom line clamping */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* iOS-style typography */
.prose {
    line-height: 1.6;
}

.prose p {
    margin-bottom: 1.5em;
}

.prose h1, .prose h2, .prose h3 {
    margin-top: 2.5em;
    margin-bottom: 1em;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
}

.prose h1 {
    font-size: 1.75em;
    color: #dc2626;
}

.prose h2 {
    font-size: 1.5em;
    color: #1e40af;
}

.prose h3 {
    font-size: 1.25em;
    color: #374151;
}

.prose ul, .prose ol {
    margin: 1.5em 0;
    padding-left: 2em;
}

.prose li {
    margin: 0.75em 0;
}

.prose strong {
    font-weight: 600;
    color: #dc2626;
}

.prose em {
    font-style: italic;
    color: #1e40af;
}

.prose blockquote {
    border-left: 4px solid #dc2626;
    padding-left: 1.5em;
    margin: 2em 0;
    font-style: italic;
    background: #fef2f2;
    padding: 1em 1.5em;
    border-radius: 0 10px 10px 0;
}

/* iOS-style typewriter effect */
.typewriter-cursor::after {
    content: '|';
    animation: ios-blink 1s infinite;
    font-weight: 100;
    color: #007AFF;
}

@keyframes ios-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* iOS-style form controls */
.ios-checkbox {
    appearance: none;
    background-color: white;
    border: 2px solid #D1D1D6;
    border-radius: 6px;
    width: 20px;
    height: 20px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ios-checkbox:checked {
    background-color: #007AFF;
    border-color: #007AFF;
}

.ios-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: -1px;
    left: 2px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* iOS-style slider */
.slider-ios {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #E5E5EA;
    border-radius: 2px;
    outline: none;
    transition: background 0.2s ease;
}

.slider-ios::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.slider-ios::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* iOS-style select dropdown */
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 40px;
}

/* iOS-style focus states */
input:focus, textarea:focus, select:focus {
    transform: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* iOS-style button effects */
button:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

button:not(:active) {
    transform: scale(1);
    transition: transform 0.2s ease;
}

/* iOS-style card hover effects */
.group:hover {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

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

/* iOS dark mode support */
@media (prefers-color-scheme: dark) {
    .dark .bg-white {
        background-color: #1C1C1E;
    }
    
    .dark .text-gray-900 {
        color: #FFFFFF;
    }
    
    .dark .text-gray-800 {
        color: #F2F2F7;
    }
    
    .dark .text-gray-700 {
        color: #E5E5EA;
    }
    
    .dark .text-gray-600 {
        color: #AEAEB2;
    }
    
    .dark .text-gray-500 {
        color: #8E8E93;
    }
    
    .dark .border-ios-gray4 {
        border-color: #3A3A3C;
    }
    
    .dark .border-ios-gray5 {
        border-color: #2C2C2E;
    }
    
    .dark .bg-ios-gray6 {
        background-color: #000000;
    }
    
    .dark .prose h1 {
        color: #FF6B6B;
    }
    
    .dark .prose h2 {
        color: #4DABF7;
    }
    
    .dark .prose h3 {
        color: #E5E5EA;
    }
    
    .dark .prose strong {
        color: #FF6B6B;
    }
    
    .dark .prose em {
        color: #4DABF7;
    }
    
    .dark .prose blockquote {
        background: #1C1C1E;
        border-left-color: #FF6B6B;
        color: #E5E5EA;
    }
}

/* iOS-specific animations */
@keyframes bounce-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes slide-up {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes scale-in {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Touch optimization for iOS */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    button:hover,
    .group:hover {
        transform: none;
    }
    
    /* Larger touch targets */
    button, input, select, textarea {
        min-height: 44px;
    }
    
    /* Better touch feedback */
    button:active {
        background-color: rgba(0, 0, 0, 0.1);
        transform: scale(0.96);
    }
}

/* Prevent text selection on UI elements */
button, .cursor-pointer {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Smooth scrolling for iOS */
html {
    -webkit-overflow-scrolling: touch;
}

/* iOS-style backdrop blur support */
@supports (backdrop-filter: blur(20px)) {
    .backdrop-blur-lg {
        backdrop-filter: blur(20px) saturate(180%);
    }
}

/* PWA optimizations */
@media (display-mode: standalone) {
    /* Styles for when app is installed as PWA */
    body {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
}

/* Landscape orientation handling */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* Optimize for landscape on small screens */
    .text-2xl {
        font-size: 1.25rem;
    }
    
    .text-3xl {
        font-size: 1.5rem;
    }
    
    .p-6 {
        padding: 1rem;
    }
    
    .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1rem;
    }
}

/* High DPI displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Crisp rendering for high DPI */
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Print styles for iOS Safari */
@media print {
    .no-print {
        display: none !important;
    }
    
    .prose {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .prose h1, .prose h2, .prose h3 {
        color: #000 !important;
        page-break-after: avoid;
    }
    
    .prose p {
        orphans: 3;
        widows: 3;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* iOS-specific bug fixes */
input[type="range"] {
    /* Fix iOS range input styling */
    -webkit-appearance: none;
}

/* Fix iOS zoom on input focus */
@media screen and (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* iOS-style notification positioning */
.notification-ios {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    margin-top: 8px;
}