/* ── Shooting Star Button — conic-gradient technique ── */

/* Wrapper: padding = độ dày viền nhìn thấy */
.starlight-btn-wrapper {
    position: relative;
    border-radius: 32px;
    padding: 2px;
    margin-top: 15px;
    overflow: hidden;
    /* Viền mỏng tĩnh: dark=trắng mờ, light=đen mờ */
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.4s ease;
}

html.light .starlight-btn-wrapper {
    background: rgba(0, 0, 0, 0.14);
}

/*
 * ::before = khối conic-gradient vuông, lớn hơn wrapper,
 * căn giữa bằng margin âm, quay liên tục.
 * overflow:hidden trên wrapper cắt chỉ còn viền 2px nhìn thấy.
 * Button z-index:1 đè lên phần bên trong → chỉ thấy gradient ở viền.
 */
.starlight-btn-wrapper::before {
    content: '';
    position: absolute;
    /* Vuông 600px, căn giữa wrapper qua margin âm */
    width:  600px;
    height: 600px;
    top:  50%;
    left: 50%;
    margin-top:  -300px;
    margin-left: -300px;
    /* Đuôi dài ~200° → đầu sáng; tail mờ dần */
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent               0deg,
        transparent             155deg,
        rgba(255,255,255,0.00)  170deg,
        rgba(255,255,255,0.04)  195deg,
        rgba(255,255,255,0.10)  218deg,
        rgba(255,255,255,0.22)  242deg,
        rgba(255,255,255,0.42)  264deg,
        rgba(255,255,255,0.68)  285deg,
        rgba(255,255,255,0.88)  302deg,
        #ffffff                 316deg,   /* đầu sao: sáng nhất */
        rgba(255,255,255,0.65)  326deg,
        rgba(255,255,255,0.22)  340deg,
        rgba(255,255,255,0.04)  352deg,
        transparent             360deg
    );
    animation: sl-spin 3s linear infinite;
    will-change: transform;
    pointer-events: none;
    opacity: 1;
    filter: blur(0px);
    transition: opacity 0.55s ease, filter 0.55s ease;
}

@keyframes sl-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Light mode: đổi comet thành màu tối */
html.light .starlight-btn-wrapper::before {
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent          0deg,
        transparent        155deg,
        rgba(0,0,0,0.00)   170deg,
        rgba(0,0,0,0.04)   195deg,
        rgba(0,0,0,0.10)   218deg,
        rgba(0,0,0,0.22)   242deg,
        rgba(0,0,0,0.42)   264deg,
        rgba(0,0,0,0.68)   285deg,
        rgba(0,0,0,0.88)   302deg,
        #000000            316deg,
        rgba(0,0,0,0.65)   326deg,
        rgba(0,0,0,0.22)   340deg,
        rgba(0,0,0,0.04)   352deg,
        transparent        360deg
    );
}

/* Button đè lên giữa — PHẢI solid hoàn toàn, không opacity */
.starlight-btn-wrapper > .btn-generate {
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
    transition: background 0.45s ease, color 0.45s ease,
                transform 0.2s ease, box-shadow 0.2s ease;
}

/* Dark mode: button đen tuyệt đối để chặn gradient */
html:not(.light) .starlight-btn-wrapper:not(.has-text) > .btn-generate {
    background: #08080e !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* ── has-text: tắt comet, về màu gốc ── */
.starlight-btn-wrapper.has-text {
    background: transparent !important;
}

.starlight-btn-wrapper.has-text::before {
    opacity: 0;
    filter: blur(8px);
    animation-play-state: paused;
}

html:not(.light) .starlight-btn-wrapper.has-text > .btn-generate {
    background: linear-gradient(135deg, #fff 0%, #e5e5e5 100%) !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(255,255,255,0.2) !important;
}