/* DeChePro UI Enhancements — Micro-interactions + Progress Visual */

/* 1. Fade-in khi page load */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp 0.4s ease both; }
.fade-up-1 { animation-delay: 0.05s; }
.fade-up-2 { animation-delay: 0.10s; }
.fade-up-3 { animation-delay: 0.15s; }

/* 2. Progress bar gradient + pulse khi đang học */
.progress-bar-wrap { height:6px; background:#1a2f4a; border-radius:3px; overflow:hidden; position:relative; }
.progress-bar-fill { height:100%; background:linear-gradient(90deg,#1C6FB8,#C99A4E); border-radius:3px; transition:width 0.8s cubic-bezier(.4,0,.2,1); }
.progress-bar-fill.active { position:relative; overflow:hidden; }
.progress-bar-fill.active::after { content:""; position:absolute; right:0; top:0; bottom:0; width:40px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25)); animation:shimmer 1.5s infinite; }
@keyframes shimmer { 0%{transform:translateX(-40px)} 100%{transform:translateX(40px)} }

/* 3. Button micro-bounce */
.btn-bounce { transition:transform 0.12s, box-shadow 0.12s; }
.btn-bounce:active { transform:scale(0.95); }
.btn-bounce:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(201,154,78,.25); }

/* 4. Card hover lift */
.card-lift { transition:transform 0.2s, box-shadow 0.2s; }
.card-lift:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.3); }

/* 5. Check-done animation */
@keyframes checkPop { 0%{transform:scale(0)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
.check-done { animation:checkPop 0.3s ease; color:#4a9e6b; }

/* 6. Lesson item trạng thái */
.lesson-item { border-left:3px solid transparent; padding:10px 14px; margin:4px 0; border-radius:6px; transition:all 0.2s; }
.lesson-item.done { border-left-color:#4a9e6b; background:rgba(74,158,107,.08); }
.lesson-item.active { border-left-color:#C99A4E; background:rgba(201,154,78,.08); }
.lesson-item.locked { opacity:0.5; cursor:not-allowed; }

/* 7. Scroll progress top bar */
#scroll-progress { position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,#1C6FB8,#C99A4E); width:0; z-index:9999; transition:width 0.1s; pointer-events:none; }

/* 8. Badge pop khi đạt milestone */
@keyframes badgePop { 0%{transform:scale(0) rotate(-10deg);opacity:0} 70%{transform:scale(1.15) rotate(3deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
.badge-pop { animation:badgePop 0.5s ease both; }

/* 9. Toast notification */
.toast-notify { position:fixed; bottom:72px; left:50%; transform:translateX(-50%); background:#0D1F33; color:#C99A4E; padding:10px 20px; border-radius:100px; font-size:13px; font-weight:600; z-index:99999; border:1px solid rgba(201,154,78,.3); box-shadow:0 4px 20px rgba(0,0,0,.4); }

/* 10. Skeleton loading */
@keyframes skeletonShimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton { background:linear-gradient(90deg,#1a2f4a 25%,#1e3a5f 50%,#1a2f4a 75%); background-size:200% 100%; animation:skeletonShimmer 1.5s infinite; border-radius:4px; }

/* ============================================================
   I3 ANIMATION — 2026-06-21
   1. Scroll Reveal (IntersectionObserver)
   2. Reading Progress Bar (sticky top)
   3. Pull-quote + Callout + .hl
   4. Chevron rotate (aria-expanded accordion)
   ============================================================ */

/* 1. Scroll Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.reveal.visible, .reveal.in, .reveal-clip.in { opacity: 1; transform: none; }
/* stagger con trong nhóm */
.reveal-group .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.07s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.14s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.21s; }
/* reduce-motion: tắt animation */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; opacity: 1; transform: none; }
}

/* 2. Reading Progress Bar — fixed top, 3px, z ăn trên cùng */
#readProg { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent, #1C6FB8); width: 0%; z-index: 9999; transition: width .1s linear; pointer-events: none; }

/* 3. Pull-quote / Callout / .hl */
.pull-quote { border-left: 4px solid var(--gold, #C99A4E); padding: 14px 20px; margin: 20px 0; font-size: 1.1em; font-style: italic; color: var(--ink, #0d1f33); background: rgba(201,154,78,.07); border-radius: 0 8px 8px 0; }
.callout { background: rgba(28,111,184,.08); border-left: 4px solid var(--accent, #1C6FB8); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0; font-size: .95em; }
.callout--warn { background: rgba(201,154,78,.08); border-left-color: var(--gold, #C99A4E); }
.callout--success { background: rgba(22,163,74,.07); border-left-color: #16a34a; }
.hl { background: rgba(201,154,78,.25); padding: 1px 3px; border-radius: 3px; }

/* 4. Chevron rotate — aria-expanded + .chevron class */
.chevron { transition: transform .25s ease; }
.acc-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* ============================================================
   I1 — AI TUTOR WIDGET (floating bubble + side panel + selection popup)
   2026-06-21
   ============================================================ */

/* Floating bubble button */
#tutor-bubble {
  position: fixed; bottom: 24px; right: 24px;
  width: 52px; height: 52px; border-radius: 50%;
  background: #0D1F33; color: #C99A4E;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.35);
  font-size: 22px; z-index: 1000;
  transition: transform .2s, box-shadow .2s;
  border: 2px solid rgba(201,154,78,.3);
  user-select: none;
}
#tutor-bubble:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(0,0,0,.4); }

/* Side panel overlay */
.tutor-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 95vw;
  background: #fff; z-index: 1100;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 32px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.tutor-panel.open { transform: translateX(0); }
@media (max-width: 600px) {
  .tutor-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%;
    height: 72vh; border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .tutor-panel.open { transform: translateY(0); }
  #tutor-bubble { bottom: 16px; right: 16px; }
}

/* Panel header */
.tutor-panel__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: #0D1F33; color: #fff;
  flex: 0 0 auto;
}
.tutor-panel__title { flex: 1; font-weight: 700; font-size: 15px; }
.tutor-panel__sub { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.tutor-panel__close {
  background: none; border: none; color: rgba(255,255,255,.7);
  cursor: pointer; padding: 6px; font-size: 20px; line-height: 1;
}
.tutor-panel__close:hover { color: #fff; }

/* Messages area */
.tutor-msgs {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.tutor-msg { max-width: 88%; line-height: 1.55; font-size: 14px; }
.tutor-msg.user {
  align-self: flex-end;
  background: #0D1F33; color: #fff;
  padding: 10px 14px; border-radius: 16px 16px 4px 16px;
}
.tutor-msg.ai {
  align-self: flex-start;
  background: #f3f4f6; color: #1a1a1a;
  padding: 10px 14px; border-radius: 16px 16px 16px 4px;
  white-space: pre-wrap;
}
.tutor-msg.ai.streaming::after {
  content: "▋"; animation: blink .7s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Input row */
.tutor-input-row {
  flex: 0 0 auto; padding: 12px 14px;
  border-top: 1px solid #e5e7eb;
  display: flex; gap: 8px; align-items: flex-end;
  background: #fff;
}
.tutor-input {
  flex: 1; border: 1px solid #d1d5db; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; resize: none;
  font-family: inherit; max-height: 100px; outline: none;
  transition: border-color .2s;
}
.tutor-input:focus { border-color: #1C6FB8; }
.tutor-send {
  background: #0D1F33; color: #C99A4E; border: none;
  border-radius: 10px; padding: 10px 16px; cursor: pointer;
  font-weight: 700; font-size: 14px; white-space: nowrap;
  transition: opacity .15s;
}
.tutor-send:disabled { opacity: .45; cursor: default; }

/* Backdrop (mobile) */
.tutor-backdrop {
  display: none; position: fixed; inset: 0; z-index: 1050;
  background: rgba(0,0,0,.35);
}
@media (max-width: 600px) { .tutor-backdrop { display: block; } }

/* Text-selection popup */
.tutor-sel-popup {
  position: fixed; z-index: 1200;
  background: #0D1F33; color: #C99A4E;
  padding: 7px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.3);
  white-space: nowrap;
  animation: fadeUp .2s ease both;
  border: 1px solid rgba(201,154,78,.4);
}
.tutor-sel-popup:hover { background: #162d47; }