/* ===========================================================
   MOBILE TOUCH & INTERACTION IMPROVEMENTS
   =========================================================== */

/* 1. Add active/tap states for mobile buttons */
.chips button:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

.ghost-btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

.heart:active {
    transform: scale(1.2);
}

/* 2. Prevent text selection on buttons (better mobile UX) */
.chips button,
.btn,
.ghost-btn,
.heart {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Remove blue highlight on tap */
    touch-action: manipulation;
    /* Prevent double-tap zoom */
}

/* 3. Better touch targets (minimum 44x44px for accessibility) */
@media (max-width: 768px) {
    .chips button {
        /* padding: 8px 12px; */
        min-height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .heart {
        padding: 10px;
        min-width: 48px;
        min-height: 48px;
    }

    /* Full-size ghost buttons (e.g. drawer controls) get larger touch targets.
       .btn-action buttons are excluded — they have their own compact sizing. */
    .ghost-btn:not(.btn-action) {
        min-height: 48px;
        padding: 14px 18px;
    }
}

/* 4. Smooth scroll behavior for mobile */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* 5. Prevent pull-to-refresh when drawer is open */
body.drawer-open {
    overscroll-behavior-y: contain;
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* 6. Better drawer handle visibility on mobile */
.drawer::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--muted);
    border-radius: 2px;
    margin: 8px auto 12px;
    opacity: 0.4;
}

/* 7. Better touch feedback for suggest dropdown */
.suggest button:active {
    background: rgba(0, 0, 0, 0.07);
}

@media (prefers-color-scheme: dark) {
    .suggest button:active {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* 8. Improve modal close button tap area on mobile */
@media (max-width: 768px) {
    .ctx .close {
        padding: 12px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 9. Prevent zoom on input focus (iOS Safari) */
@media (max-width: 768px) {
    .input {
        font-size: 16px;
        /* Prevents iOS zoom on focus - DO NOT go below 16px */
    }
}

/* 10. Better scrim opacity for mobile */
@media (max-width: 768px) {
    .scrim.show {
        background: rgba(0, 0, 0, 0.4);
    }
}

/* 11. Drawer animation improvements */
.drawer {
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
}

/* 12. Safe area insets for iPhone notch/home indicator */
@supports (padding: env(safe-area-inset-bottom)) {
    .drawer {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
}

/* 13. Prevent text scaling issues on iOS */
body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 14. Better context modal sizing on mobile */
@media (max-width: 768px) {
    dialog.ctx {
        width: 95vw;
        max-height: 90vh;
        margin: auto;
    }

    .ctx-body {
        max-height: 60vh;
        font-size: 15px;
        padding: 0 12px 12px;
    }
}

/* 15. Touch-friendly verse controls */
@media (max-width: 768px) {
    .verse-toolbar {
        gap: 12px;
    }

    .verse-toolbar .ghost-btn:not(.btn-action) {
        min-height: 48px;
        padding: 14px 18px;
    }
}

/* 16. Prevent accidental text selection during swipes */
.drawer,
.scrim,
.ctx {
    -webkit-user-select: none;
    user-select: none;
}

/* Allow text selection in verse content only */
.verse-text,
.ctx-body,
.saved-item {
    -webkit-user-select: text;
    user-select: text;
}

/* 17. Better focus indicators for keyboard users (not touch) */
@media (hover: hover) and (pointer: fine) {

    .chips button:focus-visible,
    .ghost-btn:focus-visible,
    .btn:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
}

/* 18. Hide outlines for touch users */
@media (hover: none) and (pointer: coarse) {

    button:focus,
    .btn:focus,
    .ghost-btn:focus {
        outline: none;
    }
}

/* 19. Improve button ripple effect on touch */
@media (hover: none) {
    .btn:active {
        background: color-mix(in srgb, var(--accent) 75%, white);
    }
}

/* 20. Better spacing for small screens */
@media (max-width: 480px) {
    .chips {
        gap: 8px;
    }

    /* .chips button {
        font-size: 15px;
        padding: 6px 10px;
    } */
}

/* 21. Optimize drawer for landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .drawer {
        max-height: 85vh;
    }
}

/* 22. Remove button borders on mobile for cleaner look */
@media (max-width: 768px) {

    .ghost-btn {
        border: none;
    }
}

/* 23. Better touch feedback for saved items */
.saved-item {
    transition: background 0.15s ease;
}

.saved-item:active {
    background: rgba(37, 99, 235, 0.05);
}

@media (prefers-color-scheme: dark) {
    .saved-item:active {
        background: rgba(96, 165, 250, 0.08);
    }
}

/* 24. Improve remove button touch target */
.remove-saved {
    padding: 8px;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.remove-saved:active {
    background: rgba(239, 68, 68, 0.1);
}

/* 25. Better visual feedback for context link */
.meta a:active {
    opacity: 0.7;
}

/* ===========================================================
   ACTION BUTTONS (.btn-action)
   The 4 bottom-toolbar buttons (Change mood / See more verses /
   Share / Translation) get their own class so their compact
   mobile styling is fully isolated from other .ghost-btn usage.
   =========================================================== */
@media (max-width: 600px) {
    .btn-action {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 12px;
        padding: 10px 4px;
        min-height: 44px;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
        width: 100%;
    }

    .btn-action svg {
        width: 20px;
        height: 20px;
        opacity: 0.8;
    }
}

/* Push version footer to the bottom on mobile — it's metadata, not UX */
@media (max-width: 600px) {
    .home-footer {
        margin-top: 80px;
        padding-top: 0;
    }
}

/* Chip cloud — full list visible on mobile, no scroll cap */
@media (max-width: 600px) {
    .chips {
        padding-bottom: 12px;
    }
}