/* Chat deliberately uses familiar meeting controls. Keep these overrides inside
   the chat panel so the world's hologram controls and video docking stay intact. */
#game #chatPanel {
  --chat-line: #32445a;
  --chat-muted: #b4c3d5;
  background: #101f30 !important;
  border: 1px solid #486078 !important;
  border-radius: 10px !important;
  clip-path: none !important;
  box-shadow: 0 12px 36px #0006 !important;
  color: #edf4fc;
  font-family: Inter, system-ui, sans-serif;
}
#game:not(.mobile):not(.sidechat) #chatPanel {
  width: min(380px, calc(100vw - 28px));
  height: min(500px, calc(100dvh - 100px));
}
#game #chatPanel button {
  clip-path: none !important;
  border-radius: 6px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #c6dcf5 !important;
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  filter: none;
  cursor: pointer;
}
#game #chatPanel button:hover { background: #ffffff0e !important; }
#game #chatPanel button:focus-visible,
#game #chatPanel input:focus-visible {
  outline: 2px solid #99ceff !important;
  outline-offset: -2px !important;
}
#game #chatPanel .ch-head {
  min-height: 60px;
  flex: 0 0 auto;
  padding: 8px 12px 8px 18px;
  border-bottom: 1px solid var(--chat-line);
  background: transparent;
  gap: 12px;
}
#game #chatPanel .ch-head b {
  color: #f4f8ff;
  font: 600 16px/1.4 Inter, system-ui, sans-serif;
  letter-spacing: normal;
}
#game #chatClose {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #e4edf8 !important;
  font: 400 28px/1 Inter, system-ui, sans-serif;
}
#game #chatMsgs {
  min-height: 0;
  gap: 20px;
  padding: 18px;
  font-size: 14px;
  overscroll-behavior: contain;
  scrollbar-color: #4a6078 transparent;
  scrollbar-width: thin;
}
#game #chatPanel .cm {
  display: flex;
  align-items: flex-start;
  flex: 0 0 auto;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #eaf0f8;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* Preserve the host-only channel filter while using flex message rows. */
#game #chatMsgs[data-view="team"] .cm:not(.cm-team),
#game #chatMsgs:not([data-view="team"]) .cm-team { display: none; }
#game #chatPanel .cm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  margin: 1px 0 0;
  border-radius: 50%;
  background: #2d4661;
  color: #e2edfb;
  font-size: 11px;
  font-weight: 600;
}
#game #chatPanel .cm-content { flex: 1; min-width: 0; }
#game #chatPanel .cm-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 7px;
  margin-bottom: 3px;
  line-height: 1.4;
}
#game #chatPanel .nm { margin: 0; color: #f1f6fe; font-size: 13px; font-weight: 600; }
#game #chatPanel .bd { margin: 0; font-size: 11px; }
#game #chatPanel .staffb { padding: 1px 5px; background: #164c4b; color: #beede3; }
#game #chatPanel .cm-pv { margin: 0; font-size: 10px; color: var(--chat-muted); letter-spacing: .03em; }
#game #chatPanel .cm-body { white-space: pre-wrap; overflow-wrap: anywhere; }
#game #chatPanel .cm-body a { color: #a8d5ff; text-underline-offset: 3px; }
#game #chatPanel .cm-actions { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
#game #chatPanel .cm-actions:empty { display: none; }
#game #chatPanel :is(.cm-r, .cm-pr, .cm-x) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  gap: 4px;
  min-height: 28px;
  min-width: 28px;
  margin: 0 0 0 -5px;
  padding: 4px 5px;
  opacity: 1;
  color: var(--chat-muted) !important;
  font: 500 12px/1.4 Inter, system-ui, sans-serif;
}
#game #chatPanel .cm-x { margin-left: auto; }
#game #chatPanel .cm-x[data-armed="1"] { color: #ffb5b5 !important; }
#game #chatPanel .cm-q {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 8px 0;
  padding: 7px 10px;
  border-left: 2px solid #789cbd !important;
  border-radius: 0 !important;
  background: #ffffff06 !important;
  color: var(--chat-muted) !important;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  font: 400 12px/1.5 Inter, system-ui, sans-serif;
}
#game #chatPanel .cm-q b { display: block; margin: 0 0 2px; font-weight: 600; color: #d7e4f4; }
#game #chatPanel .cm.cm-hit { background: #9fcfff15; box-shadow: 0 0 0 6px #9fcfff15; }
#game #chatPanel #chatTabs { padding: 4px 12px; gap: 4px; border-bottom: 1px solid var(--chat-line); }
#game #chatPanel #chatTabs button { min-height: 36px; padding: 6px 10px; font-size: 12px; }
#game #chatPanel #chatTabs button[aria-pressed="true"] { background: #304b69 !important; color: #fff !important; }
#game #chatReply {
  flex: 0 0 auto;
  margin: 0 14px;
  padding: 8px 0;
  border-top: 1px solid var(--chat-line);
  background: transparent;
  color: var(--chat-muted);
  font: 400 12px/1.5 Inter, system-ui, sans-serif;
}
#game #chatReply .cr-t { white-space: normal; overflow-wrap: anywhere; }
#game #chatReply .cr-x { width: 36px; height: 36px; padding: 0; opacity: 1; }
#game #chatForm {
  flex: 0 0 auto;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--chat-line);
  align-items: center;
  background: transparent;
}
#game #chatInput {
  width: 0;
  min-width: 0;
  height: 44px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid #51657d !important;
  border-radius: 6px !important;
  background: #0a1726 !important;
  color: #edf4fc !important;
  font: 400 14px/1.4 Inter, system-ui, sans-serif;
}
#game #chatInput::placeholder { color: #a3b4c8; opacity: 1; }
#game #chatForm > button {
  min-height: 44px;
  flex: 0 0 auto;
  padding: 10px 16px;
  background: #346ca8 !important;
  color: #fff !important;
  font: 600 13px/1.4 Inter, system-ui, sans-serif;
}
#game #chatForm > button:hover { background: #407ebf !important; }
#game #chatJump { background: #345a7e !important; color: #fff !important; padding: 7px 12px; bottom: 78px; font-size: 12px; }
#game.mobile #chatPanel { width: auto; height: min(54dvh, 480px); border-radius: 10px 10px 0 0 !important; }
#game.mobile #chatPanel .ch-head { min-height: 56px; }
#game.mobile #chatMsgs { padding: 14px 16px; gap: 16px; }
#game.mobile #chatPanel :is(.cm-r, .cm-pr, .cm-x) { min-height: 36px; min-width: 36px; }
#game.mobile #chatForm { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
#game.sidechat #chatPanel { width: var(--wwchatw); height: auto; border-radius: 0 !important; }
#game.mwatch.chatopen #chatPanel { width: auto; height: auto; border-radius: 0 !important; }
@media (orientation: landscape) and (max-height: 500px) {
  #game.mobile:not(.mwatch) #chatPanel { width: min(360px, 46vw); height: auto; border-radius: 0 !important; }
}