/* Dynamic Island header — CSS-driven layout (no JS width pinning) */
:root {
    --island-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --island-spring-soft: cubic-bezier(0.33, 1, 0.68, 1);
    --island-duration: 0.62s;
    --island-max-w: min(920px, calc(100vw - 24px));
}

/* ── Base shell ── */
.header.dynamic-island {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: 1000;
    margin-inline: auto;
    width: fit-content;
    max-width: var(--island-max-w);
    border-radius: 999px;
    background-color: #000;
    background: #000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
    overflow: hidden;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.14),
        0 2px 8px rgba(0, 0, 0, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.65);
    transform-origin: center top;
    transition:
        box-shadow var(--island-duration) ease,
        width var(--island-duration) var(--island-spring),
        max-width var(--island-duration) var(--island-spring);
    animation: islandDropIn 0.78s var(--island-spring-soft) both;
}

.header.dynamic-island.is-morphing {
    will-change: width, max-width;
}

.header.dynamic-island:not(.is-compact) {
    width: var(--island-max-w);
}

.header.dynamic-island.is-compact {
    cursor: pointer;
}

.header.dynamic-island.is-compact.is-open,
.header.dynamic-island.is-compact.is-morphing {
    cursor: default;
}

.header.dynamic-island::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #000;
    z-index: -1;
    pointer-events: none;
}

.header.dynamic-island::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
    pointer-events: none;
}

@keyframes islandDropIn {
    from { transform: translateY(-110%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ── Grid: both rows share one cell, only one visible ── */
.header.dynamic-island .header-container {
    display: grid;
    grid-template: 1fr / 1fr;
    align-items: center;
    margin: 0;
    padding: 10px 14px 10px 16px;
    gap: 12px;
    transition:
        padding var(--island-duration) var(--island-spring),
        gap var(--island-duration) var(--island-spring);
}

.header.dynamic-island.is-compact:not(.is-open) .header-container {
    padding: 10px 22px;
    gap: 0;
}

.header.dynamic-island.is-compact.is-open .header-container {
    padding: 10px 12px;
    gap: 8px;
}

.header.dynamic-island .island-compact-row,
.header.dynamic-island .island-expanded-row {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    transition:
        opacity var(--island-duration) var(--island-spring-soft),
        transform var(--island-duration) var(--island-spring-soft),
        max-width var(--island-duration) var(--island-spring),
        visibility 0s linear var(--island-duration);
}

.header.dynamic-island.is-compact:not(.is-open) .island-compact-row,
.header.dynamic-island:not(.is-compact) .island-expanded-row,
.header.dynamic-island.is-compact.is-open .island-expanded-row {
    visibility: visible;
    transition-delay: 0s;
}

.header.dynamic-island.is-compact.is-open .island-expanded-row {
    transition-delay: 0.06s;
}

/* Compact row */
.header.dynamic-island .island-compact-row {
    justify-content: center;
    gap: 10px;
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.94) translateY(2px);
}

.header.dynamic-island.is-compact:not(.is-open) .island-compact-row {
    max-width: 320px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

/* Expanded row */
.header.dynamic-island .island-expanded-row {
    justify-content: space-between;
    gap: 12px;
    max-width: 320px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.header.dynamic-island:not(.is-compact) .island-expanded-row,
.header.dynamic-island.is-compact.is-open .island-expanded-row {
    max-width: var(--island-max-w);
}

.header.dynamic-island.is-compact:not(.is-open) .island-expanded-row {
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.96) translateY(-2px);
}

.header.dynamic-island:not(.is-compact) .island-compact-row {
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.94) translateY(2px);
}

/* ── Logo / compact label ── */
.header.dynamic-island .logo-section,
.header.dynamic-island .logo {
    flex-shrink: 0;
}

.header.dynamic-island .logo-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.header.dynamic-island .island-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #30d158;
    box-shadow: 0 0 8px rgba(48, 209, 88, 0.7);
    flex-shrink: 0;
    animation: islandPulse 2s ease-in-out infinite;
}

@keyframes islandPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.header.dynamic-island .island-page-label {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

/* ── Nav ── */
.header.dynamic-island .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.header.dynamic-island .nav-links .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.65) !important;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}

.header.dynamic-island .nav-links .nav-link span {
    white-space: nowrap;
}

.header.dynamic-island .nav-link-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.75;
}

.header.dynamic-island .nav-links .nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16);
}

.header.dynamic-island .nav-link::before {
    display: none;
}

/* ── Header right ── */
.header.dynamic-island .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header.dynamic-island .download-header-btn,
.header.dynamic-island .login-header-btn,
.header.dynamic-island .topup-btn,
.header.dynamic-island .logout-header-btn {
    border-radius: 999px;
    flex-shrink: 0;
}

.header.dynamic-island .download-header-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 12px;
    font-size: 13px;
    max-width: 160px;
    min-width: 0;
}

.header.dynamic-island .download-header-btn .header-auth-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.header.dynamic-island .download-header-btn .header-auth-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.header.dynamic-island .user-balance {
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.header.dynamic-island .nav-links .nav-link::after {
    display: none;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .header.dynamic-island {
        background-color: #000;
        background: #000;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        top: max(14px, env(safe-area-inset-top, 0px));
    }

    .header.dynamic-island .header-container {
        padding: 12px 16px 12px 18px;
        gap: 10px;
    }

    .header.dynamic-island.is-compact:not(.is-open) .header-container {
        padding: 12px 24px;
    }

    .header.dynamic-island.is-compact.is-open .header-container {
        padding: 12px 14px;
        gap: 10px;
    }

    /* Mobile: pill wraps content — never full viewport width */
    .header.dynamic-island,
    .header.dynamic-island:not(.is-compact),
    .header.dynamic-island.is-compact,
    .header.dynamic-island.is-compact.is-open {
        width: fit-content;
        max-width: calc(100vw - 20px);
    }

    .header.dynamic-island .logo-text {
        display: none;
    }

    .header.dynamic-island .logo-icon {
        width: 30px;
        height: 30px;
    }

    .header.dynamic-island .island-pulse {
        width: 8px;
        height: 8px;
    }

    .header.dynamic-island .island-page-label {
        font-size: 15px;
    }

    .header.dynamic-island .island-compact-row {
        gap: 12px;
    }

    .header.dynamic-island.is-compact:not(.is-open) .island-compact-row {
        max-width: 360px;
    }

    .header.dynamic-island .island-expanded-row {
        flex-wrap: nowrap;
        gap: 8px;
        max-width: calc(100vw - 36px);
    }

    .header.dynamic-island .nav-links {
        flex: 0 1 auto;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
    }

    .header.dynamic-island .nav-links::-webkit-scrollbar {
        display: none;
    }

    .header.dynamic-island .nav-links .nav-link {
        padding: 9px 12px;
        font-size: 13px;
    }

    .header.dynamic-island .nav-links .nav-link span {
        display: none;
    }

    .header.dynamic-island .nav-link-icon {
        width: 18px;
        height: 18px;
    }

    .header.dynamic-island .header-right {
        gap: 8px;
    }

    .header.dynamic-island .user-balance {
        padding: 9px 12px;
        font-size: 13px;
    }

    .header.dynamic-island .user-balance .balance-label {
        display: none;
    }

    .header.dynamic-island .topup-btn,
    .header.dynamic-island .login-header-btn {
        padding: 10px 12px;
        font-size: 0;
    }

    .header.dynamic-island .topup-btn svg,
    .header.dynamic-island .login-header-btn svg {
        width: 19px;
        height: 19px;
    }

    .header.dynamic-island .download-header-btn {
        padding: 6px;
        max-width: none;
    }

    .header.dynamic-island .download-header-btn .header-auth-name {
        display: none;
    }

    .header.dynamic-island .download-header-btn .header-auth-avatar {
        width: 32px;
        height: 32px;
        margin-right: 0;
    }

    body:has(.header.dynamic-island) {
        padding-top: 88px !important;
    }

    .header.dynamic-island ~ .main-content,
    .header.dynamic-island + .main-content {
        padding-top: 18px !important;
    }
}

/* ── Desktop hover expand (compact only) ── */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
    .header.dynamic-island.is-compact.is-open {
        width: var(--island-max-w);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header.dynamic-island,
    .header.dynamic-island.is-morphing,
    .header.dynamic-island .header-container,
    .header.dynamic-island .island-compact-row,
    .header.dynamic-island .island-expanded-row {
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}