/* ==========================================================================
   VectorD — Global Mobile Polish
   Loaded after dark-mode.css on every HTML page.
   Goals: prevent iOS zoom, kill horizontal scroll, fix tap targets,
   respect safe areas on notched phones, improve readability.
   ========================================================================== */

/* ---------- Universal box reset for predictable mobile sizing ---------- */
*, *::before, *::after {
    -webkit-tap-highlight-color: transparent; /* No ugly blue flash on tap */
}

html {
    -webkit-text-size-adjust: 100%; /* Stop iOS Safari from inflating text in landscape */
    text-size-adjust: 100%;
    overflow-x: hidden; /* Belt-and-braces against horizontal scroll */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Apply to every page; index already had this, others didn't */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Long URLs / unbroken strings inside cards & chat must wrap, not overflow */
p, h1, h2, h3, h4, h5, h6, li, td, th, span, a, button {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- Critical iOS fix: form inputs at 16px+ to suppress zoom ---------- */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    select,
    textarea {
        font-size: 16px !important; /* Anything <16px causes iOS to zoom on focus */
    }
}

/* ---------- Tap targets: ensure all interactive elements are at least 44x44 ---------- */
@media (max-width: 768px) {
    /* Buttons & links inside nav/menu/cards inherit min-height */
    button, a[role="button"], [onclick] {
        touch-action: manipulation; /* Eliminate 300ms tap delay on older iOS */
    }
    /* Tighten the focus state since :focus on touch devices is annoying */
    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible) {
        outline: none;
    }
}

/* ---------- Safe area insets for notched phones ---------- */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    /* Fixed nav respects status bar */
    nav.nav-blur {
        padding-top: env(safe-area-inset-top);
    }
    /* Sticky bottom CTAs / banners stay above the home indicator */
    footer, .vd-cookie-banner {
        padding-bottom: max(env(safe-area-inset-bottom), 12px);
    }
}

/* ---------- Stop fixed/absolute decorative blobs from causing scroll ---------- */
.absolute, [class*="absolute"] {
    /* Already pinned; just guarantee they can't push the body width */
    max-width: 100vw;
}

/* ---------- Smooth momentum scrolling on iOS ---------- */
.widget-scroll, .ai-panel, .vd-chat-msgs, [class*="overflow-y-auto"], [class*="overflow-auto"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* Don't scroll the page when reaching list edges */
}

/* ---------- Mobile typography clamps so headings shrink gracefully ---------- */
@media (max-width: 480px) {
    h1, .text-3xl, .text-4xl, .text-5xl, .text-6xl, .text-7xl, .text-8xl {
        line-height: 1.15;
    }
    /* Hero h1 can be brutal on tiny screens — clamp it */
    section h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }
    section h2 {
        font-size: clamp(1.5rem, 6.5vw, 2rem);
    }
    /* Body copy minimum readable size */
    p, li {
        font-size: clamp(0.875rem, 3.6vw, 1rem);
        line-height: 1.6;
    }
}

/* ---------- Section padding shouldn't be cramped on mobile ---------- */
@media (max-width: 480px) {
    section {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    /* But don't double up if section already has px-* */
    section > [class*="max-w-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- Cards: prevent content overflow on narrow screens ---------- */
@media (max-width: 480px) {
    .card-glass, .pricing-highlight, [class*="rounded-2xl"], [class*="rounded-3xl"] {
        max-width: 100%;
    }
}

/* ---------- Buttons: ensure minimum tap height & comfortable padding ---------- */
@media (max-width: 768px) {
    button:not([class*="w-"]):not([class*="size"]),
    a[class*="px-"][class*="py-"]:not([class*="w-"]) {
        min-height: 44px;
    }
    /* Pill buttons should have enough horizontal padding to feel tappable */
    [class*="rounded-full"][class*="px-3"] { padding-left: 14px; padding-right: 14px; }
    [class*="rounded-full"][class*="px-4"] { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Admin dashboard: range buttons & stat cards ---------- */
@media (max-width: 480px) {
    /* Range buttons (24h/7d/30d/90d) — let them wrap if needed */
    .range-btn {
        flex: 1 1 auto;
        min-width: 56px;
    }
    /* Mode buttons (Aggregated/Per Platform) on charts */
    .mode-btn {
        flex: 1 1 auto;
        min-width: 80px;
    }
    /* Passkey input boxes — tighten to fit 6 across on 320px screens */
    #passkeyInputs input {
        width: 40px !important;
        height: 50px !important;
        font-size: 18px !important;
    }
    /* Chart Y-axis labels readable */
    .chart-y-label {
        font-size: 10px;
    }
}

/* Even tinier screens (iPhone SE 1st gen, 320px) */
@media (max-width: 360px) {
    #passkeyInputs {
        gap: 4px !important;
    }
    #passkeyInputs input {
        width: 36px !important;
        height: 46px !important;
        font-size: 16px !important;
    }
}

/* ---------- Forms: better mobile spacing & visible focus ---------- */
@media (max-width: 480px) {
    .form-input {
        padding: 12px 14px;
        border-radius: 10px;
    }
    .form-input:focus {
        outline: 2px solid rgba(196, 30, 42, 0.25);
        outline-offset: 1px;
    }
}

/* ---------- Tables: horizontal scroll instead of squishing ---------- */
@media (max-width: 768px) {
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- Modal & overlay panels: respect viewport on mobile ---------- */
@media (max-width: 480px) {
    .menu-panel {
        width: min(85vw, 320px) !important;
    }
    /* Admin AI panel — full screen on mobile */
    .ai-panel {
        width: 100vw !important;
    }
}

/* ---------- Hamburger menu panel: scrollable so all links are reachable ---------- */
/* Apply on every screen size, not just mobile, since landscape phones / short
   viewports also clip the bottom links. We make the panel a flex column so the
   header stays put and the links area scrolls. */
.menu-panel {
    display: flex !important;
    flex-direction: column !important;
}
.menu-panel > div:first-child {
    flex-shrink: 0;
}
/* The links container (everything below the header) becomes the scroll area */
.menu-panel > div:not(:first-child) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* ---------- Image responsiveness fallback ---------- */
/* NB: don't apply to svg — sized icons (w-4 h-4) need explicit dimensions */
img, video {
    max-width: 100%;
    height: auto;
}
svg {
    max-width: 100%;
}

/* ---------- Pricing cards: tighten padding on very small screens ---------- */
@media (max-width: 480px) {
    [class*="p-8"][class*="rounded-2xl"],
    .card-glass.rounded-2xl,
    [class*="pricing-"].rounded-2xl {
        padding: 1.25rem !important; /* 20px instead of 32px */
    }
    /* Pricing grids feel less cramped with tighter gaps */
    [class*="grid-cols-1"][class*="sm:grid-cols-2"][class*="lg:grid-cols-3"] {
        gap: 1rem !important;
    }
    /* Hero buttons that wrap should use full width on tiny screens */
    section [class*="flex-wrap"][class*="justify-center"] > a[class*="rounded-full"] {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ---------- About Us stats row: shrink numbers on tiny screens ---------- */
@media (max-width: 480px) {
    /* grid-cols-3 always — clamp the big stat numbers so they fit */
    #about .text-4xl {
        font-size: clamp(1.5rem, 8vw, 2.25rem);
    }
}

/* ---------- Footer social icons: comfortable tap targets on mobile ---------- */
@media (max-width: 768px) {
    footer a[aria-label="Instagram"],
    footer a[aria-label="X (Twitter)"] {
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---------- Code blocks & long URLs in chat / messages ---------- */
pre, code {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
}

/* ---------- Sticky header should not let content scroll under it weirdly ---------- */
@media (max-width: 480px) {
    nav.nav-blur {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* ---------- Chat widget mobile fixes (Victor) ---------- */
@media (max-width: 480px) {
    .vd-chat-panel,
    [class*="vd-chat-panel"] {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        right: 8px !important;
        left: 8px !important;
        bottom: 80px !important;
        max-height: calc(100vh - 100px) !important;
        max-height: calc(100svh - 100px) !important;
    }
    .vd-chat-fab {
        right: 12px !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
}

/* ---------- Disable double-tap zoom on interactive elements ---------- */
button, a, [role="button"], input, select, textarea {
    touch-action: manipulation;
}

/* ---------- Reduce motion for users who request it ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}