/* body { font-family: Arial, sans-serif; margin: 20px; } */
#controls { margin-bottom: 8px; }

#chat-history {
  border: 1px solid #ccc;
  height: calc(100% - 30px);
  width: 100%;
  padding: 10px;
  overflow-y: auto;
  white-space: pre-wrap;
}

#namefield {
  padding: 4px;
  color: DarkGoldenRod;
  font-weight: 600;
  position:relative;
}

#displayname {
  float:left;
  padding:3px;
}

#tooltip{
  position:absolute; transform: translateY(-120px);
  background:#222;
  color:lightgreen;
  padding:6px;border-radius:4px; white-space:nowrap;
  display:none; z-index:10;
  height: 100px;
  width: 93%;
  overflow: auto;
  font-size: 14px;
  white-space: pre;
}
#wrap:hover #tooltip{ display:block; }

.online-info{
/*   height: 100%; */
  float:right;
  padding-right:5px;
  cursor: pointer;
}

#chat-input {
  height:80px;
  width: 100%;
  padding:8px;
  margin-top: 8px;
  background:#364957D0;
  color: #CCC;
  box-sizing:border-box;
}

#send-btn {
  padding: 8px 12px;
  width: 100%;
  height: 36px;
}

.message {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  margin: 6px 0;
  padding: 6px;
  border-radius: 4px;
  word-break: break-word;
  white-space: pre-wrap; /* preserve newlines from textarea */
}

.name-own, .name-other {
  flex: 0 0 auto; /* do not grow */
  font-weight: 600;
  margin: 0;
  /* keep names one line */
  white-space: nowrap;
  margin-right: 6px;
}

/* Name styles: own name vs others */
.name-own { color: #0b5fff; }/*
.name-other { color: #008a2a; }*/
.name-own { color: #008a2a; }
.name-other { color: #B080C0; }

/* message-body to separate styling */
.message-body, .message-roll, .local-msg, .local-err {
  flex: 1 1 auto; /* message takes remaining width and wraps here */
  margin: 0;
  color: #CCC;
  white-space: pre-wrap; /* allow newlines */
  overflow-wrap: anywhere;
}

.message-roll {
  padding: 8px;
  border-radius:5px;
  background: #CCC;
  color: #111;
}

.local-msg {
  background: #CCCC;
  color: #111;
}

.local-err {
  background: #CAAC;
  color: #111;
}