/* Independent text conversation. The game-specific corner sets the anchor; no global button/layout overrides. */
.mchat-toggle {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: max(.08rem, 4px);
  min-width: max(1.05rem, 76px); min-height: max(.48rem, 34px); padding: .06rem .12rem; flex: none;
  background: rgba(8, 16, 13, .96); border: 1px solid var(--mint-700); border-radius: .04rem;
  color: var(--mint-400); font-size: max(calc(.16 * var(--t)), 12px); font-weight: 700; line-height: 1.2;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.mchat-toggle .icon { flex: none; width: max(.24rem, 17px); height: max(.24rem, 17px); }
.mchat-toggle:hover, .mchat-toggle.is-open { background: rgba(28, 62, 48, .98); border-color: var(--mint-400); }
.mchat-toggle:focus-visible, .mchat-panel button:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 3px; }
.mchat-toggle__badge {
  position: absolute; right: -.05rem; top: -.09rem; min-width: max(.21rem, 17px); padding: .02rem .04rem;
  border: 1px solid #111a15; border-radius: 10px; background: var(--mint-400); color: #092015;
  font-size: max(calc(.11 * var(--t)), 10px); line-height: 1.2; text-align: center;
}
.mchat-panel {
  position: fixed; z-index: 75; left: var(--mchat-left, max(.24rem, var(--sa-l, 0px)));
  bottom: var(--mchat-bottom, max(1.64rem, 90px)); width: min(max(5rem, 360px), calc(100vw - 24px));
  max-height: min(5.35rem, calc(100vh - var(--mchat-bottom, max(1.64rem, 90px)) - max(.2rem, 10px) - var(--sa-t, 0px)));
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border: 1px solid var(--mint-700); border-radius: .05rem; background: rgba(8, 15, 12, .98);
  box-shadow: 0 .1rem .32rem rgba(0, 0, 0, .62); color: var(--text-hi); pointer-events: auto;
}
@supports (height: 100dvh) {
  .mchat-panel { max-height: min(5.35rem, calc(100dvh - var(--mchat-bottom, max(1.64rem, 90px)) - max(.2rem, 10px) - var(--sa-t, 0px))); }
}
.mchat-panel__head {
  display: flex; flex: none; align-items: center; justify-content: space-between; gap: .1rem; padding: max(.06rem, 4px) max(.12rem, 8px);
  border-bottom: 1px solid var(--mint-900); background: rgba(35, 67, 52, .36);
}
.mchat-panel__head > b { display: flex; align-items: center; gap: .08rem; font-size: max(calc(.18 * var(--t)), 12px); }
.mchat-panel__head .icon { width: max(.23rem, 16px); height: max(.23rem, 16px); color: var(--mint-400); }
.mchat-panel__close {
  display: grid; place-items: center; flex: none; width: max(.32rem, 28px); height: max(.32rem, 28px);
  border: 1px solid var(--line-2); background: rgba(4, 10, 7, .85); color: var(--text-md); font-size: 22px;
}
.mchat-panel__messages {
  flex: 1 1 auto; min-height: 44px; min-height: min(1.05rem, 54px); overflow: auto; overscroll-behavior: contain;
  padding: max(.06rem, 5px) max(.12rem, 8px); scrollbar-width: thin; user-select: text; -webkit-user-select: text;
}
.mchat-line { margin-bottom: max(.08rem, 5px); font-size: max(calc(.15 * var(--t)), 11px); line-height: 1.34; }
.mchat-line__who { display: flex; align-items: center; gap: max(.04rem, 3px); min-width: 0; }
.mchat-line__avatar { --pa: max(.3rem, 22px); }
.mchat-line__group {
  display: inline-grid; place-items: center; flex: none; min-width: max(.18rem, 14px); height: max(.18rem, 14px); padding: 0 .025rem;
  color: #0b1520; background: var(--pool-group-color); border: 1px solid rgba(8, 11, 10, .65);
  font-family: var(--font-num); font-size: max(.11rem, 9px); font-weight: 700; line-height: 1;
}
.mchat-line__who > b { min-width: 0; overflow-wrap: anywhere; color: var(--mint-500); font-size: max(calc(.12 * var(--t)), 10px); }
.mchat-line__seat { flex: none; font-size: max(calc(.10 * var(--t)), 9px); color: var(--text-dim); }
.mchat-line.is-spectator .mchat-line__who > b { color: var(--ice); }
.mchat-line > p { margin: max(.01rem, 1px) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mchat-panel__empty { margin: max(.25rem, 12px) 0; color: var(--text-dim); text-align: center; font-size: max(calc(.15 * var(--t)), 12px); }
.mchat-panel__foot { flex: none; padding: max(.06rem, 5px) max(.12rem, 8px); border-top: 1px solid var(--mint-900); }
.mchat-panel__compose { display: flex; align-items: stretch; gap: max(.08rem, 5px); }
.mchat-panel__compose textarea {
  display: block; flex: 1 1 auto; min-width: 0; height: max(.58rem, 40px); resize: none;
  padding: max(.06rem, 5px) max(.08rem, 6px); border: 1px solid var(--line-2); border-radius: .03rem;
  background: #070d0a; color: var(--text-hi); font: inherit; font-size: max(calc(.15 * var(--t)), 11px); line-height: 1.3;
  user-select: text; -webkit-user-select: text;
}
.mchat-panel__compose textarea:focus { outline: 1px solid var(--mint-500); border-color: var(--mint-500); }
.mchat-panel__send {
  min-width: max(.62rem, 46px); padding: .06rem .08rem; border: 1px solid var(--mint-600); border-radius: .03rem;
  background: var(--mint-900); color: var(--mint-400); font-size: max(calc(.14 * var(--t)), 11px); font-weight: 700;
}
.mchat-panel__send:disabled { opacity: .45; cursor: not-allowed; }
.mchat-panel__hint { display: flex; justify-content: space-between; gap: .08rem; margin-top: max(.05rem, 3px); color: var(--text-dim); font-size: max(calc(.10 * var(--t)), 9px); }
.mchat-panel__hint .is-over { color: var(--red); }
.mchat-panel__latest { padding: max(.06rem, 4px); flex: none; background: var(--mint-900); border: 0; border-top: 1px solid var(--mint-700); color: var(--mint-400); font-size: max(calc(.12 * var(--t)), 11px); }
.sp-coarse .mchat-toggle { min-height: 44px; }
.sp-coarse .mchat-panel__compose textarea { font-size: max(calc(.16 * var(--t)), 16px); }
/* Preserve the original bottom row. Only the independent chat entry occupies a new row above its emote column. */
.gm.has-chat {
  --chat-entry-height: max(.48rem, 34px); --chat-gear-height: .56rem;
  --chat-corner-top: calc(.34rem + max(1.51rem, 72px) * 55 / 151 + var(--chat-entry-height));
}
.sp-coarse .gm.has-chat { --chat-entry-height: max(.48rem, 44px); }
.gm.has-chat .gm__corner {
  display: grid; grid-template-columns: max(1.51rem, 72px) repeat(3, .56rem);
  grid-template-areas: "chat . . ." "emote gear guide fs"; gap: .1rem; align-items: end; width: auto;
}
.gm.has-chat .gm__chat { grid-area: chat; min-width: 0; width: 100%; }
.gm.has-chat .gm__corner > .ewheel { grid-area: emote; }
.gm.has-chat .gm__corner > .gm__gear:not(.gm__guide):not(.gm__fs):not(.gm__metrics) { grid-area: gear; }
.gm.has-chat .gm__corner > .gm__guide { grid-area: guide; }
.gm.has-chat .gm__corner > .gm__fs { grid-area: fs; }
/* An open original emote panel must leave the independent chat entry clickable. */
.gm.has-chat .ewheel__panel { bottom: calc(100% + .22rem + var(--chat-entry-height)); }
.gm.has-chat .team--many { bottom: calc(var(--chat-corner-top) + .16rem); }
.gm.has-chat .dpanel:not(.dpanel--right) { bottom: calc(var(--chat-corner-top) + .14rem); }
.gm.has-chat.is-spectator .gm__corner {
  grid-template-columns: repeat(3, .56rem); grid-template-areas: "chat chat chat" "gear guide fs";
}
.mchat-away-entry { position: fixed; z-index: 75; left: max(.24rem, var(--sa-l, 0px)); bottom: max(.24rem, var(--sa-b, 0px)); }
.mchat-brief-entry { margin-right: auto; }
.mchat-draft-entry { width: 100%; }
@media (max-height: 600px) and (pointer: coarse), (max-height: 600px) and (any-pointer: coarse) {
  .gm.has-chat { --chat-corner-top: calc(.34rem + max(1.51rem, 96px) * 55 / 151 + 44px); }
  .gm.has-chat { --chat-gear-height: max(.56rem, 34px); }
  .gm.has-chat .gm__corner { grid-template-columns: max(1.51rem, 96px) repeat(3, max(.56rem, 34px)); }
  .gm.has-chat.is-spectator .gm__corner { grid-template-columns: repeat(3, max(.56rem, 34px)); }
}
@media (max-width: 767px) {
  .gm.has-chat { --chat-corner-top: calc(.44rem + max(1.51rem, 72px) * 55 / 151 + .56rem + max(.48rem, 34px)); }
  .gm.has-chat .gm__corner {
    grid-template-columns: repeat(3, .56rem); grid-template-areas: "chat chat chat" "gear guide fs" "emote emote emote";
    width: max(72px, calc(3 * .56rem + .2rem));
  }
  .gm.has-chat .gm__corner > .ewheel { width: max-content; }
  .gm.has-chat .ewheel__panel { bottom: calc(100% + .32rem + var(--chat-entry-height) + var(--chat-gear-height)); }
  .gm.has-chat.is-spectator .gm__corner { grid-template-areas: "chat chat chat" "gear guide fs"; }
}
@media (max-width: 767px) and (pointer: coarse), (max-width: 767px) and (any-pointer: coarse) {
  .gm.has-chat { --chat-corner-top: calc(.44rem + max(1.51rem, 96px) * 55 / 151 + max(.56rem, 34px) + 44px); }
  .gm.has-chat .gm__corner { grid-template-columns: repeat(3, max(.56rem, 34px)); width: max(96px, calc(3 * max(.56rem, 34px) + .2rem)); }
}
/* Folding the shop restores its original single bottom row on narrow screens. Keeping three rows here would
   reserve more board height than the open shop, making the folded camera shrink rather than grow. */
@media (max-width: 767px) {
  .gm.has-chat.is-collapsed { --chat-corner-top: calc(.34rem + max(1.51rem, 72px) * 55 / 151 + var(--chat-entry-height)); }
  .gm.has-chat.is-collapsed .gm__corner {
    grid-template-columns: max(1.51rem, 72px) repeat(3, .56rem);
    grid-template-areas: "chat . . ." "emote gear guide fs"; width: auto;
  }
  .gm.has-chat.is-collapsed .ewheel__panel { bottom: calc(100% + .22rem + var(--chat-entry-height)); }
}
@media (max-width: 767px) and (pointer: coarse), (max-width: 767px) and (any-pointer: coarse) {
  .gm.has-chat.is-collapsed { --chat-corner-top: calc(.34rem + max(1.51rem, 96px) * 55 / 151 + var(--chat-entry-height)); }
  .gm.has-chat.is-collapsed .gm__corner { grid-template-columns: max(1.51rem, 96px) repeat(3, max(.56rem, 34px)); }
}
@media (max-height: 460px) {
  .mchat-panel { width: min(360px, calc(100vw - 24px)); }
  .mchat-panel__head { padding-top: 4px; padding-bottom: 4px; }
  .mchat-panel__foot { padding-top: 5px; padding-bottom: 5px; }
}

/* Combat stats must never share the settings cell. Use the spare chat-row cell,
   preserving the corner height, touch targets and the narrow three-column HUD. */
.gm.has-chat .gm__corner > .gm__metrics { grid-area: metrics; }
.gm.has-chat .gm__corner:has(> .gm__metrics) {
  grid-template-areas: "chat metrics . ." "emote gear guide fs";
}
@media (max-width: 767px) {
  .gm.has-chat:not(.is-collapsed) .gm__corner:has(> .gm__metrics) {
    grid-template-areas: "chat chat metrics" "gear guide fs" "emote emote emote";
  }
}

/* Floating entry: 48 CSS-pixel touch target, no chat content in storage. */
.mchat-toggle { position:fixed; z-index:90; width:48px; height:48px; min-width:48px; min-height:48px; padding:0; border-radius:50%; touch-action:none; user-select:none; cursor:grab; box-shadow:0 3px 16px #0008; }
.mchat-toggle > span { display:none; }
.mchat-toggle:active { cursor:grabbing; }