body:not(.mobile-layout) .chatbox-wrapper {
  position: relative;
  box-sizing: border-box;
  min-height: 0;
  border: 1px solid #0c0d0c;
  padding: 1px;
  box-shadow: inset 1px 1px #777a72, inset -1px -1px #292c27;
  background-image: url('../png/bg.png');
}

body:not(.mobile-layout) .chatbox-wrapper .wrapper-header {
  position: relative;
  flex: 0 0 28px;
  height: 28px;
  min-width: 0;
  gap: 2px;
}

body:not(.mobile-layout) .chatbox-wrapper #cheader { min-width: 0; }
body:not(.mobile-layout) .chatbox-wrapper .channel-header { position: relative; flex: 0 0 auto; }

/* Tabs cover this recessed divider so the active tab stays open into the chat. */
body:not(.mobile-layout) .chatbox-wrapper .wrapper-header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #595c57;
  box-shadow: inset 0 1px #0c0d0c;
  pointer-events: none;
}

body:not(.mobile-layout) .chatbox-wrapper::after {
  content: '';
  position: absolute;
  top: 28px;
  right: 0;
  bottom: 0;
  width: 2px;
  background: #595c57;
  box-shadow: inset 1px 0 #0c0d0c;
  pointer-events: none;
}

body:not(.mobile-layout) .chatbox-wrapper .chat-title {
  box-sizing: border-box;
  border: 1px solid #0c0d0c;
  border-bottom-color: #595c57;
  padding: 1px;
  box-shadow: inset 1px 1px #777a72, inset -1px 0 #292c27, inset 0 -1px #0c0d0c;
  background-image: url('../png/bg2.png');
  white-space: nowrap;
}

body:not(.mobile-layout) .chatbox-wrapper .chat-title.selected {
  border-bottom-color: transparent;
  box-shadow: inset 1px 1px #777a72, inset -1px 0 #292c27;
  background-image: url('../png/bg.png');
}

body:not(.mobile-layout) .chatbox-wrapper .chat-title span { margin: 4px 16px; }

body:not(.mobile-layout) .chatbox-wrapper #chat-text {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  border: 0;
  background-image: url('../png/bg.png');
}

body:not(.mobile-layout) .chatbox-wrapper .chat-footer {
  flex: 0 0 26px;
  min-width: 0;
  margin: 0;
  gap: 2px;
  align-items: center;
}

body:not(.mobile-layout) .chatbox-wrapper #chat-input {
  flex: 1 1 0;
  box-sizing: border-box;
  min-width: 0;
  width: 0;
  height: 24px;
  border: 1px solid #292c27;
  background-image: url('../png/bg.png');
}

body:not(.mobile-layout) .chatbox-wrapper .console-icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  align-self: center;
  box-sizing: border-box;
  width: 22px;
  min-width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0;
}

body:not(.mobile-layout) .chatbox-wrapper .console-icon-button::before {
  content: '';
  width: 16px;
  height: 16px;
  background: var(--console-icon) center / 16px 16px no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}

body:not(.mobile-layout) .chatbox-wrapper #left-channel { --console-icon: url('../png/console/leftarrow.png'); }
body:not(.mobile-layout) .chatbox-wrapper #right-channel { --console-icon: url('../png/console/rightarrow.png'); }
body:not(.mobile-layout) .chatbox-wrapper #open-chat-modal { --console-icon: url('../png/console/channels.png'); }
body:not(.mobile-layout) .chatbox-wrapper #clear-chat-channel { --console-icon: url('../png/console/clearchannel.png'); }
body:not(.mobile-layout) .chatbox-wrapper #close-chat-channel { --console-icon: url('../png/console/closechannel.png'); }
body:not(.mobile-layout) .chatbox-wrapper #chat-say-loudness[data-loudness='say'] { --console-icon: url('../png/window/console_say.png'); }
body:not(.mobile-layout) .chatbox-wrapper #chat-say-loudness[data-loudness='whisper'] { --console-icon: url('../png/window/console_whisper.png'); }
body:not(.mobile-layout) .chatbox-wrapper #chat-say-loudness[data-loudness='yell'] { --console-icon: url('../png/window/console_yell.png'); }

body:not(.mobile-layout) .chatbox-wrapper .console-icon-button:hover {
  background-image: url('../png/bg2.png');
}

body:not(.mobile-layout) .chatbox-wrapper :is(#clear-chat-channel, #open-chat-modal, #close-chat-channel) {
  background: url('../png/button_gray.png') left center / 200% 100% no-repeat;
}

body:not(.mobile-layout) .chatbox-wrapper :is(#clear-chat-channel, #open-chat-modal, #close-chat-channel):active {
  background-position: right center;
}

body:not(.mobile-layout) .chatbox-wrapper .console-icon-button:active::before { transform: translateY(1px); }
body:not(.mobile-layout) .chatbox-wrapper #chat-say-loudness::before {
  width: 18px;
  height: 18px;
  background-size: 36px 18px;
  background-position: left center;
}
body:not(.mobile-layout) .chatbox-wrapper #chat-say-loudness:active::before {
  background-position: right center;
  transform: none;
}

body:not(.mobile-layout) .chatbox-wrapper #send-chat-message {
  flex: 0 0 58px;
  height: 24px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url('../png/button_gray.png') left center / 200% 100% no-repeat;
  color: white;
  font-size: 11px;
}

body:not(.mobile-layout) .chatbox-wrapper #send-chat-message:active { background-position: right center; }