html, body {
  height: 100%;
}

#root {
  height: 100%;
}

.lxgw-wenkai-mono-tc-regular {
  font-family: "LXGW WenKai Mono TC", monospace;
  font-style: normal;
}

/* scrollbar */
*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
*::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #DFE9EB;
}
*::-webkit-scrollbar-track:hover {
  background-color: #B8C0C2;
}
*::-webkit-scrollbar-track:active {
  background-color: #B8C0C2;
}
*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #757575;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: #A3A3A3;
}
*::-webkit-scrollbar-thumb:active {
  background-color: #A3A3A3;
}
/* scrollbar */

/* theme */
.chatroom-text-50 { color: light-dark(var(--p-surface-50), var(--p-surface-50)) !important; }
.chatroom-text-100 { color: light-dark(var(--p-surface-100), var(--p-surface-100)) !important; }
.chatroom-text-200 { color: light-dark(var(--p-surface-200), var(--p-surface-200)) !important; }
.chatroom-text-300 { color: light-dark(var(--p-surface-300), var(--p-surface-300)) !important; }
.chatroom-text-400 { color: light-dark(var(--p-surface-400), var(--p-surface-400)) !important; }
.chatroom-text-500 { color: light-dark(var(--p-surface-500), var(--p-surface-500)) !important; }
.chatroom-text-600 { color: light-dark(var(--p-surface-600), var(--p-surface-600)) !important; }
.chatroom-text-700 { color: light-dark(var(--p-surface-700), var(--p-surface-700)) !important; }
.chatroom-text-800 { color: light-dark(var(--p-surface-800), var(--p-surface-800)) !important; }
.chatroom-text-900 { color: light-dark(var(--p-surface-900), var(--p-surface-900)) !important; }
.chatroom-surface-100 { background-color: light-dark(var(--surface-100), var(--surface-100)) !important; }
.chatroom-surface-200 { background-color: light-dark(var(--surface-200), var(--surface-200)) !important; }
.chatroom-surface-300 { background-color: light-dark(var(--surface-300), var(--surface-300)) !important; }
.p-sidebar-content {
  padding: 0 10px 10px 10px;
}
/* theme */

/* custom */
.button-xs {
  padding: .5rem 1rem;
  font-size: .9rem;
}
.button-2xs {
  padding: .3rem .8rem;
  font-size: .8rem;
  border-radius: 0.2rem;
}
.system-message-bubble-inner {
  /* background-color: light-dark(var(--surface-0), var(--surface-0)); */
}
.chat-message-bubble-inner {
  max-width: 80%;
  background-color: light-dark(var(--surface-0), var(--surface-0));
  /* background-color: light-dark(var(--bluegray-50), var(--bluegray-900)); */
}
.chat-message-bubble-inner.quoted-my-message {
  background-color: light-dark(var(--red-50), var(--red-900));
}
.chat-message-bubble-inner .nickname {
  color: light-dark(var(--primary-500), var(--primary-500)) !important;
}
.chat-message-bubble-inner.quoted-my-message .nickname .name {
  color: light-dark(var(--primary-500), var(--primary-500)) !important;
}
.chat-message-bubble-inner .message {
  color: light-dark(var(--p-bluegray-800), var(--p-bluegray-100)) !important;
}
.quoted-message-container .nickname {
  color: light-dark(var(--primary-500), var(--primary-500)) !important;
}


.chat-message-bubble-classic-inner .nickname {
  color: light-dark(var(--primary-500), var(--primary-500)) !important;
}
.chat-message-bubble-classic-inner .quoted-my-message .nickname {
  background-color: light-dark(var(--yellow-200), var(--yellow-700));
  color: light-dark(var(--primary-500), var(--primary-500)) !important;
}
.chat-message-bubble-classic-inner .message,
.chat-message-bubble-classic-inner .say,
.chat-message-bubble-classic-inner .quoted-container .quoted {
  color: light-dark(var(--p-bluegray-800), var(--p-bluegray-100)) !important;
}



.chatter-remove-button {
  padding: 10px;
  height: 1rem;
  width: 1rem;
}
.chatter-remove-button span {
  font-size: .8rem;
}
.chatter-list-muted-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  width: 24px;
  color: #fff;
  background-color: light-dark(var(--red-500), var(--red-400));
  border-radius: 4px;
}