/* Scrollbars of browsers without scrollbar-color (see body in new.css): the same thumb and track colors of theme.css */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border: 2px solid var(--color-scrollbar-track);
  border-radius: 5px;
}

::-webkit-scrollbar-corner {
  background: var(--color-scrollbar-track);
}

.chat-message {
  max-width: 100%;
}

.chat-message:hover {
  color: white;
  cursor: pointer;
}

/* Item names in loot messages (chat and the server message on screen) colored by rarity */
.loot-common {
  color: var(--color-rarity-common);
}

.loot-uncommon {
  color: var(--color-rarity-uncommon);
}

.loot-rare {
  color: var(--color-rarity-rare);
}

.loot-epic {
  color: var(--color-rarity-epic);
}

.loot-legendary {
  color: var(--color-rarity-legendary);
}

.chatbox-wrapper {
  display: flex;
  height: 100%;
  flex-direction: column;
  word-wrap: break-word;
}

/* Chat input: same look as the inputs of the Edit Hotkey modal, with the yellow say color */
#chat-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  box-sizing: border-box;
  padding: 0 10px;
  color: yellow;
  border: 1px solid black;
  border-radius: 5px;
  background-image: none;
  background-color: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#chat-input::placeholder {
  color: var(--color-text-dim);
}

#chat-input:focus {
  border-color: var(--color-accent);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 4px var(--color-accent-glow);
}

#chat-input:disabled {
  background-color: rgba(0, 0, 0, 0.2);
  color: grey;
}

/* Message area: the selected tab has the same background so both look like one sheet */
#chat-text {
  overflow-y: hidden;
  background-image: url("/png/bg3.png?v=cabdf9c77067");
  height: 100%;
  padding: 4px;
  border: 1px solid black;
  border-top: 0px;
}

/* Tab bar: the tabs fill its full height, the buttons are smaller and centered with the same 4px gap as in the footer.
   It must not shrink, otherwise the chat area squeezes it down to the height of the buttons */
.wrapper-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 4px;
  background-image: url("/png/bg2.png?v=5b440427c14f");
  /* Only the chat messages should be selectable, not the buttons and tabs */
  -webkit-user-select: none;
  user-select: none;
}

/* The tabs touch the top of the bar and each other */
.chat-header {
  display: flex;
  align-self: stretch;
  flex: 1 1 auto;
  /* Without this the header grows to fit every channel tab and widens the whole chat area */
  min-width: 0;
  overflow-x: hidden;
}

.channel-header {
  display: flex;
  height: 100%;
}

/* Compact tabs: closing and clearing a channel is done from the menu of its tab (right click) */
.chat-title {
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  white-space: nowrap;
  cursor: pointer;
  font-weight: bold;
  border: 1px solid black;
  background-image: url("/png/bg2.png?v=5b440427c14f");
}

.chat-title span {
  pointer-events: none;
}

/* Selected tab: same background as the chat area and no bottom border, so both look like one sheet */
.chat-title.selected {
  background-image: url("/png/bg3.png?v=cabdf9c77067");
  border-bottom: 0px;
}

/* Channel with unread messages: blinks until it is selected */
.chat-title.unread {
  animation: chat-title-blink 1s step-end infinite;
}

/* Normal color for the first half of each second, amber for the second half */
@keyframes chat-title-blink {
  50% { color: var(--color-warning); }
}

/* Icon buttons of the tab bar and the footer: same look as the Edit Hotkey tabs */
.wrapper-header button.symbol-button-long,
.chat-footer button.symbol-button-long,
.chat-footer button.symbol-button-text {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--color-icon-light);
  border: 1px solid black;
  border-radius: 5px;
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-raised);
  transition: color 0.1s, border-color 0.1s, box-shadow 0.1s;
}

.wrapper-header button.symbol-button-long:hover,
.chat-footer button.symbol-button-long:hover,
.chat-footer button.symbol-button-text:hover {
  color: var(--color-accent-text);
  border-color: var(--color-accent);
  background-image: var(--gradient-surface-hover);
  box-shadow: var(--shadow-accent);
}

/* The chevron glyphs have more empty space around them: slightly larger so they look as big as the other icons */
#left-channel,
#right-channel {
  font-size: 16px;
}

/* Send button: the main action of the footer, in the accent colors */
.chat-footer button.symbol-button-text {
  width: auto;
  padding: 0 12px;
  font-size: 11px;
  color: var(--color-accent-text);
  border-color: var(--color-accent-dark);
  background-image: var(--gradient-accent);
}

.chat-footer button.symbol-button-text:hover {
  background-image: var(--gradient-accent);
}

.chat-body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  height: 100%;
  align-items: flex-start;
}

/* Empty channel: italic muted text like the empty lists of the modals */
.channel-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-style: italic;
  color: var(--color-text-muted);
}

.chat-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 4px;
  -webkit-user-select: none;
  user-select: none;
}

/* Speaker icon of the loudness button (drawn by ChannelManager.__setLoudness) */
.chat-loudness-icon {
  display: block;
  margin: auto;
}

.chat-footer input {
  -webkit-user-select: text;
  user-select: text;
}

/* Resizer Handle */
#chat-resizer {
  height: 5px;
  background-color: #222;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  cursor: ns-resize;
  width: 100%;
  flex: 0 0 auto;
  /* Do not grow or shrink */
  z-index: 10;
}

#chat-resizer:hover {
  background-color: #444;
}

/* While resizing */
.resizing {
  pointer-events: none;
  /* Disable mouse events on the content to prevent selection */
  user-select: none;
}

#chat-resizer.locked {
  background-color: #111;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
}

#chat-resizer.locked:hover {
  background-color: #111;
  /* No highlight when locked */
}