/**
 * ar_gioithieu_style.css
 * ------------------------------------------------------------
 * Giao diện cho GIỚI THIỆU KHÔNG GIAN bản WebXR World Tracking:
 * (1) Màn hình đầu: chọn nhân vật + bắt đầu rà sàn.
 * (2) Lớp hướng dẫn nổi trong lúc rà sàn (chạm điểm sáng để đặt).
 * (3) Panel giới thiệu sau khi đặt xong: lời chào (đánh máy) + menu nội
 *     dung phòng - tái dùng phong cách kính mờ trong suốt quen thuộc.
 */

/* ARButton mặc định của three.js tự bật lại display sau khi kiểm tra WebXR -> hiện
   nút "START AR" trắng xấu đè lên trang. Nút vẫn được gọi bằng .click() từ code
   nên chỉ cần ẩn bằng CSS (!important thắng style inline). */
#ARButton { display: none !important; }

#ar-gt-dom-overlay { position: fixed; inset: 0; z-index: 999000; pointer-events: none; font-family: Arial, sans-serif; color: #fff; }
#ar-gt-dom-overlay .gt-clickable { pointer-events: auto; }

/* ---- (0) Màn hình lỗi / không hỗ trợ ---- */
#ar-gt-unsupported {
  position: fixed; inset: 0; pointer-events: auto; z-index: 5;
  background: linear-gradient(160deg, #001f3f, #003a5c);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 28px; box-sizing: border-box;
}
#ar-gt-unsupported h3 { color: #FF2A6D; font-size: 16px; margin: 0 0 10px; }
#ar-gt-unsupported p { font-size: 13px; line-height: 1.7; opacity: 0.92; max-width: 340px; margin: 0 0 8px; }
#ar-gt-unsupported .gt-btn { margin-top: 14px; }

/* ---- (1) Màn hình đầu: chọn nhân vật ---- */
#ar-gt-start {
  position: fixed; inset: 0; pointer-events: auto; z-index: 4;
  background: linear-gradient(160deg, #001f3f, #003a5c 60%, #001f3f);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 18px; box-sizing: border-box; overflow-y: auto;
}
#ar-gt-start .gt-logo { height: 64px; margin-bottom: 10px; }
#ar-gt-start h1 { font-size: 1.15em; color: #00E5FF; letter-spacing: 0.5px; margin: 0 0 4px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
#ar-gt-start h2 { font-size: 0.85em; font-weight: normal; opacity: 0.85; margin: 0 0 20px; }

#ar-gt-guide-grid { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 420px; margin-bottom: 18px; }
.gt-guide-card {
  width: 132px; border-radius: 16px; padding: 14px 10px; cursor: pointer;
  border: 1.5px solid rgba(0,229,255,0.35); background: rgba(0,229,255,0.06);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.gt-guide-card:active { transform: scale(0.96); }
.gt-guide-card.dang-chon { border-color: #00E5FF; background: rgba(0,229,255,0.18); box-shadow: 0 0 18px rgba(0,229,255,0.35); }
.gt-guide-icon { display: flex; justify-content: center; margin-bottom: 6px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
.gt-guide-name { font-size: 12.5px; font-weight: 700; line-height: 1.3; }

#ar-gt-start .start-btn {
  padding: 15px 52px; font-size: 1.05em; font-weight: 800; letter-spacing: 0.5px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  color: #00243d; background: linear-gradient(180deg, #7BF3FF 0%, #00E5FF 55%, #00B8D4 100%);
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 0 #0090A8, 0 10px 22px rgba(0,229,255,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#ar-gt-start .start-btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #0090A8, 0 4px 12px rgba(0,229,255,0.3);
}
#ar-gt-start .start-btn:disabled {
  opacity: 0.55; cursor: not-allowed; color: rgba(0,36,61,0.55);
  background: rgba(255,255,255,0.28); box-shadow: 0 4px 0 rgba(0,0,0,0.2);
}
#ar-gt-start .gt-room-name { font-size: 12px; color: #00E5FF; margin-bottom: 4px; letter-spacing: 0.5px; }

/* (1) Nút "Đổi Người Thuyết minh" - đổi từ khung to bè sang 1 nút PILL nhỏ
   gọn kiểu nổi 3D (bóng đổ phía dưới tạo cảm giác nhấn nổi, lõm nhẹ khi bấm)
   thay vì khung viền trong suốt to như trước, thẩm mỹ + gọn hơn nhiều. */
#ar-gt-start .gt-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; max-width: none; margin-top: 14px; padding: 9px 18px;
  border-radius: 999px; border: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.06));
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35), 0 6px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
#ar-gt-start .gt-btn-ghost:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.28);
}

.gt-exit-link {
  margin-top: 16px; background: none; border: none; color: rgba(255,255,255,0.45);
  font-size: 11px; text-decoration: underline; cursor: pointer; padding: 6px 10px;
}
.gt-exit-link:active { color: rgba(255,255,255,0.75); }

/* ---- (12) Màn hình "CHỌN HÀNH TRÌNH" - danh sách cặp cấu hình sẵn ---- */
#ar-gt-pair-select {
  position: fixed; inset: 0; pointer-events: auto; z-index: 4;
  background: linear-gradient(160deg, #001f3f, #003a5c 60%, #001f3f);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px 18px; box-sizing: border-box; overflow-y: auto;
}
#ar-gt-pair-select .gt-logo { height: 64px; margin-bottom: 10px; }
#ar-gt-pair-select h1 { font-size: 1.15em; color: #00E5FF; letter-spacing: 0.5px; margin: 0 0 4px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
#ar-gt-pair-select h2 { font-size: 0.85em; font-weight: normal; opacity: 0.85; margin: 0 0 20px; }
#ar-gt-pair-select .gt-room-name { font-size: 12px; color: #00E5FF; margin-bottom: 4px; letter-spacing: 0.5px; }
#ar-gt-pair-grid { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 380px; margin-bottom: 8px; }
.gt-pair-card {
  border-radius: 18px; padding: 16px 14px; cursor: pointer; text-align: left;
  border: 1.5px solid rgba(0,229,255,0.35); background: rgba(0,229,255,0.06);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  display: flex; flex-direction: column; gap: 4px;
}
.gt-pair-card:active { transform: scale(0.97); border-color: #00E5FF; background: rgba(0,229,255,0.18); }
.gt-pair-icons { display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
.gt-pair-plus { font-size: 14px; opacity: 0.5; margin: 0 6px; }
.gt-pair-names { font-size: 13.5px; font-weight: 700; text-align: center; }
.gt-pair-dest { font-size: 11px; color: #FFD400; opacity: 0.9; text-align: center; }
.gt-pair-cta { font-size: 10.5px; color: rgba(255,255,255,0.6); text-align: center; margin-top: 2px; }

/* ---- (11) Toast "Đi đến vị trí" ---- */
#ar-gt-goto-toast {
  position: fixed; inset: 0; z-index: 999500; pointer-events: none;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,10,20,0.55);
}
#ar-gt-goto-card {
  background: rgba(4,12,24,0.85); border: 1.5px solid rgba(0,229,255,0.5); border-radius: 18px;
  padding: 22px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  box-shadow: 0 0 24px rgba(0,229,255,0.3); max-width: 300px; text-align: center;
}
#ar-gt-goto-text { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.5; }
.gt-goto-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(0,229,255,0.25); border-top-color: #00E5FF;
  animation: gt-spin 0.8s linear infinite;
}
@keyframes gt-spin { to { transform: rotate(360deg); } }

/* ---- (13) Hộp xác nhận thoát ---- */
/* ---- (15) Chế độ gọn: hướng dẫn trực quan chụp/quay màn hình ---- */
#ar-gt-compact-tip {
  position: fixed; inset: 0; z-index: 500200;
  display: none; align-items: center; justify-content: center;
  padding: 20px; pointer-events: none; background: rgba(0,6,14,0.35);
}
#ar-gt-compact-tip-card {
  pointer-events: auto;
  background: rgba(4,12,24,0.88); border: 1.5px solid rgba(0,229,255,0.55); border-radius: 18px;
  padding: 20px 20px 16px; max-width: 320px; width: 100%; box-sizing: border-box;
  text-align: center; box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
#ar-gt-compact-tip-title { font-size: 15px; font-weight: 800; color: #00E5FF; margin-bottom: 10px; }
#ar-gt-compact-tip-diagram { display: flex; justify-content: center; margin-bottom: 10px; }
.gt-diagram-btn { fill: #FFDC00; animation: gt-diagram-blink 1.1s ease-in-out infinite; transform-origin: center; }
@keyframes gt-diagram-blink {
  0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 0 rgba(255,220,0,0)); }
  50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,220,0,0.9)); }
}
#ar-gt-compact-tip-text { font-size: 12.5px; line-height: 1.7; color: #fff; text-align: left; margin-bottom: 14px; }
#ar-gt-compact-tip-close {
  width: 100%; border-radius: 10px; padding: 10px 0; font-size: 12px; font-weight: 700;
  border: 1.5px solid rgba(0,229,255,0.5); background: rgba(0,229,255,0.12); color: #00E5FF; cursor: pointer;
}
#ar-gt-compact-exit {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 500200;
  display: none; align-items: center; gap: 8px; pointer-events: auto;
  background: rgba(4,12,24,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; border: 1.5px solid rgba(255,255,255,0.4); border-radius: 30px;
  padding: 10px 18px; font-size: 11.5px; font-weight: 700; cursor: pointer;
}

#ar-gt-confirm-exit {
  position: fixed; inset: 0; z-index: 999600; pointer-events: auto;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,5,12,0.7);
}
#ar-gt-confirm-card {
  background: rgba(4,12,24,0.95); border: 1.5px solid rgba(255,90,90,0.4); border-radius: 18px;
  padding: 22px 20px; width: min(320px, 86vw); box-sizing: border-box; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.gt-confirm-title { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.gt-confirm-msg { font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.6; margin-bottom: 18px; }
.gt-confirm-btnrow { display: flex; gap: 10px; }
.gt-confirm-btnrow .gt-btn { flex: 1; }

/* ---- (1b) Thanh chọn "Nhân vật A/B" đang thao tác - trước đặt sát mép TRÊN
   nên hay bị trình duyệt/hệ điều hành che mất (thanh điều khiển AR gốc của
   Chrome thường nằm ngay khu vực đó) - nay hạ xuống thấp hơn, nằm dưới vùng
   đó, vẫn ở nửa trên màn hình để không đụng thanh rà sàn/panel nội dung phía
   dưới, dễ chạm bằng ngón cái. Hiện suốt phiên AR để khách luôn chọn lại
   được người mình muốn xoay/thu-phóng. ---- */
#ar-gt-char-bar {
  position: fixed; left: 0; right: 0; top: max(76px, 12vh);
  z-index: 500000; display: none; justify-content: center; pointer-events: none;
}
#ar-gt-char-btn-row { display: flex; gap: 10px; pointer-events: auto; }
.gt-char-btn {
  padding: 9px 18px; border-radius: 24px; border: 1.5px solid rgba(255,255,255,0.28);
  background: rgba(4,12,24,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
}
.gt-char-btn:active { transform: scale(0.95); }
.gt-char-btn.active {
  border-color: #FFD400; background: rgba(255,212,0,0.18); color: #FFD400;
  box-shadow: 0 0 16px rgba(255,212,0,0.4);
}

/* ---- (2) Lớp hướng dẫn rà sàn ---- */
#ar-gt-scan-hint {
  position: fixed; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 3;
  display: none; justify-content: center; padding: 0 16px max(22px, env(safe-area-inset-bottom));
}
#ar-gt-scan-hint-card {
  background: rgba(0,20,40,0.55); border: 1px solid rgba(0,229,255,0.5); border-radius: 14px;
  padding: 12px 18px; text-align: center; font-size: 12.5px; line-height: 1.6;
  box-shadow: 0 0 20px rgba(0,229,255,0.25); max-width: 360px;
}
#ar-gt-scan-hint-card b { color: #00E5FF; }

/* ---- (3) Panel giới thiệu (sau khi đặt xong) ---- */
#ar-gt-overlay {
  position: fixed !important; left: 0; right: 0; bottom: 0 !important; z-index: 887777 !important;
  display: none; justify-content: center; pointer-events: none;
  padding: 0 12px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  box-sizing: border-box;
}
#ar-gt-card {
  width: min(420px, 100%); pointer-events: auto;
  position: relative;
  border-radius: 16px; border: 1px solid rgba(0,229,255,0.6);
  background: rgba(4, 12, 24, 0.4);
  box-shadow: 0 0 26px rgba(0,229,255,0.32), inset 0 0 20px rgba(0,229,255,0.05);
  color: #fff; box-sizing: border-box; padding: 16px 16px 14px;
  max-height: 60vh; overflow-y: auto;
  animation: gt-appear 0.25s ease-out forwards;
}
@keyframes gt-appear { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#ar-gt-card .gt-grid-layer {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(0,229,255,0.07) 0px, rgba(0,229,255,0.07) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(0,229,255,0.07) 0px, rgba(0,229,255,0.07) 1px, transparent 1px, transparent 24px);
}
#ar-gt-card > * { position: relative; z-index: 1; }
#ar-gt-card::before, #ar-gt-card::after {
  content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 2;
  border: 2px solid #00E5FF; filter: drop-shadow(0 0 4px #00E5FF);
}
#ar-gt-card::before { top: 6px; left: 6px; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
#ar-gt-card::after { bottom: 6px; right: 6px; border-left: none; border-top: none; border-bottom-right-radius: 6px; }

#ar-gt-lang-toggle {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  border-radius: 20px; border: 1px solid rgba(0,229,255,0.55); background: rgba(0,229,255,0.1);
  color: #00E5FF; font-size: 10.5px; font-weight: bold; letter-spacing: 0.5px;
  padding: 4px 10px; cursor: pointer;
}
#ar-gt-title { font-size: 15px; font-weight: bold; color: #00E5FF; letter-spacing: 0.3px; text-shadow: 0 0 8px rgba(0,229,255,0.6), 0 1px 3px rgba(0,0,0,0.85); border-bottom: 1px dashed rgba(0,229,255,0.35); padding-bottom: 8px; margin-bottom: 10px; }
#ar-gt-greeting { font-size: 13.5px; line-height: 1.6; color: #fff; margin-bottom: 4px; text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.gt-section-label { font-size: 11px; color: #00E5FF; letter-spacing: 1px; text-transform: uppercase; text-align: center; font-weight: bold; margin: 10px 0; text-shadow: 0 0 8px rgba(0,229,255,0.6), 0 1px 3px rgba(0,0,0,0.85); }

.gt-typing::after { content: '▌'; margin-left: 2px; color: inherit; animation: gt-cursor-blink 0.8s steps(1) infinite; }
@keyframes gt-cursor-blink { 50% { opacity: 0; } }

.hud-tile-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.hud-tile {
  position: relative; z-index: 1; flex: 1 1 calc(50% - 8px); min-width: 120px;
  padding: 11px 12px; border-radius: 9px; cursor: pointer; box-sizing: border-box;
  background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.5);
  font-size: 12.5px; font-weight: 600; color: #fff; text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.hud-tile:active, .hud-tile.dang-mo { background: rgba(0,229,255,0.26); border-color: #00E5FF; }
.hud-tile-detail { flex-basis: 100%; margin-top: -2px; background: rgba(0,229,255,0.08); border: 1px dashed rgba(0,229,255,0.4); border-radius: 9px; padding: 12px; box-sizing: border-box; }
.hud-tile-detail-title { font-size: 13px; font-weight: 700; color: #00E5FF; margin-bottom: 6px; text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.hud-tile-detail-text { font-size: 12.5px; line-height: 1.6; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.hud-empty-hint { font-size: 12px; color: rgba(255,255,255,0.65); text-align: center; padding: 16px 10px; font-style: italic; text-shadow: 0 1px 3px rgba(0,0,0,0.85); }

.gt-btn-row { display: flex; gap: 8px; margin-top: 10px; }
.gt-btn {
  flex: 1; border-radius: 10px; padding: 10px 0; font-size: 11.5px; font-weight: bold;
  cursor: pointer; letter-spacing: 0.4px;
  border: 1.5px solid rgba(0,229,255,0.5); background: rgba(0,229,255,0.08); color: #00E5FF;
}
.gt-btn.gt-close { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.05); color: #fff; }
.gt-btn.gt-tathan { border-color: rgba(255,90,90,0.4); background: rgba(255,90,90,0.08); color: #ffb3b3; }
.gt-btn.gt-reset { border-color: rgba(255,220,0,0.4); background: rgba(255,220,0,0.08); color: #FFDC00; }

#btn-reopen-gt {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 89998; display: none; align-items: center; gap: 8px; pointer-events: auto;
  background: linear-gradient(135deg, #002b3a, #004e5f);
  color: #00E5FF; border: 2px solid #00E5FF; 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(0,229,255,0.4);
}

/* ================================================================
   TIÊU CHUẨN CHẤT LƯỢNG: tôn trọng "prefers-reduced-motion" - người dùng
   bật tuỳ chọn này (thường vì dễ chóng mặt/say chuyển động khi thấy nhiều
   hiệu ứng xoay/nhấp nháy liên tục) sẽ được tắt/giảm mạnh các animation
   trang trí, chỉ giữ lại hiệu ứng CẦN THIẾT để hiểu trạng thái (VD: tia
   quét dò sàn) ở dạng tĩnh hoặc rất chậm. Không ảnh hưởng gì tới người
   dùng thường (chỉ áp dụng khi chính hệ điều hành/trình duyệt của họ đã
   bật "Giảm chuyển động"). ================================================================ */
@media (prefers-reduced-motion: reduce) {
  #ar-gt-card, .gt-pair-card, .gt-guide-card, .hud-tile, .gt-char-btn,
  .gt-goto-spinner, #ar-gt-compact-tip-card {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .gt-diagram-btn { animation: none !important; opacity: 1 !important; }
  .gt-typing::after { animation: none !important; }
}

/* Trạng thái focus bàn phím rõ ràng (khả năng tiếp cận) - viền sáng dễ thấy
   khi điều hướng bằng phím Tab, không hiện khi bấm bằng chuột/chạm (chỉ
   trình duyệt hỗ trợ :focus-visible mới phân biệt được, các trình duyệt cũ
   hơn sẽ coi như :focus thường - vẫn an toàn, không xấu đi). */
.gt-clickable:focus-visible, .gt-btn:focus-visible, .gt-guide-card:focus-visible,
.gt-pair-card:focus-visible, .hud-tile:focus-visible, .gt-char-btn:focus-visible,
#ar-gt-lang-toggle:focus-visible {
  outline: 2px solid #00E5FF; outline-offset: 2px;
}