/*
  Windows 95 visual primitives adapted for Prodigy Communicator.
  Font and border conventions are based on themesberg/windows-95-ui-kit.
  Source: https://github.com/themesberg/windows-95-ui-kit
  License: MIT, see static/vendor/windows-95-ui-kit/LICENSE.
*/

@font-face {
  font-family: "Windows 95";
  src: url("/static/vendor/windows-95-ui-kit/fonts/w-95-sans-serif.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.chat-web-page {
  --w95-face: #c0c0c0;
  --w95-button-face: #dfdfdf;
  --w95-light: #fcfcfc;
  --w95-mid: #808080;
  --w95-dark: #08080e;
  --w95-blue: #000181;
  --w95-active: #008081;
  --w95-close: var(--w95-button-face);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.chat-room-window,
.room-modal-window,
.im-window-shell {
  font-family: Arial, Helvetica, sans-serif;
}

.chat-web-page button,
.chat-web-page .link-button {
  position: relative;
  border-radius: 0;
}

.chat-web-page button:focus {
  outline: none;
}

.chat-web-page button:focus-visible::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dotted #000;
  pointer-events: none;
}

.chat-web-page .chat-main-link:focus-visible::after,
.chat-web-page .chat-main-list-row:focus-visible::after,
.chat-web-page .room-area-choice:focus-visible::after,
.chat-web-page .room-list-choice:focus-visible::after,
.chat-web-page .im-name-row:focus-visible::after {
  display: none;
}

.chat-window-shell,
.room-modal-window,
.im-window-shell {
  border: 2px solid var(--w95-dark);
  background: var(--w95-face);
  box-shadow:
    inset 1px 1px 0 var(--w95-light),
    inset -1px -1px 0 var(--w95-mid);
}

.chat-window-titlebar,
.room-modal-titlebar,
.im-window-titlebar {
  min-height: 26px;
  background: var(--w95-mid);
  border-bottom: 2px solid var(--w95-face);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.chat-window-control,
.chat-side-button,
.chat-small-button,
.chat-large-button,
.chat-command-button {
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-dark) var(--w95-dark) var(--w95-light);
  background: var(--w95-button-face);
  box-shadow: none;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  border-radius: 0;
}

.chat-window-control:active,
.chat-side-button:active,
.chat-small-button:active,
.chat-large-button:active,
.chat-command-button:active {
  border-color: var(--w95-dark) var(--w95-light) var(--w95-light) var(--w95-dark);
  padding-top: 4px;
  padding-left: 8px;
}

.chat-window-control {
  background: var(--w95-close);
  font-weight: 700;
}

.chat-transcript-panel,
.chat-member-list,
#chat-input,
.room-modal-area-list,
.room-modal-room-list,
.room-search-label input,
.im-recipient-input,
.im-message-input,
.im-name-list,
.im-transcript {
  border: 2px solid;
  border-color: #000;
  box-shadow:
    inset 1px 1px 0 var(--w95-mid),
    inset -1px -1px 0 var(--w95-light);
  background: #fff;
  color: #000;
}

.chat-transcript-panel,
.im-transcript {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.chat-side-panel {
  border: 0;
  background: #fff;
}

.chat-side-panel-title {
  background: #fff;
  color: #000;
}

.chat-member-row.is-selected,
.im-name-row.is-selected,
.room-area-choice.is-selected,
.room-list-choice.is-selected {
  background: var(--w95-active);
  color: #fff;
}

.chat-transcript-panel::-webkit-scrollbar,
.chat-member-list::-webkit-scrollbar,
.chat-main-panel::-webkit-scrollbar,
.room-modal-room-list::-webkit-scrollbar,
.room-modal-area-list::-webkit-scrollbar,
.im-name-list::-webkit-scrollbar,
.im-transcript::-webkit-scrollbar {
  width: 17px;
  height: 17px;
}

.chat-transcript-panel::-webkit-scrollbar-track,
.chat-member-list::-webkit-scrollbar-track,
.chat-main-panel::-webkit-scrollbar-track,
.room-modal-room-list::-webkit-scrollbar-track,
.room-modal-area-list::-webkit-scrollbar-track,
.im-name-list::-webkit-scrollbar-track,
.im-transcript::-webkit-scrollbar-track {
  background:
    repeating-conic-gradient(#dfdfdf 0% 25%, #fff 0% 50%) 0 0 / 2px 2px;
  border-left: 1px solid #808080;
  box-shadow: inset 1px 0 0 #fff;
}

.chat-transcript-panel::-webkit-scrollbar-thumb,
.chat-member-list::-webkit-scrollbar-thumb,
.chat-main-panel::-webkit-scrollbar-thumb,
.room-modal-room-list::-webkit-scrollbar-thumb,
.room-modal-area-list::-webkit-scrollbar-thumb,
.im-name-list::-webkit-scrollbar-thumb,
.im-transcript::-webkit-scrollbar-thumb {
  min-height: 32px;
  min-width: 32px;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  background: var(--w95-button-face);
  box-shadow:
    inset -1px -1px 0 #808080,
    inset 1px 1px 0 #dfdfdf;
}

.chat-transcript-panel::-webkit-scrollbar-button,
.chat-member-list::-webkit-scrollbar-button,
.chat-main-panel::-webkit-scrollbar-button,
.room-modal-room-list::-webkit-scrollbar-button,
.room-modal-area-list::-webkit-scrollbar-button,
.im-name-list::-webkit-scrollbar-button,
.im-transcript::-webkit-scrollbar-button {
  display: block;
  width: 17px;
  height: 17px;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  background-color: var(--w95-button-face);
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset -1px -1px 0 #808080,
    inset 1px 1px 0 #dfdfdf;
}

.chat-transcript-panel::-webkit-scrollbar-button:vertical:decrement,
.chat-member-list::-webkit-scrollbar-button:vertical:decrement,
.chat-main-panel::-webkit-scrollbar-button:vertical:decrement,
.room-modal-room-list::-webkit-scrollbar-button:vertical:decrement,
.room-modal-area-list::-webkit-scrollbar-button:vertical:decrement,
.im-name-list::-webkit-scrollbar-button:vertical:decrement,
.im-transcript::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M6 3 L2 8 H10 Z' fill='black'/%3E%3C/svg%3E");
}

.chat-transcript-panel::-webkit-scrollbar-button:vertical:increment,
.chat-member-list::-webkit-scrollbar-button:vertical:increment,
.chat-main-panel::-webkit-scrollbar-button:vertical:increment,
.room-modal-room-list::-webkit-scrollbar-button:vertical:increment,
.room-modal-area-list::-webkit-scrollbar-button:vertical:increment,
.im-name-list::-webkit-scrollbar-button:vertical:increment,
.im-transcript::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M2 5 H10 L6 10 Z' fill='black'/%3E%3C/svg%3E");
}

.chat-transcript-panel::-webkit-scrollbar-button:vertical:start:increment,
.chat-member-list::-webkit-scrollbar-button:vertical:start:increment,
.chat-main-panel::-webkit-scrollbar-button:vertical:start:increment,
.room-modal-room-list::-webkit-scrollbar-button:vertical:start:increment,
.room-modal-area-list::-webkit-scrollbar-button:vertical:start:increment,
.im-name-list::-webkit-scrollbar-button:vertical:start:increment,
.im-transcript::-webkit-scrollbar-button:vertical:start:increment,
.chat-transcript-panel::-webkit-scrollbar-button:vertical:end:decrement,
.chat-member-list::-webkit-scrollbar-button:vertical:end:decrement,
.chat-main-panel::-webkit-scrollbar-button:vertical:end:decrement,
.room-modal-room-list::-webkit-scrollbar-button:vertical:end:decrement,
.room-modal-area-list::-webkit-scrollbar-button:vertical:end:decrement,
.im-name-list::-webkit-scrollbar-button:vertical:end:decrement,
.im-transcript::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
  width: 0;
  height: 0;
}

.chat-transcript-panel::-webkit-scrollbar-button:horizontal:decrement,
.chat-member-list::-webkit-scrollbar-button:horizontal:decrement,
.chat-main-panel::-webkit-scrollbar-button:horizontal:decrement,
.room-modal-room-list::-webkit-scrollbar-button:horizontal:decrement,
.room-modal-area-list::-webkit-scrollbar-button:horizontal:decrement,
.im-name-list::-webkit-scrollbar-button:horizontal:decrement,
.im-transcript::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M3 6 L8 2 V10 Z' fill='black'/%3E%3C/svg%3E");
}

.chat-transcript-panel::-webkit-scrollbar-button:horizontal:increment,
.chat-member-list::-webkit-scrollbar-button:horizontal:increment,
.chat-main-panel::-webkit-scrollbar-button:horizontal:increment,
.room-modal-room-list::-webkit-scrollbar-button:horizontal:increment,
.room-modal-area-list::-webkit-scrollbar-button:horizontal:increment,
.im-name-list::-webkit-scrollbar-button:horizontal:increment,
.im-transcript::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M9 6 L4 2 V10 Z' fill='black'/%3E%3C/svg%3E");
}

.chat-transcript-panel::-webkit-scrollbar-button:horizontal:start:increment,
.chat-member-list::-webkit-scrollbar-button:horizontal:start:increment,
.chat-main-panel::-webkit-scrollbar-button:horizontal:start:increment,
.room-modal-room-list::-webkit-scrollbar-button:horizontal:start:increment,
.room-modal-area-list::-webkit-scrollbar-button:horizontal:start:increment,
.im-name-list::-webkit-scrollbar-button:horizontal:start:increment,
.im-transcript::-webkit-scrollbar-button:horizontal:start:increment,
.chat-transcript-panel::-webkit-scrollbar-button:horizontal:end:decrement,
.chat-member-list::-webkit-scrollbar-button:horizontal:end:decrement,
.chat-main-panel::-webkit-scrollbar-button:horizontal:end:decrement,
.room-modal-room-list::-webkit-scrollbar-button:horizontal:end:decrement,
.room-modal-area-list::-webkit-scrollbar-button:horizontal:end:decrement,
.im-name-list::-webkit-scrollbar-button:horizontal:end:decrement,
.im-transcript::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
  width: 0;
  height: 0;
}

.chat-transcript-panel::-webkit-scrollbar-corner,
.chat-member-list::-webkit-scrollbar-corner,
.chat-main-panel::-webkit-scrollbar-corner,
.room-modal-room-list::-webkit-scrollbar-corner,
.room-modal-area-list::-webkit-scrollbar-corner,
.im-name-list::-webkit-scrollbar-corner,
.im-transcript::-webkit-scrollbar-corner {
  background: var(--w95-button-face);
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
}

.room-area-choice,
.room-list-choice,
.im-name-row {
  border: 0;
  box-shadow: none;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
}