/* MSN-style public chat */
.msn-window {
  width: 340px;
  height: 420px;
}

.msn-window .xp-title-text::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  background: url("/assets/vista_messenger.ico") center/contain no-repeat;
}

.msn-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  background: #fff !important;
}

.msn-chat-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.msn-chat-stage:not(.joined) .msn-messages,
.msn-chat-stage:not(.joined) .msn-compose {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}

.msn-join-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 233, 216, 0.45);
}

.msn-chat-stage.joined .msn-join-overlay {
  display: none;
}

.msn-join-box {
  width: 220px;
  padding: 14px 16px;
  background: #ece9d8;
  border: 1px solid #fff;
  border-right-color: #404040;
  border-bottom-color: #404040;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
}

.msn-join-box label {
  display: block;
  font: 11px Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
  color: #000;
  margin-bottom: 6px;
}

.msn-join-box input {
  width: 100%;
  box-sizing: border-box;
  height: 22px;
  padding: 2px 4px;
  margin-bottom: 10px;
  border: 1px solid #7f9db9;
  font: 11px Tahoma, "Segoe UI", sans-serif;
  background: #fff;
}

.msn-join-box button {
  width: 100%;
  height: 24px;
  border: 1px solid #fff;
  border-right-color: #404040;
  border-bottom-color: #404040;
  background: #c0c0c0;
  font: 11px Tahoma, "Segoe UI", sans-serif;
  cursor: default;
}

.msn-join-box button:hover {
  filter: brightness(1.05);
}

.msn-join-box button:active {
  border-color: #404040 #fff #fff #404040;
}

.msn-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  background: linear-gradient(180deg, #fff 0%, #f4f8fc 100%);
  border-bottom: 1px solid #9eb6d3;
  font: 11px/1.45 Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
}

.msn-msg {
  margin-bottom: 8px;
  word-break: break-word;
}

.msn-msg .msn-nick {
  font-weight: 700;
  color: #003399;
  margin-right: 4px;
}

.msn-msg .msn-time {
  color: #667;
  font-size: 10px;
  margin-right: 4px;
}

.msn-msg .msn-text {
  color: #000;
}

.msn-compose {
  padding: 8px 10px 10px;
  background: #ece9d8;
  border-top: 1px solid #fff;
}

.msn-compose input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  height: 22px;
  padding: 2px 4px;
  border: 1px solid #7f9db9;
  font: 11px Tahoma, "Segoe UI", sans-serif;
  background: #fff;
}

.msn-compose input:disabled,
.msn-send-row button:disabled {
  background: #e8e8e8;
  color: #888;
}

.msn-send-row {
  display: flex;
  gap: 6px;
}

.msn-send-row input {
  flex: 1;
}

.msn-send-row button {
  min-width: 58px;
  height: 22px;
  padding: 0 10px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff 0%, #dfdfdf 100%);
  font: 11px Tahoma, "Segoe UI", sans-serif;
  cursor: default;
}

.msn-send-row button:hover:not(:disabled) {
  background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%);
}

.msn-send-row button:active:not(:disabled) {
  background: #d0d0d0;
}

.msn-empty {
  color: #667;
  font-style: italic;
  padding: 8px 2px;
}