/* match chat (src/ui/chat.js): bottom left over the board, above the Tactical Read's button; the lines read over any
   arena by their shadow, and fade when the box is closed; open, a glass panel with the line to type under them */
.chatBox{position:absolute;left:.625rem;bottom:calc(var(--shopH) + 3.5rem);z-index:6;width:min(24rem,42vw);display:flex;flex-direction:column;align-items:flex-start;gap:.3125rem;pointer-events:none}
.chatLog{width:100%;max-height:8.5rem;overflow:hidden;display:flex;flex-direction:column;gap:.125rem;padding:.25rem .375rem;border-radius:.625rem}
.chatRow{align-self:flex-start;max-width:100%;padding:.0625rem .4375rem;border-radius:.3125rem;background:rgba(6,9,20,.62);font-size:.8125rem;line-height:1.35;color:var(--fg);text-shadow:0 1px 2px #000;overflow-wrap:anywhere;transition:opacity .6s}   /* (a dark backing a line, so it reads over the bright arenas too) */
.chatBox.open .chatRow{background:none;padding-left:0}
.chatRow.old{opacity:0}
.chatRow.gone{display:none}
.chatName{font-weight:700;color:#9fd2ff}
.chatRow.me .chatName{color:var(--gold)}
.chatRow.sys{color:var(--dim);font-style:italic}
.chatRow.sys.hint{color:#cfd6f5}
.chatRow.sys.warn{color:#ffd27a}
.chatRow.sys.bad{color:#ff9c8f}
.chatBox.open .chatLog{max-height:12rem;overflow-y:auto;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:auto;scrollbar-width:thin}
.chatBox.open .chatRow.old{opacity:1}
.chatBox.open .chatName[title]{cursor:pointer}
.chatBox.open .chatName[title]:hover{text-decoration:underline}
.chatLine{display:flex;gap:.375rem;width:100%;pointer-events:auto}
.chatIn{flex:1;min-width:0;padding:.4375rem .625rem;border-radius:.5rem;border:1px solid var(--line);background:rgba(8,10,20,.92);color:var(--fg);font:inherit;font-size:.8125rem}
.chatIn:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.chatOff{flex:none;width:2.125rem;border-radius:.5rem;border:1px solid var(--line);background:rgba(8,10,20,.92);color:var(--fg);font-size:.875rem;cursor:pointer}
.chatOff:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}
.chatBtn{display:none;pointer-events:auto;width:2.25rem;height:2.25rem;border-radius:50%;border:1px solid var(--line);background:var(--glass);font-size:1rem;cursor:pointer}
@media (hover:none) and (pointer:coarse){.chatBtn{display:block}}   /* a touch screen has no Enter: 💬 opens the line */
#app.mode-combat .chatBox:not(.open) .chatLog{opacity:.85}
#app.duel .chatBox,#app.mission .chatBox{display:none}   /* a Clash, a recruitment or a mission holds the keys and the bottom of the screen: the box steps aside (its lines wait for Enter after) */
@media (max-width:760px){.chatBox{left:.375rem;bottom:calc(var(--shopH) + 3rem);width:min(20rem,calc(100% - 4.5rem))}.chatLog{max-height:6rem}.chatRow{font-size:.75rem}.chatBox.open .chatLog{max-height:9rem}}
@media (prefers-reduced-motion:reduce){.chatRow{transition:none}}
/* the game's community notice (chat.js communityNote, once a casual match): a system line with small buttons, clickable
   while it shows even with the box closed (the box itself lets clicks through to the board) */
.chatRow.community{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .375rem;color:#cfd6f5;font-style:normal}
.chatRow.community:not(.old){pointer-events:auto}
.chatNoteBtn{padding:.0625rem .4375rem;border-radius:.3125rem;border:1px solid var(--line);background:rgba(8,10,20,.92);color:var(--fg);font:inherit;font-size:.75rem;cursor:pointer}
.chatNoteBtn.x{padding:.0625rem .375rem}
.chatNoteBtn:hover{border-color:var(--gold)}
.chatNoteBtn:focus-visible{outline:.125rem solid #3fd6ff;outline-offset:.125rem}