/* ========================================================================
   TRỢ LÝ AI HƯỚNG DẪN SỬ DỤNG AICAKE — khung chat nổi + "chỉ chỗ cần bấm"
   ------------------------------------------------------------------------
   Markup: Views/Shared/_Layout.cshtml (hiện ở MỌI trang khi đã đăng nhập)
   JS:     wwwroot/js/userguide-ai-chat.js  (khung chat)
           wwwroot/js/userguide-ai-tour.js  (đi tới menu + mũi tên chỉ phần cần click)
   ======================================================================== */

.ugai-widget {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9990;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* --- Nút nổi --- */
.ugai-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ugai-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(37, 99, 235, 0.42); }
.ugai-fab i { font-size: 1.05rem; }

.ugai-widget.is-open .ugai-fab { display: none; }

/* --- Panel chat --- */
.ugai-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 400px;
    max-width: calc(100vw - 32px);
    height: 620px;
    max-height: calc(100vh - 48px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    animation: ugai-pop 0.18s ease-out;
}

.ugai-panel[hidden] { display: none; }

@keyframes ugai-pop {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ugai-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
}

.ugai-header-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1.05rem;
}

.ugai-header-info { flex: 1; min-width: 0; }
.ugai-header-title { font-size: 0.98rem; font-weight: 700; line-height: 1.2; }
.ugai-header-sub { font-size: 0.76rem; opacity: 0.9; display: flex; align-items: center; gap: 0.35rem; }

.ugai-header-sub .ugai-live {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}

.ugai-header-btn {
    border: 0;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ugai-header-btn:hover { background: rgba(255, 255, 255, 0.3); }

/* --- Kéo khung chat bằng header --- */
.ugai-header { cursor: grab; touch-action: none; user-select: none; }
.ugai-header .ugai-header-btn { cursor: pointer; }

.ugai-panel.ugai-dragging {
    transition: none;
    animation: none;   /* tránh transform còn dư của animation mở panel làm lệch khi kéo */
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.3);
}

.ugai-panel.ugai-dragging .ugai-header { cursor: grabbing; }

body.ugai-dragging-body { user-select: none; }
body.ugai-dragging-body .ugai-input { pointer-events: none; }

/* Panel đã bị kéo: bỏ giới hạn chiều cao theo góc dưới, cho kéo sát mép trên */
.ugai-panel[style*="position: fixed"] { max-height: calc(100vh - 16px); }

/* --- Vùng tin nhắn --- */
.ugai-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0.9rem;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ugai-msg { display: flex; gap: 0.5rem; align-items: flex-start; }
.ugai-msg.ugai-user { flex-direction: row-reverse; }

.ugai-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    background: #dbeafe;
    color: #2563eb;
}

.ugai-msg.ugai-user .ugai-avatar { background: #e2e8f0; color: #475569; }

.ugai-bubble {
    max-width: 82%;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 0.9rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.ugai-msg.ugai-user .ugai-bubble {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.ugai-msg.ugai-error .ugai-bubble {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.ugai-bubble p { margin: 0 0 0.45rem; }
.ugai-bubble p:last-child { margin-bottom: 0; }
.ugai-bubble ul.ugai-list { margin: 0 0 0.45rem; padding-left: 1.1rem; }
.ugai-bubble ul.ugai-list:last-child { margin-bottom: 0; }
.ugai-bubble li { margin-bottom: 0.2rem; }
.ugai-bubble b { font-weight: 700; }

.ugai-hint {
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: #eff6ff;
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.45;
}

.ugai-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.15rem 0;
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed #2563eb;
}

.ugai-link:hover { color: #1d4ed8; }

/* Nút "Mở đúng chỗ này" — AI chỉ tới menu/mục cần thao tác */
.ugai-tour-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.35rem 0 0.15rem;
    padding: 0.5rem 0.8rem;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
}

.ugai-tour-btn:hover { filter: brightness(1.06); }

/* Ảnh minh hoạ các bước (render từ token [[IMG:key]]) */
.ugai-bubble.ugai-wide { max-width: 100%; }

.ugai-figure { margin: 0.5rem 0; }
.ugai-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    background: #fff;
    cursor: zoom-in;
}

.ugai-figure figcaption {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: #475569;
    text-align: center;
}

/* Overlay xem ảnh minh hoạ lớn */
.ugai-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
    animation: ugai-pop 0.15s ease-out;
}

.ugai-lightbox-inner { max-width: 96vw; max-height: 96vh; text-align: center; }
.ugai-lightbox-inner img {
    max-width: 96vw;
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    background: #fff;
}
.ugai-lightbox-caption { margin-top: 10px; color: #e2e8f0; font-size: 0.85rem; }

/* Hiệu ứng "AI đang trả lời" */
.ugai-typing .ugai-bubble { display: flex; gap: 4px; align-items: center; padding: 0.75rem; }
.ugai-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #94a3b8;
    animation: ugai-blink 1.2s infinite ease-in-out;
}
.ugai-dot:nth-child(2) { animation-delay: 0.18s; }
.ugai-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes ugai-blink {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

/* --- Gợi ý câu hỏi nhanh --- */
.ugai-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}

.ugai-suggest[hidden] { display: none; }

.ugai-chip {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ugai-chip:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}

/* --- Ô nhập --- */
.ugai-footer {
    padding: 0.7rem 0.9rem 0.55rem;
    background: #fff;
}

.ugai-form { display: flex; gap: 0.5rem; align-items: flex-end; }

.ugai-input {
    flex: 1;
    resize: none;
    min-height: 42px;
    max-height: 120px;
    padding: 0.6rem 0.7rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
}

.ugai-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }

.ugai-send {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ugai-send:hover:not(:disabled) { background: #1d4ed8; }
.ugai-send:disabled { opacity: 0.55; cursor: not-allowed; }

.ugai-note {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: #94a3b8;
    text-align: center;
}

/* ========================================================================
   "CHỈ CHỖ CẦN BẤM" — vòng sáng + mũi tên + bong bóng gợi ý
   ======================================================================== */
.ugai-tour-ring {
    position: fixed;
    z-index: 9997;
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 0 0 3px #ef4444, 0 0 0 9px rgba(239, 68, 68, 0.18), 0 0 22px 6px rgba(239, 68, 68, 0.45);
    animation: ugai-pulse 1.4s infinite ease-in-out;
    transition: all 0.15s ease-out;
}

@keyframes ugai-pulse {
    0%, 100% { box-shadow: 0 0 0 3px #ef4444, 0 0 0 9px rgba(239, 68, 68, 0.18), 0 0 22px 6px rgba(239, 68, 68, 0.45); }
    50%      { box-shadow: 0 0 0 3px #ef4444, 0 0 0 14px rgba(239, 68, 68, 0.10), 0 0 30px 10px rgba(239, 68, 68, 0.55); }
}

.ugai-tour-arrow {
    position: fixed;
    z-index: 9998;
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 20px solid #ef4444;
    pointer-events: none;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3));
    animation: ugai-bounce 1s infinite ease-in-out;
}

.ugai-tour-arrow.up {
    border-top: 0;
    border-bottom: 20px solid #ef4444;
    animation-name: ugai-bounce-up;
}

@keyframes ugai-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(7px); }
}

@keyframes ugai-bounce-up {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

.ugai-tour-tip {
    position: fixed;
    z-index: 9999;
    max-width: 300px;
    background: #0f172a;
    color: #fff;
    border-radius: 10px;
    padding: 0.6rem 0.75rem 0.7rem;
    font-size: 0.83rem;
    line-height: 1.45;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.ugai-tour-tip-title { font-weight: 700; margin-bottom: 0.15rem; padding-right: 1.2rem; }
.ugai-tour-tip-close {
    position: absolute;
    top: 4px;
    right: 6px;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    font-size: 0.9rem;
    cursor: pointer;
    line-height: 1;
}

.ugai-tour-tip-close:hover { color: #fff; }

/* Thông báo nhỏ (không tìm thấy mục cần chỉ...) */
.ugai-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 10001;
    background: #0f172a;
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
    animation: ugai-pop 0.18s ease-out;
}

/* --- Nút CTA ở trang Hướng dẫn --- */
.ugai-cta-wrap {
    margin: 1.1rem 0 1.4rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    border: 1px solid #dbeafe;
}

.ugai-cta-hint {
    margin-top: 0.55rem;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
}

.ugai-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1.3rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.3);
    transition: transform 0.2s ease;
}

.ugai-cta:hover { transform: translateY(-2px); color: #fff; }

/* ========================================================================
   ICON SVG INLINE — khung chat tự chứa icon, không phụ thuộc Font Awesome
   (nhiều trang của aicake không nạp FA nên icon bị mất khi rời trang Hướng dẫn).
   Chặn luôn CSS toàn cục của trang khác làm biến dạng icon.
   ======================================================================== */
.ugai-widget svg {
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
    max-width: none;
    max-height: none;
}

.ugai-fab svg,
.ugai-header-icon svg,
.ugai-header-btn svg,
.ugai-send svg,
.ugai-avatar svg,
.ugai-tour-btn svg {
    display: block;
}

/* Thanh điều khiển khi hướng dẫn NHIỀU BƯỚC: "Bước 2/5 · <tên bước> · Tiếp tục · Kết thúc" */
.ugai-tour-bar {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: min(720px, calc(100vw - 24px));
    padding: 0.5rem 0.6rem 0.5rem 0.85rem;
    background: #0f172a;
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    font-size: 0.85rem;
    animation: ugai-pop 0.18s ease-out;
}

.ugai-tour-bar[hidden] { display: none; }

.ugai-tour-bar-count {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 0.78rem;
    background: rgba(255, 255, 255, 0.16);
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.ugai-tour-bar-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ugai-tour-bar-next {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 0.42rem 0.85rem;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.ugai-tour-bar-stop {
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.42rem 0.7rem;
    background: transparent;
    color: #e2e8f0;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.ugai-tour-bar-stop:hover { background: rgba(255, 255, 255, 0.12); }

@media (max-width: 640px) {
    .ugai-tour-bar {
        left: 8px;
        right: 8px;
        bottom: 8px;
        transform: none;
        border-radius: 12px;
        flex-wrap: wrap;
    }
    .ugai-tour-bar-label { white-space: normal; }
}

/* --- Mobile --- */
@media (max-width: 640px) {
    .ugai-widget { right: 14px; bottom: 14px; }
    .ugai-panel {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        top: 8px;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
    }
    .ugai-fab .ugai-fab-text { display: none; }
    .ugai-fab { padding: 0.9rem; }
    .ugai-bubble { max-width: 88%; }
}