/* Khung trò chuyện (features/chat.js): lời nhắn góc trái dưới, tự mờ dần; mở ra thì có ô nhập và cuộn xem lại */
#hud .chat { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
  width: min(360px, calc(100% - 190px)); display: flex; flex-direction: column; gap: 8px; }
#hud .chat .log { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow: hidden; padding: 6px;
  border-radius: 14px; border: 1px solid transparent; scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent;
  -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px);
  transition: background .25s, border-color .25s; }
#hud .chat .log:empty { display: none; }
#hud .chat .msg { align-self: flex-start; max-width: 100%; padding: 5px 10px; border-radius: 10px; background: rgba(20,12,6,.6);
  font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; animation: rise .3s var(--ease); transition: opacity 1.2s; }
#hud .chat .msg b { color: var(--gold); font-weight: 600; }
#hud .chat .msg .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
#hud .chat .msg.sys { background: none; color: var(--muted); font-size: 12.5px; font-style: italic; padding: 2px 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,.8); }
#hud .chat .msg.old { opacity: 0; }

#hud .chat.open .log { pointer-events: auto; overflow-y: auto; background: var(--glass); border-color: var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: none; mask-image: none; }
#hud .chat.open .msg { user-select: text; }
#hud .chat.open .msg.old { opacity: 1; transition: none; }

#hud .chat .bar { display: flex; gap: 6px; pointer-events: auto; align-self: flex-start; }
#hud .chat.open .bar { align-self: stretch; }
#hud .chat .bar button, #hud .chat .bar input { height: 42px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--glass); color: var(--text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#hud .chat .toggle { position: relative; width: 42px; flex: none; font-size: 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: border-color .2s, transform .15s var(--ease); }
#hud .chat .toggle:hover, #hud .chat.open .toggle { border-color: var(--gold); }
#hud .chat .toggle:active { transform: scale(.94); }
#hud .chat .toggle i { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #d9534f; color: #fff; font: 700 11px/18px system-ui, sans-serif; font-style: normal; animation: rise .25s var(--ease); }
#hud .chat input { flex: 1; min-width: 0; padding: 0 12px; font-size: 15px; user-select: text; animation: rise .22s var(--ease); }
#hud .chat input::placeholder { color: rgba(199,180,154,.7); }
#hud .chat input:focus { outline: none; border-color: var(--gold); }
#hud .chat .bar .sendBtn { padding: 0 16px; font-weight: 600; cursor: pointer; background: linear-gradient(#f0c35e, #c8902f);
  color: #2a1a08; border-color: transparent; animation: rise .22s var(--ease); }

/* Đang tụng kinh thì ẩn khung trò chuyện cho gọn */
#hud:has(.chant:not([hidden])) .chat { display: none; }

@media (max-width: 600px) {
  #hud .chat { left: 8px; bottom: calc(var(--bar-h) + max(8px, env(safe-area-inset-bottom)) + 10px); width: min(320px, calc(100% - 16px)); }
  #hud .chat .log { max-height: 150px; }
  #hud .chat .msg { font-size: 13px; }
  #hud:has(.panel:not([hidden])) .chat { display: none; }
  #hud:has(.tip:not([hidden]):not(.fade)) .chat .log { display: none; } /* hướng dẫn lúc mới vào nằm đúng chỗ này */
}