/* Text chat (local addition, ui/chat.js): the room screen's left column, the match's panel and its fading overlay. */

.chat {
  display: flex; flex-direction: column; min-height: 0;
  background: rgba(8, 11, 10, .97); border: 1px solid var(--line-2);
}
.chat__head {
  flex: none; display: flex; align-items: center; gap: .08rem; min-height: .56rem; padding: 0 .1rem 0 .18rem;
  border-bottom: 1px solid var(--line-2);
}
.chat__title { flex: 1; color: var(--mint-400); font-weight: 700; font-size: calc(.2 * var(--t)); letter-spacing: .04em; }
.chat__icon {
  width: .44rem; height: .44rem; display: grid; place-items: center; color: var(--text-lo);
  border: 1px solid transparent; transition: color var(--t-fast), border-color var(--t-fast);
}
.chat__icon .icon { width: .26rem; height: .26rem; }
.chat__icon:hover { color: var(--mint-400); border-color: var(--line-2); }
.chat__icon[aria-pressed="true"] { color: var(--mint-400); border-color: var(--line-2); }

.chat__log {
  flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: .12rem .18rem; list-style: none;
  display: flex; flex-direction: column; gap: .06rem; font-size: calc(.18 * var(--t)); line-height: 1.4;
}
.chat__empty { color: var(--text-dim); }
.chat__line { overflow-wrap: anywhere; color: var(--text-hi); }
.chat__name { color: var(--mint-400); font-weight: 700; margin-right: .08rem; }
.chat__line.is-me .chat__name { color: var(--amber); }

.chat__form { flex: none; display: flex; gap: .08rem; padding: .12rem; border-top: 1px solid var(--line-2); }
.chat__input {
  flex: 1; min-width: 0; height: .48rem; padding: 0 .12rem; font: inherit; font-size: calc(.18 * var(--t)); color: var(--text-hi);
  background: rgba(0, 0, 0, .45); border: 1px solid var(--line-2); outline: none;
}
.chat__input:focus { border-color: var(--mint-600); }
.chat__send {
  flex: none; height: .48rem; padding: 0 .18rem; font-size: calc(.18 * var(--t)); color: var(--text-md);
  background: rgba(0, 0, 0, .45); border: 1px solid var(--line-2);
}
.chat__send:not(:disabled):hover { color: var(--mint-400); border-color: var(--mint-700); }
.chat__send:disabled { color: var(--text-dim); }

/* room: a column left of the seats */
.room-body { flex: 1; min-height: 0; display: flex; align-items: stretch; padding-left: .3rem; }
.room-body > .seats { flex: 1; min-width: 0; }
.chat--room { width: 3.6rem; flex: none; margin: .3rem 0 .24rem; }

/* match: a panel above the bottom-left buttons; the overlay shows the newest lines while it is closed */
.chat--game { position: absolute; left: .24rem; bottom: .92rem; z-index: 30; width: 4.6rem; height: 4.4rem; }
.chat-overlay {
  position: absolute; left: .24rem; bottom: .92rem; z-index: 20; width: 5.2rem; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .04rem; pointer-events: none; font-size: calc(.18 * var(--t)); line-height: 1.4;
}
.chat-overlay .chat__line {
  align-self: flex-start; max-width: 100%; padding: .04rem .12rem; background: rgba(8, 11, 10, .72);
}
.gm__chat.is-on { color: var(--mint-400); border-color: var(--mint-700); }

/* briefing / strategy draft / result: the button fixed bottom-left (FloatingChat) */
.chat-float { position: fixed; left: .24rem; bottom: .24rem; z-index: 60; }
.chat-float .chat--game, .chat-float .chat-overlay { left: 0; bottom: .68rem; }
.chat-float .gm__chat { position: relative; }