/*
 * Hubix Mini App — skeleton styles (task 1.4, spec §9.3).
 * Visual reference: legacy dashboard (dark #1E1B2E background, purple accents).
 * Tailwind (CDN) carries the layout; this file holds only what Tailwind
 * utilities do not express well: spinner, skeleton shimmer, nav blur.
 */

:root {
    --hubix-dark: #1E1B2E;
    --hubix-primary: #6D28D9;
    --hubix-accent: #7C3AED;
    --hubix-hint: #9CA3AF;
}

body {
    /* Hard-coded value rather than `var(--hubix-dark)`: this is the background of
       the whole app, so it must apply even when the variable is not resolved
       (load order, restricted engine, older WebView). A white flash for a fraction
       of a second already looks like a broken page, which is exactly what was
       reported. The variable stays available for the rest of this file. */
    background-color: #1E1B2E;
    color: #ffffff;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Loading state spinner (state 1). */
.loading-spinner {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid rgba(156, 163, 175, 0.35);
    border-right-color: var(--hubix-accent);
    border-radius: 50%;
    animation: hubix-spin 1s linear infinite;
}

@keyframes hubix-spin {
    to {
        transform: rotate(360deg);
    }
}

/*
 * Skeleton placeholder lines for Live Performance / BTC Analysis.
 * Intentionally content-free: §9.4-a forbids showing a default "0" or any
 * invented figure while real data is not loaded (tasks 1.5 / 1.6).
 */
.skeleton-line {
    height: 0.75rem;
    border-radius: 0.375rem;
    background: linear-gradient(
        90deg,
        rgba(109, 40, 217, 0.15) 25%,
        rgba(124, 58, 237, 0.30) 37%,
        rgba(109, 40, 217, 0.15) 63%
    );
    background-size: 400% 100%;
    animation: hubix-shimmer 1.4s ease-in-out infinite;
}

@keyframes hubix-shimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

.bottom-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Disabled controls (Deposit / Withdraw, inactive nav tabs): visible but inert
   until the matching flows land in Lot 2 / Lot 3. */
button[disabled] {
    opacity: 0.55;
    cursor: default;
}

/* Respect the platform reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner,
    .skeleton-line {
        animation: none;
    }
}

/* FAQ accordion (§9.7). Collapsing is done by toggling the `hidden` class in
   app.js, so no max-height animation is needed here — only readability rules. */
.faq-panel-header {
    cursor: pointer;
}

.faq-panel-body li {
    line-height: 1.5;
}

/* Fee table: the left column stays narrow so the "What you pay" text has room
   on a phone screen. */
.faq-fee-table {
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.faq-fee-table td:first-child {
    width: 40%;
    color: #ffffff;
}