/**
 * ar_wayfinding_style.css
 * ------------------------------------------------------------
 * Giao diện cho tính năng CHỈ DẪN ĐƯỜNG ĐI trong thư viện.
 * Phong cách: HUD công nghệ TRONG SUỐT (nhìn xuyên thấu được cảnh phía sau
 * qua camera), viền phát sáng, vòng tròn quét quanh mũi tên, vệt quét ánh
 * sáng chạy dọc, lưới caro mờ - không dùng nền đen/nền đặc.
 */

#ar-wf-overlay {
  position: fixed !important; inset: 0 !important; z-index: 888888 !important;
  display: none; align-items: center; justify-content: center;
  /* CHỈ tối rất nhẹ để chữ dễ đọc, KHÔNG che cảnh phía sau */
  background: rgba(0, 6, 16, 0.06) !important;
  padding: 16px; padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  pointer-events: none; /* overlay nền không chặn thao tác, chỉ card mới nhận chạm */

  /* Biến màu mặc định (theme ghi đè lại) - mặc định XANH DƯƠNG NGẢ TRẮNG
     theo đúng tông ảnh tham chiếu */
  --wf-accent: #4FC3FF;
  --wf-accent-rgb: 79, 195, 255;
  --wf-accent2: #FFFFFF;
}

#ar-wf-card {
  position: relative;
  pointer-events: auto;
  width: min(420px, 92vw);
  max-height: 90vh; overflow-y: auto; overflow-x: hidden;
  border-radius: 16px; border: 1px solid rgba(var(--wf-accent-rgb), 0.6);
  /* Kính trong suốt thật sự: chỉ có 1 lớp phủ rất nhẹ để chữ đọc được,
     KHÔNG có nền đen/gradient đặc phía sau */
  background: rgba(4, 12, 24, 0.16);
  /* Đã bỏ backdrop-filter blur ở đây - nó làm mờ luôn CẢNH THỰC phía sau panel,
     không phải chỉ mờ panel. Giữ độ trong suốt cao, chỉ dựa vào 1 lớp phủ màu
     rất nhẹ + viền phát sáng để chữ vẫn đọc được. */
  box-shadow: 0 0 26px rgba(var(--wf-accent-rgb), 0.35), inset 0 0 22px rgba(var(--wf-accent-rgb), 0.05);
  color: #fff; box-sizing: border-box; padding: 22px 18px 18px;
  animation: wf-appear 0.3s ease-out forwards;
}
@keyframes wf-appear {
  from { transform: scale(0.9) translateY(14px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Lưới caro mờ - hiệu ứng công nghệ tự làm bằng CSS, rất mờ để vẫn nhìn xuyên thấu */
#ar-wf-card .wf-grid-layer {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(var(--wf-accent-rgb), 0.07) 0px, rgba(var(--wf-accent-rgb), 0.07) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(var(--wf-accent-rgb), 0.07) 0px, rgba(var(--wf-accent-rgb), 0.07) 1px, transparent 1px, transparent 24px);
}
/* Vệt quét ánh sáng chạy dọc từ trên xuống - lặp lại liên tục, gợi cảm giác "đang xử lý dữ liệu" */
#ar-wf-card .wf-scan-sweep {
  position: absolute; left: 0; right: 0; height: 40%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--wf-accent-rgb), 0.16) 50%, transparent 100%);
  animation: wf-sweep 3.2s ease-in-out infinite;
}
@keyframes wf-sweep {
  0%   { top: -40%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Video hiệu ứng công nghệ tuỳ chọn (chèn qua JS nếu có window.AR_CONFIG.chiDanEffectVideo).
   Dùng mix-blend-mode: screen để phần nền đen trong video tự "biến mất", chỉ còn
   lại các đường sáng/hiệu ứng chớp - không cần video có kênh alpha. */
#ar-wf-card .wf-effect-video {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: screen; opacity: 0.55;
}

/* Mọi nội dung thật (chữ, nút, mũi tên) nằm trên các lớp hiệu ứng */
#ar-wf-point-name, #ar-wf-guide, #ar-wf-dest-list { position: relative; z-index: 1; }

/* Góc "ngắm" kiểu HUD sci-fi ở 2 góc đối xứng của thẻ */
#ar-wf-card > .wf-corner-tl, #ar-wf-card > .wf-corner-br { display: none; } /* dự phòng nếu thêm DOM sau này */
#ar-wf-card::before, #ar-wf-card::after {
  content: ''; position: absolute; width: 20px; height: 20px; pointer-events: none; z-index: 2;
  border: 2px solid var(--wf-accent); filter: drop-shadow(0 0 4px var(--wf-accent));
}
#ar-wf-card::before { top: 8px; left: 8px; border-right: none; border-bottom: none; border-top-left-radius: 8px; }
#ar-wf-card::after { bottom: 8px; right: 8px; border-left: none; border-top: none; border-bottom-right-radius: 8px; }

#ar-wf-point-name {
  font-size: 11px; color: var(--wf-accent); letter-spacing: 1.5px; text-transform: uppercase;
  text-align: center; font-weight: bold; text-shadow: 0 0 8px rgba(var(--wf-accent-rgb), 0.7), 0 1px 3px rgba(0,0,0,0.8);
  border-bottom: 1px dashed rgba(var(--wf-accent-rgb), 0.4); padding-bottom: 10px; margin-bottom: 12px;
}

/* ---- Danh sách điểm đến: vòng tròn xoay + chớp chớp nhẹ + hạt sáng công nghệ ---- */
#ar-wf-dest-list { position: relative; }
.hud-chip-grid {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  padding: 10px 4px;
}
.hud-particle-field { position: absolute; inset: -10px; pointer-events: none; z-index: 0; }
.hud-particle-field span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--wf-accent); box-shadow: 0 0 6px rgba(var(--wf-accent-rgb), 0.9);
  animation-name: hud-particle-float; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  opacity: 0;
}
@keyframes hud-particle-float {
  0% { opacity: 0; transform: translateY(6px); }
  15% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-10px); }
}

.hud-chip {
  position: relative; z-index: 1;
  width: 92px; height: 92px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; padding: 8px; box-sizing: border-box;
  background: rgba(var(--wf-accent-rgb), 0.1);
  border: 1px solid rgba(var(--wf-accent-rgb), 0.55);
  backdrop-filter: blur(2px);
  animation: hud-chip-flicker 3.6s ease-in-out infinite;
}
.hud-chip:active { background: rgba(var(--wf-accent-rgb), 0.26); }
.hud-chip::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px dashed rgba(var(--wf-accent-rgb), 0.5);
  animation: wf-ring-spin 7s linear infinite;
}
.hud-chip-name {
  font-size: 10.5px; font-weight: 700; line-height: 1.25; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hud-chip-dist {
  font-size: 9.5px; font-family: monospace; color: var(--wf-accent); margin-top: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
@keyframes hud-chip-flicker {
  0%, 100% { opacity: 1; }
  46% { opacity: 1; }
  49% { opacity: 0.5; }
  52% { opacity: 1; }
  74% { opacity: 1; }
  76% { opacity: 0.65; }
  79% { opacity: 1; }
}

/* ---- Danh sách dạng dòng chữ nhật (tên đích đến có thể dài, dễ đọc hơn hình tròn) ---- */
.hud-row-list { display: flex; flex-direction: column; gap: 8px; }
.hud-row {
  position: relative; z-index: 1;
  padding: 12px 16px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(var(--wf-accent-rgb), 0.1); border: 1px solid rgba(var(--wf-accent-rgb), 0.55);
  animation: hud-chip-flicker 3.6s ease-in-out infinite;
}
.hud-row:active { background: rgba(var(--wf-accent-rgb), 0.26); }
.hud-row-name {
  font-size: 13px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.hud-row-dist {
  font-size: 11px; font-family: monospace; color: var(--wf-accent); white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

/* ---- Khung chỉ dẫn hướng đi (mũi tên lớn trong vòng tròn HUD) ---- */
#ar-wf-guide { display: none; text-align: center; }

.wf-arrow-stage {
  position: relative; width: 168px; height: 168px; margin: 4px auto 10px;
}
/* Vòng ngoài - đường chấm xoay chậm, giống radar quét */
.wf-arrow-stage::before {
  content: ''; position: absolute; inset: 2px; border-radius: 50%;
  border: 1.5px dashed rgba(var(--wf-accent-rgb), 0.6);
  animation: wf-ring-spin 9s linear infinite;
}
/* Vòng trong - nét liền mờ hơn, xoay ngược chiều chậm hơn nữa */
.wf-arrow-stage::after {
  content: ''; position: absolute; inset: 20px; border-radius: 50%;
  border: 1px solid rgba(var(--wf-accent-rgb), 0.35);
  box-shadow: 0 0 18px rgba(var(--wf-accent-rgb), 0.2) inset;
  animation: wf-ring-spin-rev 14s linear infinite;
}
@keyframes wf-ring-spin { to { transform: rotate(360deg); } }
@keyframes wf-ring-spin-rev { to { transform: rotate(-360deg); } }

.wf-arrow-rotor {
  position: absolute; inset: 0;
  transform: rotate(var(--wf-rotate, 0deg));
  transition: transform 0.3s ease;
}
.wf-arrow-main {
  position: absolute; left: 50%; top: 26px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 44px solid var(--wf-accent);
  filter: drop-shadow(0 0 14px rgba(var(--wf-accent-rgb), 0.9));
  animation: wf-blink 1s infinite ease-in-out;
}
.wf-chevron {
  position: absolute; left: 50%; top: 82px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 28px solid rgba(var(--wf-accent-rgb), 0.55);
}
.wf-chevron.c2 { top: 112px; opacity: 0.5; }
.wf-chevron.c3 { top: 138px; opacity: 0.28; }
.wf-chevron { animation: wf-trail 1.1s infinite ease-in-out; }
.wf-chevron.c2 { animation-delay: 0.15s; }
.wf-chevron.c3 { animation-delay: 0.3s; }

@keyframes wf-blink {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(var(--wf-accent-rgb), 0.7)); }
  50% { opacity: 0.4; filter: drop-shadow(0 0 22px rgba(var(--wf-accent-rgb), 1)); }
}
@keyframes wf-trail {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  40% { opacity: 0.7; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

#ar-wf-direction-text {
  font-size: 16px; font-weight: bold; color: var(--wf-accent); letter-spacing: 1px;
  text-transform: uppercase; text-shadow: 0 0 10px rgba(var(--wf-accent-rgb), 0.7), 0 1px 3px rgba(0,0,0,0.8);
  margin-bottom: 4px; font-family: 'Consolas', monospace;
}
#ar-wf-distance {
  font-size: 32px; font-weight: 900; color: #fff; font-family: monospace;
  text-shadow: 0 0 12px rgba(255,255,255,0.5), 0 1px 4px rgba(0,0,0,0.85); line-height: 1;
}
#ar-wf-distance span { font-size: 13px; color: var(--wf-accent2); margin-left: 4px; }
#ar-wf-dest-name { font-size: 14px; color: var(--wf-accent); margin: 10px 0 4px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
#ar-wf-note {
  font-size: 11.5px; color: rgba(255,255,255,0.9); line-height: 1.5; margin-top: 6px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  border-top: 1px dashed rgba(var(--wf-accent-rgb), 0.3); padding-top: 8px; min-height: 14px;
}

.wf-btn-row { display: flex; gap: 8px; margin-top: 16px; }
.wf-btn {
  flex: 1; border-radius: 10px; padding: 11px 0; font-size: 11.5px; font-weight: bold;
  cursor: pointer; letter-spacing: 0.4px;
  border: 1.5px solid rgba(var(--wf-accent-rgb), 0.55); background: rgba(var(--wf-accent-rgb), 0.14); color: var(--wf-accent);
  backdrop-filter: blur(4px);
}
.wf-btn.wf-close { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); color: #fff; }
.wf-btn.wf-tathan { border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); color: #ffb3b3; }

/* Nút nổi báo có bảng chỉ dẫn đang được quét (chỉ hiện lại nếu người dùng lỡ đóng thủ công) */
#btn-reopen-wf {
  position: fixed; bottom: 85px; left: 50%; transform: translateX(-50%);
  z-index: 89999; display: none; align-items: center; gap: 8px;
  background: rgba(4,10,20,0.4); backdrop-filter: blur(6px);
  color: #4FC3FF; border: 1.5px solid #4FC3FF; border-radius: 30px;
  padding: 11px 20px; font-size: 11px; font-weight: bold; letter-spacing: 1px;
  cursor: pointer; text-transform: uppercase;
  box-shadow: 0 0 15px rgba(79,195,255,0.4);
}

@media (max-width: 360px) {
  #ar-wf-distance { font-size: 26px; }
  .wf-arrow-stage { width: 140px; height: 140px; }
  .wf-arrow-main { top: 20px; }
}

/* ---- Hiệu ứng "đang đánh chữ" (typewriter) ---- */
.wf-typing::after {
  content: '▌';
  margin-left: 2px;
  animation: wf-cursor-blink 0.8s steps(1) infinite;
  color: inherit;
}
@keyframes wf-cursor-blink { 50% { opacity: 0; } }

/* ============================================================
   THEME 1 (mặc định): "xanh-bien-trang-sua" - xanh dương ngả trắng,
   đúng tông ảnh tham chiếu (HUD robot công nghệ)
   ============================================================ */
#ar-wf-overlay.wf-theme-xanh-bien-trang-sua {
  --wf-accent: #4FC3FF;
  --wf-accent-rgb: 79, 195, 255;
  --wf-accent2: #FFFFFF;
}

/* ============================================================
   THEME 2: "xanh-la-vang" - công nghệ chớp xanh lá ngả vàng
   ============================================================ */
#ar-wf-overlay.wf-theme-xanh-la-vang {
  --wf-accent: #B6FF3C;
  --wf-accent-rgb: 182, 255, 60;
  --wf-accent2: #FFDC00;
}

/* ================================================================
   TIÊU CHUẨN CHẤT LƯỢNG: tôn trọng "prefers-reduced-motion" - xem giải
   thích đầy đủ trong ar_gioithieu_style.css. ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .wf-arrow-stage::before, .wf-arrow-stage::after, .hud-chip::before,
  .hud-chip, .hud-row, .hud-particle-field span, .wf-arrow-main,
  .wf-chevron, .wf-typing::after, #ar-wf-card .wf-scan-sweep {
    animation: none !important;
  }
}

.wf-btn:focus-visible, .hud-chip:focus-visible, .hud-row:focus-visible,
#btn-reopen-wf:focus-visible {
  outline: 2px solid var(--wf-accent, #4FC3FF); outline-offset: 2px;
}