/* shared/companion/logi.css — "Logi" mascot, W3d PHASE C1 → C7 (16/09).
 * 22/09 — ĐỔI ART: 8 ảnh biểu cảm TĨNH vẽ mượt (logi-v2-*.webp, KHÔNG phải
 * pixel art — luật "No pixel-art" của LOGIelts). Mọi luật pixel (image-
 * rendering:pixelated, bội số nguyên theo dpr, cửa sổ cắt 64×70, sprite sheet
 * + steps()) đã gỡ. Chuyển động còn lại: nhún nhẹ + "pop" khi đổi biểu cảm,
 * đều trong cổng prefers-reduced-motion ở cuối file. Các chú thích C7/M5
 * bên dưới giữ làm lịch sử — chỗ nào nói "pixel"/"sheet" là đã hết hiệu lực.
 * Góc dưới-phải hub. z-index thấp hơn mọi lớp điều hướng/modal thật (kiểm
 * bằng grep z-index trước khi đổi số này), và tự né safe-area trên màn hẹp
 * để không che nút điều hướng dưới cùng của điện thoại.
 */
.lg-companion {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 40; /* dưới modal/toast/nav overlay của app (chúng dùng >=1000) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none; /* chỉ các con bên trong bắt sự kiện */
  /* HUD R3 (22/09) — biến chỗ đậu; logi.js#applyDock() ghi đè inline trên
   * chính node này. Giá trị ở đây chỉ là mặc định fail-open: JS lỗi ⇒ y hệt
   * hành vi cũ (góc dưới-phải, bong bóng 240px). */
  --logi-dock-left: 14px;
  --logi-dock-bottom: 14px;
  --logi-bubble-max: 240px;
}

/* REVIEW 15/09: khối neo cho nút ẩn. .lg-companion là position:fixed nên nó
 * VẪN là positioned ancestor — dấu × từng nhảy lên góc bong bóng thoại khi
 * bong bóng mở. Neo vào chính avatar. */
.lg-companion-avatar-wrap {
  position: relative;
  display: inline-flex;
  pointer-events: none;
}

/* C7 (16/09) bỏ nền tròn sau avatar; C7 (17/09) cỡ theo --logi-size (biến
 * CSS do logi.js#applySize() ghi trên .lg-companion); HUD R3 M5 (19/09) cắt
 * phần trống khung pixel 64×70. 22/09 — art mượt mới: gỡ luật bội số nguyên
 * pixel và cửa sổ cắt (xem đầu file); --logi-size nay chỉ theo bề ngang cửa
 * sổ (logi.js#logiSizePx: 72 / 80 / 128px). Mặc định 80px dưới đây là
 * fail-open khi JS chưa chạy. */
.lg-companion-avatar {
  pointer-events: auto;
  /* 22/09 — art mới lấp gần kín khung vuông (bbox alpha ~3..189/192), bỏ
   * cửa sổ cắt 64×70 của bản pixel: avatar = đúng --logi-size vuông. */
  width: var(--logi-size, 80px);
  height: var(--logi-size, 80px);
  overflow: visible; /* bóng đổ + "pop" (scale 1.06) được tràn nhẹ khỏi khung */
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
/* Phản hồi bấm-lõm. (Bản pixel cấm scale() vì resample; art mượt thì
 * translateY vẫn đủ, giữ nguyên cho khỏi đụng tới test/thói quen cũ.) */
.lg-companion-avatar:active { transform: translateY(1px); }
/* Nền tròn cũ từng LÀ vòng focus tự nhiên (viền button tròn). Bỏ nền ⇒ phải
 * tự vẽ vòng focus rõ ràng cho bàn phím, kẻo Tab tới Logi mà không thấy gì. */
.lg-companion-avatar:focus-visible {
  outline: 3px solid #20B9B9;
  outline-offset: 3px;
  border-radius: 10px;
}

/* 22/09 — ảnh biểu cảm (<img>, src do logi.js#showImage() gắn sau preload).
 * Vẽ MƯỢT: không image-rendering:pixelated (art không phải pixel, ép
 * nearest-neighbour sẽ ra răng cưa). object-fit:contain giữ tỉ lệ ở mọi cỡ,
 * kể cả ổ compact 46px. Ảnh trong suốt nên không đặt background-color —
 * nhưng thêm bóng đổ nhẹ ôm theo alpha (drop-shadow) để con mèo tách khỏi
 * nền ở CẢ theme sáng lẫn tối (thân mèo sáng + viền nâu đậm tự đọc được trên
 * nền tối; trên nền trắng thì bóng đổ là thứ giữ khối). */
.lg-companion-img {
  display: block;
  width: 100%;
  height: 100%;
  flex: none;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.lg-companion-emoji {
  font-size: calc(var(--logi-size, 80px) / 2); /* tỉ lệ với avatar, y hệt tỉ lệ 28px/56px của bản C1 */
  line-height: 1;
  flex: none; /* đừng để flex bóp chữ */
}

/* C7 (16/09) — nút ẩn × và chấm "có gì mới" đẩy ra xa hơn + to hơn một chút
 * cho khớp avatar 92px (bản 56px cũ đặt chúng lấn vào góc, giờ avatar to
 * hơn hẳn nên đẩy hẳn ra ngoài rìa để không nằm đè lên mặt Logi). */
.lg-companion-hide {
  pointer-events: auto;
  position: absolute;
  /* (17/09) — neo theo % vào MÉP CON MÈO, không vào mép khung: sprite 92px
   * chỉ vẽ mèo trong vùng x 20..79, y 11..77 (bbox hợp của 6 sheet đang dùng),
   * nên -8px cũ treo dấu × lơ lửng ngoài khoảng trống, càng xa khi 184px.
   * (19/09) — khung cha giờ LÀ cửa sổ cắt 64×70 chứ không còn 92×92, nên %
   * cũ trỏ sai chỗ. Quy đổi để dấu × giữ ĐÚNG vị trí thấy được như trước:
   * tâm cũ ở (x 72,7 · y 13,8) trong khung 92 ⇒ trong cửa sổ x14..78/y11..81
   * là 5,3px từ mép phải (8% của 64) và 2,8px từ mép trên (4% của 70). */
  /* 22/09 — khung giờ là ảnh vuông đầy đủ, tai mèo chạm mép trên ⇒ treo dấu
   * × ngay góc trên-phải khung, lấn ra ngoài nửa nút. */
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A1 (HUD R3 M1, 19/09) — thu nhỏ thay vì ẩn vĩnh viễn. root (.lg-companion)
 * đã position:fixed + safe-area + flex column align-items:flex-end (đầu
 * file) — bong bóng thu nhỏ chỉ là một item flex khác trong CÙNG khối, khỏi
 * khai lại position:fixed/safe-area lần hai. logi.js#applyMinimizedState()
 * chỉ đổi [data-minimized] trên root; CSS lo phần hiện/ẩn. */
.lg-companion[data-minimized="1"] .lg-companion-avatar-wrap,
.lg-companion[data-minimized="1"] .lg-companion-bubble {
  display: none;
}
/* A2 (19/09) — "cái tổ mèo": bong bóng tròn là Ổ, con mèo ngủ nằm trong.
 * 46px chứ không 44px là CÓ LÝ DO ĐO ĐƯỢC, xem logi.js#mountRestoreVisual —
 * 46 = 92/2 đúng một nửa khung gốc nên pixel art thu nhỏ ĐỀU (và ở dpr 2 là
 * 1:1). Con mèo trong khung sleep chỉ chiếm x 17..75, y 18..67 (đo 19/09),
 * nên ở nửa cỡ nó vẽ khoảng 30×25px giữa ổ 46px — chừa viền quanh, đọc ra
 * đúng "mèo cuộn tròn trong ổ" chứ không phải "ảnh dán kín nút". */
.lg-companion-restore {
  display: none; /* mặc định ẩn — chỉ hiện khi [data-minimized="1"], xem dưới */
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  /* Cặp --surf/--text lấy y hệt .lg-companion-bubble ngay dưới. CẢ HAI token
   * đều lật theo theme và lật CÙNG NHAU, nên tương phản giữ nguyên ở cả sáng
   * lẫn tối. Đừng thay một trong hai bằng màu cứng — lật lệch một vế là ra
   * chữ-trên-nền-cùng-màu. (Luật "mực trong khung không lật" ở CLAUDE.md là
   * cho HUD 9-slice của GAME, không áp vào đây.) */
  background: var(--surf,#221D33);
  color: var(--text,#EEEAF6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lg-companion[data-minimized="1"] .lg-companion-restore {
  display: flex;
}
/* 22/09 — ổ thu nhỏ hiện ĐÚNG biểu cảm hiện tại (cùng src với con mèo to,
 * logi.js#syncRestoreVisual). 40px trong ổ 46px: ảnh lấp gần kín khung vuông
 * nên chừa 3px mỗi bên để góc ảnh không bị vành tròn cắt cụt tai. Thu nhỏ
 * MƯỢT (không pixelated). Chưa có ảnh/ảnh lỗi ⇒ JS ẩn <img>, hiện emoji. */
.lg-companion-restore-img {
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
}
.lg-companion-restore-emoji { pointer-events: none; }
.lg-companion-restore:focus-visible {
  outline: 3px solid #20B9B9;
  outline-offset: 3px;
}
.lg-companion-restore:active { transform: translateY(1px); }

/* C7 (17/09, mục NHẸ #9) — max-height + cuộn trong: không có max-height cũ
 * thì điện thoại XOAY NGANG (vd 812×375 — chiều cao viewport chỉ 375px) có
 * thể đẩy bong bóng tràn khỏi mép trên màn hình khi nội dung dài (chào +
 * giới thiệu + 3 nút hành động + nút "Logi là ai?"). 70vh ở màn 375px cao =
 * 262px, đủ chỗ cho nội dung dài nhất mà vẫn chừa lề; cuộn trong khi hiếm
 * gặp cần nhiều hơn thế. */
.lg-companion-bubble {
  pointer-events: auto;
  max-width: min(240px, 66vw);
  max-height: min(320px, 70vh);
  overflow-y: auto;
  background: var(--surf,#221D33);
  color: var(--text,#EEEAF6);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

/* C3 (15/09) — lời thoại tách khỏi hàng nút (xem logi.js: aria-live chỉ đặt
 * trên phần .lg-companion-bubble-text, KHÔNG đặt trên hàng nút dưới đây).
 * .lg-companion-bubble-text cố ý KHÔNG có luật riêng — nó thừa kế nguyên
 * typography của bong bóng, thêm một rule rỗng chỉ tổ gây hiểu nhầm là có
 * style đang bị ghi đè ở đâu đó. */
.lg-companion-bubble-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.lg-companion-bubble-actions[hidden] { display: none; }

/* C4 (16/09) — kind 'next' giờ dựng <a href> thật (logi.js renderActions()),
 * không còn chỉ <button>. Selector .lg-companion-action đã khớp CẢ HAI thẻ
 * (nó không có tiền tố `button`), nhưng <a> mang theo 3 thứ mặc định của UA
 * stylesheet mà <button> không có: gạch chân, màu link xanh/tím, và
 * `display:inline`. Khai rõ 3 dòng dưới để <a> trông giống hệt <button> cũ
 * — thiếu chúng thì nút "▶ Làm tiếp" sẽ là một dòng chữ xanh có gạch chân
 * giữa hai nút còn lại, lệch hẳn phong cách hàng nút. */
.lg-companion-action {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 8px;
  background: rgba(32, 185, 185, 0.14);
  color: var(--text,#EEEAF6);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  padding: 6px 8px;
  cursor: pointer;
  text-decoration: none;
  /* C5 (16/09) — <a> mang theo 2 mặc định UA mà <button> không có: bôi đen
   * chữ khi chạm-giữ, và (Safari iOS) menu ngữ cảnh "Mở trong tab mới/Sao
   * chép liên kết" khi chạm-giữ. Chặn cả hai để chạm-giữ trên điện thoại
   * hành xử giống hệt <button> cũ. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
a.lg-companion-action,
a.lg-companion-action:visited {
  color: var(--text,#EEEAF6); /* đừng để <a> rơi về màu link mặc định của UA */
}
.lg-companion-action:hover { background: rgba(32, 185, 185, 0.24); }
.lg-companion-action:active { transform: scale(0.98); }
.lg-companion-action:focus-visible {
  outline: 2px solid #20B9B9;
  outline-offset: 2px;
}

/* C7 (16/09) — "❓ Logi là ai?": nhỏ hơn hàng nút hành động chính (không
 * phải một hành động điều kiện, luôn hiện), đặt dưới cùng bong bóng. */
.lg-companion-whoami {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  border: none;
  background: none;
  color: var(--text-muted, #666);
  font: inherit;
  font-size: 11px;
  text-align: left;
  padding: 2px 8px;
  cursor: pointer;
  text-decoration: underline;
}
.lg-companion-whoami:hover { color: var(--text,#EEEAF6); }
.lg-companion-whoami:focus-visible {
  outline: 2px solid #20B9B9;
  outline-offset: 2px;
}

/* Chấm nhỏ "có gì mới" — góc TRÊN-TRÁI của avatar (nút ẩn × đã chiếm góc
 * trên-phải, xem .lg-companion-hide). Tắt hẳn sau khi mở bong bóng một lần
 * trong phiên (logic ở logi.js updateDot()) — KHÔNG phải CSS quyết việc đó. */
.lg-companion-dot {
  pointer-events: none;
  position: absolute;
  /* (19/09) quy đổi sang cửa sổ cắt 64×70 — xem .lg-companion-hide. Tâm cũ
   * (x 21,2 · y 13,8) trong khung 92 ⇒ 7,2px từ mép trái (11% của 64), 2,8px
   * từ mép trên (4% của 70). */
  top: -3px; /* 22/09 — góc trên-trái khung vuông đầy đủ, xem .lg-companion-hide */
  left: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #F43F5E;
  border: 1.5px solid var(--surf,#221D33);
}
.lg-companion-dot[hidden] { display: none; }

/* B3 (15/09) → C7 (16/09) → 22/09 — animation THUẦN CSS (không JS
 * animation, không GIF), tắt hẳn nếu người dùng đặt "giảm chuyển động": MỌI
 * animation (nhún, pop, bong bóng) và MỌI @keyframes đều nằm trong CÙNG khối
 * @media này — ngoài khối thì con mèo đứng yên. 22/09: art mới là ảnh TĨNH
 * nên nhún áp cho MỌI biểu cảm (bản pixel chỉ nhún happy/proud vì sheet theo
 * buổi đã tự cử động); sheet + steps() đã gỡ cùng art pixel. */
@media (prefers-reduced-motion: no-preference) {
  /* Nhún đặt trên .lg-companion-avatar-wrap (khung NGOÀI), KHÔNG phải
   * .lg-companion-avatar: animation transform thắng mọi transform khai báo
   * thường (kể cả :active), đặt trên chính nút sẽ NUỐT hiệu ứng bấm-lõm.
   * sleepy thở chậm hơn (ngủ gục trên sách, nhún nhanh trông như giật mình). */
  .lg-companion .lg-companion-avatar-wrap {
    animation: lg-companion-bob 3s ease-in-out 3;
    animation-fill-mode: forwards;
  }
  .lg-companion[data-state="sleepy"] .lg-companion-avatar-wrap {
    animation-duration: 5s;
  }
  @keyframes lg-companion-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
  }

  /* "Pop" khi đổi biểu cảm — logi.js#restartPop() gỡ/gắn lại class này mỗi
   * lần biểu cảm ĐANG HIỆN đổi (không bắn ở lần hiện đầu tiên). */
  .lg-companion-img--pop {
    animation: lg-companion-pop 260ms ease-out;
  }
  @keyframes lg-companion-pop {
    0% { transform: scale(0.86); }
    60% { transform: scale(1.06); }
    100% { transform: scale(1); }
  }

  /* Bong bóng vừa hiện ra ([hidden] vừa gỡ) fade + scale nhẹ vào vị trí. */
  .lg-companion-bubble:not([hidden]) {
    animation: lg-companion-bubble-in 160ms ease-out;
  }
  @keyframes lg-companion-bubble-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
  }
}

@media (max-width: 480px) {
  /* C7 (16/09) — CHỈ còn né safe-area, KHÔNG còn ép avatar/emoji nhỏ lại:
   * xem lý do đo được ở comment .lg-companion-avatar phía trên (không có
   * thanh điều hướng cố định nào ở đáy trang để tránh, và bội số nguyên là
   * bắt buộc — 46px vẫn hợp lệ về SỐ nhưng owner brief chỉ cho phép khi có
   * bằng chứng che nội dung, chưa có bằng chứng đó ở 375px). */
  .lg-companion { right: max(10px, env(safe-area-inset-right)); bottom: max(64px, env(safe-area-inset-bottom)); }
}

/* ═══ HUD R3 (22/09) — chỗ đậu theo bố cục ═══════════════════════════════
 * Chủ app: "Mèo LOGI Cat đang che nội dung màn giữa". Luật HUD: cột giữa là
 * nhân vật chính. logi.js#applyDock() đo bố cục thật rồi đặt [data-dock] +
 * các biến --logi-dock-*; mọi luật dưới đây CHỈ đọc biến, không chứa số đo.
 * Khối này đứng CUỐI file để thắng cả luật @media (max-width:480px) phía trên
 * (specificity cũng cao hơn: class + attribute). */

/* 'rail' — xem khối "24/09 — THẺ ĐẦU cột phụ" ở CUỐI file (phải đứng sau
 * luật [data-lifted] để thắng nó). Bản 22/09 (đậu góc dưới-trái, đệm đáy
 * #hubRail bằng --logi-rail-pad) đã gỡ. */

/* Dòng chỉ đường — chỉ dock 'rail' mới hiện (logi.js bật/tắt [hidden]). */
.lg-companion-hint[hidden] { display: none; }

/* 'compact' — không có chỗ nào ngoài cột giữa: ổ tròn 46px (cùng khuôn ổ thu
 * nhỏ .lg-companion-restore), biểu cảm hiện tại thu nhỏ MƯỢT bên trong
 * (22/09: padding 3px để góc ảnh vuông không bị vành tròn cắt tai). Cặp --surf/--text
 * lật CÙNG NHAU theo theme như bong bóng — không phải khung 9-slice của game
 * nên luật "mực không lật" không áp. KHÔNG dùng [data-minimized]: compact là
 * do bố cục quyết, không phải lựa chọn của học sinh (khoá MIN_KEY không đụng). */
.lg-companion[data-dock="compact"] .lg-companion-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surf,#221D33);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  padding: 3px;
  box-sizing: border-box;
  overflow: hidden;
}
/* Trong ổ đã có nền + bóng — bỏ bóng đổ của ảnh cho gọn. */
.lg-companion[data-dock="compact"] .lg-companion-img { filter: none; }
/* 22/09 — ổ 46px: dấu × ở -6px che mất tai mèo (đo trên ảnh chụp 390px);
 * đẩy ra ngoài vành ổ thêm một chút như bản pixel cũ (~-9px). */
.lg-companion[data-dock="compact"] .lg-companion-hide { top: -10px; right: -10px; }

/* Banner "Cài logIELTS như app" (pwa.js, z-index 2147483645) đang hiện:
 * nhấc mèo lên trên nó. --logi-dock-bottom = 12 + cao banner + 12 (JS); cộng
 * safe-area ở đây vì banner cũng cộng nó vào bottom của chính nó. */
.lg-companion[data-lifted="1"] {
  bottom: calc(var(--logi-dock-bottom, 14px) + env(safe-area-inset-bottom, 0px));
}

/* ═══ 24/09 — dock 'rail' = THẺ ĐẦU cột phụ ═════════════════════════════
 * Chủ app: "kéo LOGI Cat lên trên để luôn hiển thị + hướng dẫn user làm gì ở
 * đâu". logi.js#applyDock() dời root VÀO đầu #hubRail; ở đây nó thôi là
 * lớp nổi position:fixed mà thành một khối sticky top:0 trong cột phụ tự
 * cuộn ⇒ luôn trong màn hình (cột phụ vốn sticky), không đè mục nào (nó
 * CHIẾM chỗ trong dòng chảy), mục bên dưới cuộn khuất SAU nó (nền đặc).
 * Bố cục: [mèo 64px | dòng chỉ đường], bong bóng (khi mở) trải hết bề ngang
 * ở hàng dưới. Đứng SAU [data-lifted] để bottom:auto thắng (cùng specificity)
 * — sticky mà còn bottom thì bị ghim cả đáy. */
.lg-companion[data-dock="rail"] {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 3; /* trên các thẻ trong cột phụ đang cuộn qua, trong stacking context của cột phụ */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "cat hint" "bubble bubble";
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--surf,#221D33);
  color: var(--text,#EEEAF6);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 16px;
  /* Vế đầu: dải màu nền trang đẩy LÊN 16px — che phần thẻ bên dưới lọt qua
   * 2 góc bo trên khi cột phụ cuộn (QA preview 24/09: thấy mép thẻ BTVN ở
   * góc). Cột phụ overflow:auto tự cắt phần dải nằm ngoài nó. */
  box-shadow: 0 -16px 0 0 var(--bg,#181527), 0 6px 14px -10px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}
.lg-companion[data-dock="rail"] .lg-companion-avatar-wrap { grid-area: cat; }
.lg-companion[data-dock="rail"] .lg-companion-restore { grid-area: cat; }
.lg-companion[data-dock="rail"] .lg-companion-hint { grid-area: hint; }
.lg-companion[data-dock="rail"] .lg-companion-bubble {
  grid-area: bubble;
  max-width: none;
  max-height: 38vh; /* thẻ sticky — bong bóng dài chiếm nửa cột phụ thì mục bên dưới không còn chỗ */
  box-shadow: none;
  background: rgba(32, 185, 185, 0.08);
}
/* Nút "▶ Làm tiếp" (kind 'next' — <a> DUY NHẤT trong hàng nút) trùng đúng
 * việc dòng chỉ đường ngay trên đã chỉ + nút tím của thẻ Hôm nay ⇒ ẩn ở rail. */
.lg-companion[data-dock="rail"] a.lg-companion-action { display: none; }
/* Thu nhỏ (×) trong cột phụ: chỉ còn ổ tròn + dòng chỉ đường, đệm gọn hơn.
 * 25/09 (chủ app, ảnh chụp): bản cũ BỎ khung (nền = nền trang, viền trong
 * suốt, góc vuông) ⇒ thẻ bên dưới cuộn khuất sau lưng mèo mà KHÔNG có ranh
 * giới — tiêu đề "BÀI TẬP VỀ NHÀ TỚI HẠN" bị cắt ngang như dính vào mèo.
 * Luật HUD: thẻ sticky đầu cột phụ LUÔN là một thẻ có khung + bóng đáy, kể
 * cả khi thu nhỏ (docs/HUD_RULEBOOK.md, mục 25/09). */
.lg-companion[data-dock="rail"][data-minimized="1"] {
  padding: 6px 10px;
  row-gap: 0;
}
.lg-companion-hint {
  pointer-events: auto;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 6px 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text,#EEEAF6);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.lg-companion-hint:hover { background: rgba(32, 185, 185, 0.12); }
.lg-companion-hint:focus-visible { outline: 2px solid #20B9B9; outline-offset: 2px; }

/* Đích mà dòng chỉ đường trỏ tới nháy viền 3 nhịp (logi.js#followHint gắn/gỡ
 * class). Viền outline không đổi bố cục. Giảm chuyển động ⇒ viền tĩnh. */
.lg-coach-flash {
  outline: 3px solid #20B9B9;
  outline-offset: 3px;
  border-radius: 12px;
}
@media (prefers-reduced-motion: no-preference) {
  .lg-coach-flash { animation: lg-coach-flash 0.55s ease-in-out 3; }
  @keyframes lg-coach-flash {
    0%, 100% { outline-color: rgba(32, 185, 185, 0.15); }
    50% { outline-color: #20B9B9; }
  }
}