/* Custom styles to complement XP.css */

.dialog-window {
  z-index: 2000;
}

/* Main content */
.main-content {
  height: 100dvh;
}

/* Status text styling */
.status {
  margin: 8px 0;
  font-style: italic;
  color: #000080;
}

/* Waiting animation */
.waiting-animation {
  display: inline-block;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Chat-specific styles */
.chat-window {
  resize: both;
  overflow: hidden;
}

.messages {
  background: white;
  font-family: "MS Sans Serif", sans-serif;
  font-size: 11px;
  height: 100%;
}

.message {
  margin-bottom: 4px;
  padding: 2px 0;
  word-wrap: break-word;
  text-align: left;
}

.message.you,
.message.them {
  background: transparent;
  border: none;
  margin: 0;
  font-family: "MS Sans Serif", sans-serif;
  font-size: 11px;
}

.message .username {
  font-weight: bold;
  color: #1212c6;
  margin-right: 4px;
}

.message.you .username {
  color: #d70a0a;
}

.message .text {
  color: #000000;
}

.message.system {
  background: #ffffe1;
  text-align: center;
  font-style: italic;
  color: #000080;
  border: 1px inset #c0c0c0;
}

#messageInput {
  font-family: "MS Sans Serif", sans-serif;
  font-size: 11px;
}

/* Countdown timer */
.countdown {
  font-size: 12px;
  font-weight: bold;
  color: #000080;
  margin: 8px 0;
  text-align: center;
}

.countdown.warning {
  color: #800000;
  animation: pulse 1s infinite;
}

/* Chat header */
.chat-header {
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
  text-align: center;
  font-size: 11px;
  color: #000000;
  padding: 4px;
}

/* Main content layout */
.main-content-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Window widths */
.window-small {
  width: 400px;
}

.window-dialog {
  width: 350px;
}

.window-chat {
  width: 600px;
  height: 500px;
}

/* Field row layouts */
.field-row-center {
  justify-content: center;
  margin-top: 16px;
}

.field-row-input {
  margin: 8px;
  gap: 4px;
}

/* Chat window body */
.chat-window-body {
  display: flex;
  flex-direction: column;
  height: calc(100% - 33px);
  padding: 0;
}

/* Messages panel */
.messages-panel {
  flex: 1;
  margin: 8px;
  padding: 8px;
  overflow-y: auto;
}

/* Message input */
.message-input-flex {
  flex: 1;
}

/* Desktop icon */
.desktop-icon {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 1000;
  user-select: none;
  padding: 4px;
}

.desktop-icon img {
  width: 48px;
  height: 48px;
  pointer-events: none;
}

.icon-label {
  margin-top: 2px;
  font-family: "MS Sans Serif", sans-serif;
  font-size: 11px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  padding: 1px 3px;
}

.desktop-icon.selected .icon-label {
  background: #316ac5;
  color: #fff;
  text-shadow: none;
}

.desktop-icon.selected img {
  filter: brightness(0.7) sepia(1) hue-rotate(190deg) saturate(3);
}