/* =========================================================
   Bầu Trời Bình An — global styles
   ========================================================= */

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #050b14; /* Không gian tối */
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    touch-action: none; /* Chống cuộn trang trên mobile khi chạm giữ */
}

[hidden] { display: none !important; }

/* =========================================================
   Nền & bầu trời sao
   ========================================================= */

#ambient-glow {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    transition: background 1.2s ease;
    background: radial-gradient(circle at 50% 30%, rgba(129, 140, 248, 0.12), transparent 65%);
}
body[data-space="thich-ca"] #ambient-glow {
    background: radial-gradient(circle at 50% 30%, rgba(251, 191, 36, 0.14), transparent 65%);
}
body[data-space="quan-am"] #ambient-glow {
    background: radial-gradient(circle at 50% 30%, rgba(125, 211, 252, 0.14), transparent 65%);
}
body[data-space="di-lac"] #ambient-glow {
    background: radial-gradient(circle at 50% 30%, rgba(251, 146, 60, 0.14), transparent 65%);
}
body[data-space="universe"] #ambient-glow {
    background: radial-gradient(circle at 50% 30%, rgba(167, 139, 250, 0.14), transparent 65%);
}

/* Watermark tâm linh — ảnh thật, nằm trong thư mục ./images/<space>/ để dễ
   mở rộng (mỗi không gian có thể chứa nhiều ảnh, vd 1.png, 2.png, ... cho
   tính năng cycle trong tương lai). Rất mờ, đặt trên lớp glow. Khi
   #ambient-glow::before bắt đầu khớp selector body[data-space] (ngay khi
   người dùng chọn không gian), animation tự chạy: ảnh hiện dần thật chậm
   và mượt (0 -> 0.05 trong 3.5s) thay vì hiện đột ngột. */
#ambient-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85% auto;
    /* Ảnh cụ thể (1.png, 2.png, ...) được set động bởi JS (Visuals) qua biến
       CSS này, thay vì cố định theo từng data-space, để hỗ trợ tính năng
       cycle nhiều ảnh trong cùng một không gian. */
    background-image: var(--watermark-image, none);
    opacity: 0;
}
@media (min-width: 768px) {
    #ambient-glow::before {
        background-size: auto 75vh;
    }
}
body[data-space] #ambient-glow::before {
    animation: watermarkFadeIn 3.5s ease-in forwards;
}
@keyframes watermarkFadeIn {
    from { opacity: 0; }
    to { opacity: 0.05; }
}
body[data-space="thich-ca"] #ambient-glow::before,
body[data-space="quan-am"] #ambient-glow::before,
body[data-space="di-lac"] #ambient-glow::before {
    opacity: 0.05;
}

#star-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.star {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: twinkle 3s infinite ease-in-out;
}
@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 5px white; }
}

/* Logo cầu nguyện — hiệu ứng "thở" nhẹ nhàng trên splash screen */
.logo-breathe {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.15));
    animation: logoBreathe 4.5s infinite ease-in-out;
}
@keyframes logoBreathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.05); opacity: 1; }
}

/* Sao nguyện ước — lớn hơn, sáng vàng, có thể bấm */
.prayer-star {
    width: 7px;
    height: 7px;
    background: radial-gradient(circle at 35% 35%, #fffbe8, #ffd97a 60%, #ffb454 100%);
    border-radius: 50%;
    opacity: 1;
    cursor: pointer;
    box-shadow: 0 0 10px 3px rgba(255, 210, 120, 0.75);
    animation: twinkle 2.6s infinite ease-in-out;
    transition: transform 0.2s ease;
}
.prayer-star:hover {
    transform: scale(1.6);
}
.prayer-star.rising {
    animation: riseIn 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards, twinkle 2.6s 1.6s infinite ease-in-out;
}
@keyframes riseIn {
    0% { transform: translateY(115vh) scale(0.2); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.prayer-star.shooting {
    animation: shoot 0.9s ease-in forwards !important;
    box-shadow: 0 0 24px 8px rgba(255, 255, 255, 0.95);
    z-index: 5;
}
@keyframes shoot {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    15% { transform: translate(-8vw, 6vh) scale(1.3); opacity: 1; }
    100% { transform: translate(-70vw, 55vh) scale(0.1); opacity: 0; }
}

/* "Find My Prayer" — ghi đè hẳn màu vàng mặc định bằng cyan sáng kèm vòng
   radar lan ra, để nổi bật rõ giữa hàng trăm ngôi sao khác. Tự gỡ sau 9s
   (xem Settings.highlightPrayer trong app.js). */
.prayer-star.highlight-star {
    background: radial-gradient(circle at 35% 35%, #ffffff, #7dfcff 55%, #22d3ee 100%);
    box-shadow: 0 0 16px 5px rgba(34, 211, 238, 0.9);
    animation: highlightPulse 1.4s ease-in-out infinite;
    z-index: 6;
}
.prayer-star.highlight-star::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1.5px solid rgba(34, 211, 238, 0.6);
    animation: highlightRadar 1.4s ease-out infinite;
    pointer-events: none;
}
@keyframes highlightPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 16px 5px rgba(34, 211, 238, 0.9); }
    50% { transform: scale(1.5); box-shadow: 0 0 26px 10px rgba(34, 211, 238, 1); }
}
@keyframes highlightRadar {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* =========================================================
   Bọt nước xả phiền não (Worry Bubble)
   ========================================================= */

#ui-layer {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bubble-stage {
    position: relative;
    width: 80px;
    height: 80px;
}

#bubble {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    /* Soft translucent gradient */
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 60%, transparent 100%);
    /* White glow outside, BLACK inset shadow inside to kill the artifact */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transform: translateZ(0);
    will-change: transform, box-shadow;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.bubble-pulse {
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0px) translateZ(0); }
    50% { transform: translateY(-15px) translateZ(0); }
}

#instruction {
    margin-top: 40px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    text-align: center;
    letter-spacing: 1px;
    pointer-events: none;
    transition: opacity 0.5s;
}

/* Hạt sáng bay ra khi bong bóng tan biến (đầy 100%) */
.bubble-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    pointer-events: none;
    animation: particleDissolve 1.1s ease-out forwards;
}
@keyframes particleDissolve {
    0% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--dist)) scale(0); opacity: 0; }
}

/* Vòng gợn sóng lan ra khi tan biến */
.bubble-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
    animation: rippleOut 1.2s ease-out forwards;
}
@keyframes rippleOut {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3.2); opacity: 0; }
}

/* =========================================================
   Modal / overlay dùng chung
   ========================================================= */

.glass-panel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.overlay-fade {
    animation: fadeIn 0.35s ease forwards;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.panel-pop {
    animation: panelPop 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.2) forwards;
}
@keyframes panelPop {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cảnh báo tạm thời khi bỏ trống trường bắt buộc (Alias) */
.input-invalid {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.35) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.splash-option {
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.splash-option:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
}

#bottom-nav {
    background: linear-gradient(to top, rgba(5, 11, 20, 0.85), transparent);
}
.fab-btn {
    transition: transform 0.2s ease, background 0.2s ease;
}
.fab-btn:active {
    transform: scale(0.94);
}

/* =========================================================
   Settings Trigger + Drawer
   ========================================================= */

.settings-trigger-btn {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 30;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.25s ease, filter 0.25s ease, transform 0.2s ease;
}
.settings-trigger-btn:hover,
.settings-trigger-btn:focus-visible {
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
    transform: scale(1.08);
    outline: none;
}
.settings-trigger-btn:active {
    transform: scale(0.94);
}

/* =========================================================
   Zen Mode (Tọa Thiền)
   ========================================================= */

/* Standalone exit button, positioned exactly like #settings-trigger so it
   swaps in seamlessly. Deliberately subtle (low opacity, no glow) so it
   doesn't distract the meditator, but a clean white X on hover/focus. */
.zen-exit-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 30;
    width: 8px;
    height: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.28);
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    transition: color 0.25s ease, transform 0.2s ease;
}
.zen-exit-btn:hover,
.zen-exit-btn:focus-visible {
    color: rgba(255, 255, 255, 0.85);
    outline: none;
}
.zen-exit-btn:active {
    transform: scale(0.94);
}

.zen-option {
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.zen-option:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Off-canvas drawer: heavy glassmorphism so stars stay visible through it */
#settings-drawer {
    position: fixed;
    z-index: 40;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    overscroll-behavior: contain;
}
#settings-drawer.drawer-open {
    opacity: 1;
    pointer-events: auto;
}
.settings-drawer-inner {
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    height: 100%;
    overflow-y: auto;
}

/* Desktop: slides in from the right, doesn't cover the rest of the sky */
@media (min-width: 768px) {
    #settings-drawer {
        top: 0;
        right: 0;
        height: 100%;
        width: 300px;
        max-width: 85vw;
        border-top: none;
        border-bottom: none;
        border-right: none;
        transform: translateX(100%);
    }
    #settings-drawer.drawer-open {
        transform: translateX(0);
    }
}

/* Mobile: bottom sheet, easier to reach with a thumb */
@media (max-width: 767.98px) {
    #settings-drawer {
        left: 0;
        bottom: 0;
        width: 100%;
        max-height: 78vh;
        border-radius: 22px 22px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        transform: translateY(100%);
    }
    #settings-drawer.drawer-open {
        transform: translateY(0);
    }
}

.settings-close-btn {
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}
.settings-close-btn:hover {
    color: rgba(255, 255, 255, 0.95);
}

.settings-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    padding: 0.85rem 0.1rem;
}
.settings-item-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: color 0.2s ease;
}
.settings-item-toggle:hover {
    color: rgba(255, 255, 255, 0.95);
}
.settings-item-label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    margin: 0;
}
.settings-chevron {
    color: rgba(255, 255, 255, 0.35);
    transition: transform 0.25s ease;
}
.settings-item-toggle[aria-expanded="true"] .settings-chevron {
    transform: rotate(90deg);
}

.settings-subpanel {
    padding: 0 0.1rem 1rem;
    animation: fadeIn 0.25s ease forwards;
}

.settings-subpanel-btn {
    margin-top: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.settings-subpanel-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}
.settings-subpanel-btn:active {
    transform: scale(0.97);
}

.settings-pill {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.settings-pill:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.settings-pill.active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* =========================================================
   Search Suggestions
   ========================================================= */
#find-prayer-suggestions::-webkit-scrollbar {
    width: 4px;
}
#find-prayer-suggestions::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}
.suggestion-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}
.suggestion-item:last-child {
    border-bottom: none;
}
.suggestion-item:hover {
    background: rgba(255, 255, 255, 0.15);
}
.suggestion-alias {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.15rem;
}
.suggestion-text {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.suggestion-empty {
    padding: 0.75rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-style: italic;
}