/* ═══════════════════════ Summarify Pro — Custom Styles ═══════════════════════ */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Dropzone highlight */
.dropzone.drag-over {
    border-color: #3b82f6 !important;
    background-color: rgba(59,130,246,0.05) !important;
}

/* Tab transition */
.tab-content { transition: opacity 0.2s ease; }
.tab-content.hidden { display: none; }

/* Modal */
.modal { transition: opacity 0.3s ease; }
.modal.hidden { display: none; }

/* Toast fade out */
#toast { transition: opacity 0.3s ease, transform 0.3s ease; }
#toast.show { opacity: 1; transform: translateY(0); }
#toast.hide { opacity: 0; transform: translateY(12px); }

/* AI buttons */
.ai-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Prose adjustments */
.prose { font-size: 0.9375rem; }
.prose strong { color: #1e293b; }

/* Navbar shadow on scroll */
#navbar.scrolled { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Skeleton pulse for loading states */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

/* Fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Selection color */
::selection { background-color: #bfdbfe; color: #1e40af; }

/* Focus visible */
:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* ═══════════════════════ Mobile Responsive ═══════════════════════ */
@media (max-width: 640px) {
    /* Navbar */
    #nav-auth .text-sm { font-size: 0.75rem; }
    #nav-auth button { padding-left: 0.5rem; padding-right: 0.5rem; }
    #nav-user .text-sm { font-size: 0.7rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #user-email { font-size: 0.7rem; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #usage-badge { font-size: 0.65rem; padding: 0.25rem 0.6rem; }
    nav .font-bold { font-size: 1rem; }

    /* Hero */
    h1 { font-size: 2rem !important; line-height: 1.2 !important; }
    .hero-subtitle { font-size: 0.95rem; }

    /* Tabs */
    .tab-btn { font-size: 0.75rem; padding: 0.5rem 0.5rem; }
    .tab-btn svg { width: 0.875rem; height: 0.875rem; }

    /* Dropzone */
    .dropzone { padding: 1.5rem 1rem; }
    .dropzone .w-14 { width: 2.5rem; height: 2.5rem; }
    .dropzone .w-7 { width: 1.25rem; height: 1.25rem; }

    /* URL input */
    #tab-url .flex { flex-direction: column; }
    #url-parse-btn { width: 100%; justify-content: center; }

    /* AI actions */
    .ai-btn { width: 100%; justify-content: center; font-size: 0.8rem; }
    #parsed-section .flex-wrap { flex-direction: column; }
    #parsed-section .flex.gap-2 > div { width: 100%; }

    /* Result section */
    #result-section .p-8, #parsed-section .p-8 { padding: 1rem; }
    #result-content { max-height: 20rem; }

    /* Cards */
    .grid-cols-1.md\:grid-cols-3,
    .grid-cols-1.md\:grid-cols-2 { gap: 1rem; }

    /* Modal */
    .modal .max-w-sm { max-width: 95vw; }
    .modal .p-8 { padding: 1.25rem; }

    /* Footer */
    footer .flex { flex-direction: column; text-align: center; gap: 0.5rem; }
    footer .flex-nowrap { flex-wrap: wrap; justify-content: center; }

    /* Toast */
    #toast { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }

    /* Features section */
    section.py-20 { padding-top: 3rem; padding-bottom: 3rem; }
    section.pb-20 { padding-bottom: 3rem; }
}