/* /css/core/tutorialManager.css */
/* [PHIÊN BẢN 3.0 - NÂNG CẤP UX/UI TOÀN DIỆN] */

:root {
    /* Hàm gia tốc (Easing) tạo cảm giác nhanh và mượt (EaseOutExpo) */
    --tutorial-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --tutorial-duration: 0.5s;
    --color-tutorial-accent: var(--color-primary-cyan, #00E5FF);
}

.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.85);
    pointer-events: auto; /* Chặn tương tác bên dưới */
    transition: background-color 0.4s ease-in-out;
}

/* Trạng thái khi đang highlight (Spotlight mode) */
.tutorial-overlay.is-highlighting {
    background: transparent;
}

/* Hiệu ứng pulsating (nhấp nháy) cho vùng sáng */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.85), 
                    0 0 15px 5px rgba(0, 229, 255, 0.6);
    }
    50% {
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.85), 
                    0 0 30px 15px rgba(0, 229, 255, 0.9);
    }
}

.tutorial-highlight {
    position: absolute;
    border-radius: 8px;
    /* Áp dụng animation */
    animation: pulseGlow 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    
    /* Transition cho việc di chuyển (KHÔNG transition box-shadow để tránh xung đột với animation) */
    transition: width var(--tutorial-duration) var(--tutorial-easing),
                height var(--tutorial-duration) var(--tutorial-easing),
                left var(--tutorial-duration) var(--tutorial-easing),
                top var(--tutorial-duration) var(--tutorial-easing);
    
    pointer-events: none;
}

.tutorial-highlight.is-hidden {
    animation: none;
    box-shadow: none;
}

/* --- TEXTBOX & CARET --- */

.tutorial-textbox {
    position: absolute;
    width: 90%;
    max-width: 400px; /* Giảm nhẹ chiều rộng để dễ định vị hơn */
    background: var(--color-bg-panel);
    border: 1px solid var(--color-tutorial-accent);
    border-radius: 8px;
    padding: 1.5rem;
    z-index: 9999;
    color: var(--color-text-primary);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 229, 255, 0.3);
    
    pointer-events: auto;
    max-height: 70vh;
    overflow-y: auto;

    /* Transition cho việc di chuyển vị trí và hiệu ứng Pop-in */
    transition: top var(--tutorial-duration) var(--tutorial-easing),
                left var(--tutorial-duration) var(--tutorial-easing),
                opacity 0.3s ease-out,
                transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy easing for Pop-in */

    /* [KỸ THUẬT NÂNG CAO] Sử dụng CSS Variables để kết hợp JS positioning và CSS animation */
    /* --tx và --ty sẽ được JS điều khiển, scale dùng cho animation */
    opacity: 0;
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.9);
}

/* Class này kích hoạt animation entry */
.tutorial-textbox.is-visible {
    opacity: 1;
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(1);
}


/* Caret (Mũi tên chỉ dẫn) - Tạo hình bằng cách xoay 1 hình vuông 45 độ */
.tutorial-caret {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color-bg-panel);
    /* [SỬA] Không có viền mặc định. Viền sẽ được thêm bởi kỹ thuật Masking */
    z-index: 9998; /* Nằm dưới textbox nhưng trên highlight */
    transform: rotate(45deg);
    /* Transition đồng bộ với textbox */
    transition: top var(--tutorial-duration) var(--tutorial-easing),
                left var(--tutorial-duration) var(--tutorial-easing);
    pointer-events: none;
}

/* Kỹ thuật "Masking" Nâng cao: Chỉ hiện viền ở các cạnh hướng ra ngoài để tạo cảm giác liền mạch với Textbox */

/* Textbox ở trên, caret hướng xuống */
.tutorial-overlay[data-position="top"] .tutorial-caret {
    border-top: 1px solid var(--color-tutorial-accent);
    border-right: 1px solid var(--color-tutorial-accent);
}

/* Textbox ở dưới, caret hướng lên */
.tutorial-overlay[data-position="bottom"] .tutorial-caret {
    border-bottom: 1px solid var(--color-tutorial-accent);
    border-left: 1px solid var(--color-tutorial-accent);
}

/* Textbox ở bên trái, caret hướng phải */
.tutorial-overlay[data-position="left"] .tutorial-caret {
    border-top: 1px solid var(--color-tutorial-accent);
    border-left: 1px solid var(--color-tutorial-accent);
}

/* Textbox ở bên phải, caret hướng trái */
.tutorial-overlay[data-position="right"] .tutorial-caret {
     border-bottom: 1px solid var(--color-tutorial-accent);
     border-right: 1px solid var(--color-tutorial-accent);
}

/* --- STYLING BÊN TRONG TEXTBOX --- */
.tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.tutorial-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-tutorial-accent);
}

.tutorial-step-counter {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-family: monospace;
}

.tutorial-content {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: var(--color-text-secondary);
}

.tutorial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tutorial-skip-btn {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.5rem;
}
.tutorial-skip-btn:hover {
    color: var(--color-accent-red);
    text-decoration: underline;
}