/* ═══════════════════════════════════════════════════════════════════════════
   app-pill.css — viên "Cài app" nổi ở góc dưới TRÁI (includes/app_pill.php, Đợt 3 · 06/11/2026).
   Chủ chốt: viên chữ màu thương hiệu có nút ×, không icon trang trí, góc phải để cho bong bóng chat.
   Màu lấy từ khung đang nạp: guest-shell.css (--gs-*) cho khách, learn-shell.css (--lv-*) cho học viên. KHÔNG hex cứng.
   Tệp này giống hệt ở ba web NAVS.
   ═══════════════════════════════════════════════════════════════════════════ */

.app-pill--gs {
  --ap-bg: var(--gs-brand-strong); --ap-on: var(--gs-on); --ap-font: var(--gs-font); --ap-shadow: var(--gs-sh-2); --ap-focus: var(--gs-focus);
  --ap-surface: var(--gs-surface); --ap-ink: var(--gs-ink); --ap-text: var(--gs-text); --ap-line: var(--gs-hair); --ap-brand-deep: var(--gs-brand-deep);
}
.app-pill--lv {
  --ap-bg: var(--lv-brand-strong); --ap-on: var(--lv-on); --ap-font: var(--lv-font); --ap-shadow: var(--lv-sh-3); --ap-focus: var(--lv-focus);
  --ap-surface: var(--lv-surface); --ap-ink: var(--lv-ink); --ap-text: var(--lv-text); --ap-line: var(--lv-hair); --ap-brand-deep: var(--lv-brand-deep);
}

.app-pill {
  position: fixed; z-index: 850; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 2px; box-sizing: border-box; max-width: calc(100vw - 96px); height: 46px; padding: 0 6px 0 4px;
  border-radius: 999px; background: var(--ap-bg); color: var(--ap-on); box-shadow: var(--ap-shadow); font-family: var(--ap-font);
  opacity: 0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease;
}
.app-pill[hidden] { display: none; }
.app-pill.is-in { opacity: 1; transform: none; }
.app-pill__go {
  min-width: 0; height: 46px; padding: 0 10px 0 16px; border: 0; background: transparent; color: inherit; cursor: pointer;
  font: 650 14.5px/1 var(--ap-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 999px;
}
.app-pill__x {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--ap-on) 18%, transparent); color: inherit;
}
.app-pill__x:hover { background: color-mix(in srgb, var(--ap-on) 28%, transparent); }
.app-pill__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.app-pill__go:focus-visible, .app-pill__x:focus-visible, .app-pill__ok:focus-visible { outline: none; box-shadow: var(--ap-focus); }

/* Khách trên iPhone: hướng dẫn thêm vào Màn hình chính, mở phía trên viên */
.app-pill__how {
  position: absolute; left: 0; bottom: calc(100% + 10px); box-sizing: border-box; width: min(318px, calc(100vw - 32px)); padding: 16px 18px 14px;
  border-radius: 18px; border: 1px solid var(--ap-line); background: var(--ap-surface); box-shadow: var(--ap-shadow); color: var(--ap-text);
  font-size: 14px; line-height: 1.5;
}
.app-pill__how[hidden] { display: none; }
.app-pill__how b { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--ap-ink); }
.app-pill__how ol { margin: 0 0 12px; padding-left: 20px; }
.app-pill__how li { margin: 0 0 4px; }
.app-pill__ok {
  display: block; width: 100%; height: 44px; border: 0; border-radius: 12px; cursor: pointer; background: var(--ap-bg); color: var(--ap-on);
  font: 650 14.5px/1 var(--ap-font);
}

/* Học viên, máy tính: thanh bên trái (cố định) chiếm chỗ góc dưới trái ⇒ viên nằm ngay cạnh thanh bên */
@media (min-width: 1024px) {
  .app-pill { left: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  body.has-sidebar .app-pill--lv { left: calc(var(--lv-side-w, 0px) + 24px); }
}
/* Học viên, điện thoại: nằm sát trên thanh dưới */
@media (max-width: 1023px) {
  body.has-bnav .app-pill--lv { bottom: calc(var(--lv-bnav-h, 62px) + env(safe-area-inset-bottom, 0px) + 12px); }
}
@media (prefers-reduced-motion: reduce) { .app-pill { transition: none; transform: none; } }
@media print { .app-pill { display: none !important; } }