#worldChat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 500;
  width: min(340px, calc(100vw - 24px));
  border: 1px solid #52617a;
  border-radius: 6px;
  background: rgba(14, 20, 29, .97);
  color: #fffaf0;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  overflow: hidden;
  font-family: "Noto Serif SC", "Microsoft YaHei", serif;
}

#worldChat.collapsed .chat-body,
#worldChat.collapsed .chat-form,
#worldChat.collapsed .chat-status {
  display: none;
}

#worldChat.embedded {
  position: static;
  width: 100%;
  margin-top: 12px;
  box-shadow: none;
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #344052;
  background: #171f2b;
}

.chat-title {
  color: #ffd77a;
  font-weight: 700;
  letter-spacing: .12em;
}

.chat-online {
  margin-left: 8px;
  color: #b8c2d2;
  font-size: 12px;
}

.chat-toggle {
  min-width: 28px;
  height: 28px;
  border: 1px solid #52617a;
  border-radius: 4px;
  background: #1d2735;
  color: #fffaf0;
  cursor: pointer;
}

.chat-head-actions {
  display: flex;
  gap: 6px;
}

.friend-panel,
.social-requests {
  padding: 9px 10px;
  border-bottom: 1px solid #344052;
  background: #101721;
  font-size: 12px;
}

.social-requests:empty,
.friend-panel:empty {
  display: none;
}

.friend-row,
.social-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.friend-row:last-child,
.social-request:last-child {
  margin-bottom: 0;
}

.mini-btn {
  padding: 3px 7px;
  border: 1px solid #52617a;
  border-radius: 3px;
  background: #1d2735;
  color: #fffaf0;
  cursor: pointer;
}

.chat-body {
  height: 210px;
  overflow-y: auto;
  padding: 10px 12px;
}

.chat-line {
  margin-bottom: 8px;
  line-height: 1.55;
  word-break: break-word;
}

.chat-line b {
  color: #ffd77a;
}

.chat-line.system {
  color: #b8c2d2;
  font-size: 12px;
}

.chat-form {
  display: flex;
  gap: 7px;
  padding: 9px;
  border-top: 1px solid #344052;
}

.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #52617a;
  border-radius: 4px;
  background: #0c1119;
  color: #fffaf0;
  outline: none;
}

.chat-form button {
  padding: 0 13px;
  border: 1px solid #ffd77a;
  border-radius: 4px;
  background: #ffd77a;
  color: #191209;
  font-weight: 700;
  cursor: pointer;
}

.chat-status {
  min-height: 16px;
  padding: 0 10px 8px;
  color: #b8c2d2;
  font-size: 11px;
}

@media (max-width: 640px) {
  #worldChat:not(.embedded) {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
  }
  #worldChat.embedded {
    width: 100%;
  }
  .chat-body {
    height: 170px;
  }
}