/* ============================================================
   TryTempInbox — Custom styles
   Utility classes come from Tailwind (CDN). This file holds
   component styles & hardware-accelerated animations that
   Tailwind can't express inline.
   ============================================================ */

:root {
    --brand-600: #4f46e5;
    --toast-duration: 3400ms;
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ease-out: cubic-bezier(0.21, 0.61, 0.35, 1);
}

/* ───────────────────────── Base ───────────────────────── */

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
}

::selection {
    background: #c7d2fe;
    color: #1e1b4b;
}

:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* Accessibility: skip link (visible on keyboard focus only) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--brand-600);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0;
    transition: left 0.15s ease;
}

.skip-link:focus {
    left: 0;
}

/* Decorative gradient blobs behind the hero (pure CSS, GPU-friendly) */
.bg-decor {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.bg-decor::before,
.bg-decor::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    opacity: 0.35;
}

.bg-decor::before {
    width: 480px;
    height: 480px;
    top: -120px;
    right: -80px;
    background: #c7d2fe;
}

.bg-decor::after {
    width: 420px;
    height: 420px;
    top: 260px;
    left: -120px;
    background: #ddd6fe;
}

/* ─────────────────── Button click feedback ───────────────────
   Transform-only press effect → runs on the compositor thread
   (no layout thrash, hardware-accelerated). */
.btn-press {
    transition:
        transform 0.15s var(--ease-spring),
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
    will-change: transform;
}

.btn-press:active {
    transform: scale(0.94);
}

/* ───────────────── Address card (mobile fit) ─────────────────
   A generated address is ~25 monospace glyphs (8-char local part +
   "@trytempinbox.com"; legacy "temp_" prefixes reach ~30). On narrow
   viewports the default text-base + px-5 card padding leaves too
   little room, so .truncate clips it with an ellipsis. Below the sm
   breakpoint we (1) shrink the address fluidly with the viewport and
   (2) trim the card's horizontal padding/gaps to hand that space to
   the text — keeping the full domain visible without line breaks. */

@media (max-width: 640px) {

    /* div.address-card (0,1,1) outranks Tailwind's .px-5/.gap-3 (0,1,0)
       even though the CDN injects its utilities after this stylesheet. */
    div.address-card {
        gap: 0.5rem;
        /* was gap-3 (0.75rem) */
        padding-inline: 0.75rem;
        /* was px-5 (1.25rem) → frees ~16px for the address */
    }

    #email-address {
        /* Fluid type: 25 mono chars ≈ 15em wide. At 3.5vw a 360px
           viewport yields ~12.6px (~190px of text) against ~232px of
           available space — full address visible, no ellipsis. The
           0.75rem floor keeps it legible down to 320px viewports. */
        font-size: clamp(0.75rem, 3.5vw, 0.9375rem);
        letter-spacing: -0.015em;
        /* slightly tighter tracking buys ~2% extra width */
    }
}

/* ───────────────────────── Email rows ───────────────────────── */

.email-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    text-align: left;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.email-row:hover {
    background: #f8faff;
}

.email-row:active {
    transform: scale(0.995);
}

/* Entry animation for freshly arrived messages */
.email-row--new {
    animation: row-in 0.5s var(--ease-out) both;
}

@keyframes row-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
        background: #eef2ff;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        background: #fff;
    }
}

.email-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
}

.email-meta {
    display: block;
    flex: 1;
    min-width: 0;
    /* enables truncation inside flex */
}

.email-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.email-sender {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}

.email-time {
    flex: none;
    font-size: 0.75rem;
    color: #94a3b8;
}

.email-subject {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    color: #334155;
}

.email-snippet {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.unread-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--brand-600);
}

/* ─────────────────── Empty state radar ─────────────────── */

.radar {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
}

.radar-ring {
    position: absolute;
    inset: 0;
    border: 2px solid #6366f1;
    border-radius: 9999px;
    opacity: 0;
    animation: radar 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.radar-ring:nth-child(2) {
    animation-delay: 0.85s;
}

.radar-ring:nth-child(3) {
    animation-delay: 1.7s;
}

.radar-core {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: #eef2ff;
    color: var(--brand-600);
}

@keyframes radar {
    0% {
        transform: scale(0.5);
        opacity: 0.7;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* ─────────────────── Loading skeleton shimmer ─────────────────── */

.skeleton {
    border-radius: 0.375rem;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* ─────────────────── Live indicator pulse ─────────────────── */

.live-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #10b981;
    animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
    }
}

/* ───────────────────────── Modal ─────────────────────────
   Opacity + transform only → buttery 60fps open/close. */

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1rem;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal.is-open {
    visibility: visible;
    opacity: 1;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 42rem;
    max-height: 85vh;
    overflow: hidden;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35);
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    transition:
        transform 0.3s var(--ease-spring),
        opacity 0.22s ease;
    will-change: transform, opacity;
}

.modal.is-open .modal-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ─────────────────── QR share modal ─────────────────── */

/* Narrower, centered variant of the shared .modal-panel */
.qr-panel {
    max-width: 22rem;
}

/* Crisp high-contrast frame so phone cameras scan reliably */
.qr-box {
    display: grid;
    place-items: center;
    padding: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.qr-box img,
.qr-box canvas {
    display: block;
    border-radius: 0.375rem;
}

/* ─────────────────── Toast notifications ─────────────────── */

#toast-container {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: min(92vw, 22rem);
    pointer-events: none;
    /* clicks pass through container… */
}

.toast {
    pointer-events: auto;
    /* …but not through the toast itself */
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    overflow: hidden;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #0f172a;
    color: #f8fafc;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.45);
    opacity: 0;
    transform: translateX(120%);
    transition:
        transform 0.35s var(--ease-spring),
        opacity 0.3s ease;
    will-change: transform, opacity;
}

.toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.toast.is-leaving {
    opacity: 0;
    transform: translateX(120%);
}

.toast-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
}

.toast-icon svg {
    width: 0.9rem;
    height: 0.9rem;
}

.toast--success .toast-icon {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

.toast--info .toast-icon {
    background: rgba(99, 102, 241, 0.18);
    color: #818cf8;
}

.toast--error .toast-icon {
    background: rgba(244, 63, 94, 0.18);
    color: #fb7185;
}

.toast-msg {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
}

.toast-close {
    flex: none;
    padding: 0.25rem;
    border-radius: 0.375rem;
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.toast-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Auto-dismiss progress bar — transform-based (GPU) */
.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    transform-origin: left;
    background: linear-gradient(90deg, #818cf8, #34d399);
    animation: toast-progress var(--toast-duration) linear forwards;
}

@keyframes toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* ───────────────────────── FAQ accordion ───────────────────────── */

.faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
    border-color: #c7d2fe;
}

.faq-item[open] {
    border-color: #c7d2fe;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-chevron {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: #94a3b8;
    transition: transform 0.25s var(--ease-out);
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.925rem;
    line-height: 1.7;
    color: #475569;
}

/* ───────────────── Reduced motion (a11y) ───────────────── */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}