/* 聊天 (ui/chat.js, a remake feature): the chat button on the left edge and the panel beside it, over the room and the
   match. Sized like the rest of the HUD in rem (the layout root) with the text on --t (theme.css 文字大小). */
.chat-host { position: fixed; z-index: 60; left: max(.08rem, env(safe-area-inset-left)); top: 34%; pointer-events: none; }
.chat-fab {
  pointer-events: auto; position: relative; display: grid; place-items: center;
  width: max(.46rem, 34px); height: max(.46rem, 34px); padding: 0; border: 1px solid rgba(246, 163, 41, .55);
  background: var(--bg-glass); color: var(--amber); font-size: max(.24rem, 18px); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45); transition: background 120ms, color 120ms;
}
.chat-fab:hover, .chat-fab.is-open { background: var(--amber); color: #111; }
.chat-fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chat-fab__badge {
  position: absolute; top: -.07rem; right: -.09rem; min-width: max(.2rem, 16px); height: max(.2rem, 16px); padding: 0 .04rem;
  border-radius: 999px; background: #e73118; color: #fff; font: 700 max(calc(.12 * var(--t)), 11px)/max(.2rem, 16px) var(--font-num, sans-serif);
  text-align: center; box-shadow: 0 0 0 2px var(--bg-0);
}
.chat-panel {
  pointer-events: auto; position: absolute; left: calc(max(.46rem, 34px) + .08rem); top: max(-1.6rem, -26vh);
  width: min(4.4rem, 78vw, 420px); height: min(4.2rem, 62vh, 460px); display: flex; flex-direction: column;
  background: rgba(14, 17, 16, .94); border: 1px solid rgba(246, 163, 41, .4); box-shadow: 0 6px 24px rgba(0, 0, 0, .6);
  font-size: max(calc(.16 * var(--t)), 13px); color: #e7ece9;
}
.chat-panel__head { display: flex; align-items: center; justify-content: space-between; gap: .08rem; padding: .06rem .1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(246, 163, 41, .1); }
.chat-panel__title { display: inline-flex; align-items: center; gap: .08rem; font-weight: 700; letter-spacing: .06em; color: var(--amber); }
.chat-panel__close { display: grid; place-items: center; width: max(.32rem, 28px); height: max(.32rem, 28px); padding: 0; border: 0;
  background: transparent; color: #aab3af; font-size: 1.1em; cursor: pointer; }
.chat-panel__close:hover { color: #fff; }
.chat-panel__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: .08rem .1rem; list-style: none;
  display: flex; flex-direction: column; gap: .07rem; overscroll-behavior: contain; scrollbar-width: thin; }
.chat-panel__empty { margin: auto; color: #8a938f; text-align: center; font-size: .92em; }
.chat-line { display: flex; flex-direction: column; gap: .02rem; padding: .04rem .07rem; background: rgba(255, 255, 255, .04);
  border-left: 2px solid rgba(255, 255, 255, .12); overflow-wrap: anywhere; }
.chat-line.is-self { border-left-color: var(--amber); background: rgba(246, 163, 41, .08); }
.chat-line__meta { display: flex; align-items: baseline; gap: .06rem; font-size: .84em; }
.chat-line__name { color: hsl(var(--seat-hue, 0), 70%, 66%); font-weight: 700; }
.chat-line__tag { padding: 0 .03rem; border: 1px solid #6c7672; color: #a5aeaa; font-size: .9em; }
.chat-line__time { margin-left: auto; color: #6f7874; font-family: var(--font-num, sans-serif); }
.chat-line__text { white-space: pre-wrap; line-height: 1.35; }
.chat-panel__form { display: flex; gap: .06rem; padding: .07rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.chat-panel__input { flex: 1 1 auto; min-width: 0; height: max(.4rem, 32px); padding: 0 .08rem; border: 1px solid #3a4440;
  background: #0b0e0d; color: #fff; font: inherit; font-size: max(1em, 16px); /* ≥ 16px: iOS does not zoom into the field */ }
.chat-panel__input:focus { outline: none; border-color: var(--amber); }
.chat-panel__send { display: grid; place-items: center; width: max(.44rem, 36px); border: 0; background: var(--amber); color: #111;
  font-size: 1.15em; cursor: pointer; }
.chat-panel__send:disabled { opacity: .4; cursor: default; }
/* in a match the button sits in the bottom-left tool row (screens/game.js .gm__corner, .56rem buttons at .24rem from
   the edges): the panel opens upwards from just above that row, clear of the team panel's top */
.gm__chat { position: relative; color: var(--amber); }
.gm__chat.is-open { color: #111; background: var(--amber); border-color: var(--amber); }
.chat-host--game { top: auto; left: .24rem; bottom: calc(.24rem + .56rem + .1rem); }
.chat-host--game .chat-panel { left: 0; top: auto; bottom: 0; height: min(4.2rem, calc(100vh - .24rem - .56rem - .1rem - .9rem), 460px); }
/* a short landscape phone: the panel takes the left part of the screen from the top */
@media (max-height: 500px) {
  .chat-host { top: 30%; }
  .chat-panel { top: max(-1.4rem, -24vh); height: min(80vh, 4.6rem); }
}
@media (prefers-reduced-motion: reduce) { .chat-fab { transition: none; } }