.chatbox {
  position: absolute; z-index: 16; right: 12px; bottom: 0;
  width: 360px; max-width: calc(100% - 16px); height: 415px;
  display: flex; flex-direction: column; overflow: hidden;
  border: 2px solid #0055e5e0; border-bottom: 0; border-radius: 7px 7px 0 0;
  background: #ece9d8d1; box-shadow: 3px 4px 10px #00225555;
  backdrop-filter: blur(3px); font-family: Tahoma, sans-serif; color: #111;
}
.chatbox-titlebar {
  flex: 0 0 25px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 3px 0 7px; background: linear-gradient(90deg, #0058e6f2, #3b8cfff2 55%, #0056dcf2);
  color: #fff; font-size: 11px; text-shadow: 1px 1px #173a88;
  cursor: move; user-select: none; touch-action: none;
}
.chatbox-titlebar .window-title { min-width: 0; gap: 5px; }
.chatbox-title-icon { width: 18px; height: 18px; object-fit: contain; }
.chatbox-titlebar strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chatbox-titlebar-right { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
#chat-online { font-size: 10px; text-shadow: none; white-space: nowrap; }
.chatbox.is-awaiting-nickname #chat-online { visibility: hidden; }
.chatbox.is-awaiting-nickname .chat-conversation-view {
  filter: blur(3px); opacity: 0.72; pointer-events: none; user-select: none;
}
.chat-join-view {
  position: absolute; inset: 25px 0 0; z-index: 2;
  display: grid; place-items: center; padding: 24px 14px;
  background: transparent;
}
.chat-join-view[hidden] { display: none; }
.chat-join-form { width: min(230px, 100%); text-align: center; }
.chat-join-form label {
  display: block; margin: 0 0 8px; color: #111; font-size: 12px; font-weight: 700;
  text-shadow: 0 1px 2px #fff, 1px 0 2px #fff, -1px 0 2px #fff, 0 -1px 2px #fff;
}
#chat-nickname-input {
  box-sizing: border-box; width: 100%; height: 27px; padding: 3px 6px;
  border: 2px inset #ece9d8; border-radius: 0; outline-offset: 2px;
  background: #fff; color: #111; caret-color: #111; font: 11px Tahoma, sans-serif;
}
#chat-nickname-input::placeholder { color: #555; opacity: 1; }
.chat-join-feedback {
  margin: 8px 0 0; color: #8b0000; font-size: 11px; line-height: 1.35;
  text-shadow: 0 1px 2px #fff, 1px 0 2px #fff, -1px 0 2px #fff;
}
#chat-join-button {
  min-width: 88px; height: 26px; margin-top: 12px; padding: 0 12px;
  border: 2px outset #ece9d8; border-radius: 0; background: #ece9d8;
  color: #111; font: 11px Tahoma, sans-serif;
}
#chat-join-button:active { border-style: inset; }
#chat-join-button:disabled { color: #666; cursor: default; }
.chat-conversation-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr); }
.chat-channels { padding: 3px 0; border-right: 2px inset #ece9d8; background: #f6f5f099; }
.chat-channels button {
  display: block; width: 100%; padding: 4px 6px; border: 0; background: transparent;
  color: #222; text-align: left; font: 11px Tahoma, sans-serif;
}
.chat-channels button:hover { background: #dce8fac7; }
.chat-channels button.active { background: #ffffffd1; color: #0641b7; font-weight: 700; box-shadow: inset 1px 1px #8d8a80; }
.chat-messages {
  min-width: 0; overflow-y: auto; padding: 4px 6px; background: #ffffffc2;
  scrollbar-width: thin; scrollbar-color: #b7b3a8 #ece9d8;
}
.chat-empty { margin: 12px 4px; color: #444; font-size: 11px; line-height: 1.45; text-align: center; }
.chat-message { margin: 0 0 6px; font-size: 11px; line-height: 1.3; }
.chat-message-meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.chat-message-meta time { flex: 0 0 auto; color: #4b4b4b; font-size: 10px; }
.chat-message-meta strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #17479d; white-space: nowrap; }
.chat-message-text { margin: 1px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
#chat-feedback { flex: 0 0 auto; margin: 0; padding: 3px 6px; background: #ffffe1eb; color: #8b0000; font-size: 11px; }
.chat-composer {
  flex: 0 0 34px; display: grid; grid-template-columns: minmax(0, 1fr) 61px; gap: 5px;
  padding: 4px; border-top: 2px groove #ece9d8; background: #ece9d899;
}
#chat-message-input {
  min-width: 0; height: 25px; padding: 3px 5px; border: 2px inset #ece9d8;
  border-radius: 0; background: #ffffffe0; color: #111; font: 11px Tahoma, sans-serif;
}
#chat-message-input::placeholder { color: #555; opacity: 1; }
#chat-send-button {
  height: 25px; padding: 0 6px; border: 2px outset #ece9d8; border-radius: 0;
  background: #ece9d8; color: #111; font: 11px Tahoma, sans-serif;
}
#chat-send-button:active { border-style: inset; }
#chat-send-button:disabled { color: #666; cursor: default; }

@media (max-width: 560px) {
  .chatbox { right: 0; height: 280px; }
}
@media (max-height: 700px) and (min-width: 561px) {
  .chatbox { height: 340px; }
}