html[data-theme="win95"] {
  --font-family: "MS Sans Serif", Tahoma, system-ui, sans-serif;
  --win95-desktop: #008080;
  --win95-gray: #c0c0c0;
  --win95-gray-dark: #808080;
  --win95-gray-darker: #404040;
  --win95-gray-light: #ffffff;
  --win95-title: #000080;
  --win95-title-text: #ffffff;
  --win95-text: #000000;
  --win95-link: #0000ee;
  --hover-size: 0;
}

html[data-theme="win95"] body {
  background: var(--win95-desktop);
  color: var(--win95-text);
}

html[data-theme="win95"] #main-content,
html[data-theme="win95"] #sidebar,
html[data-theme="win95"] .nav,
html[data-theme="win95"] .composer,
html[data-theme="win95"] .settings-card,
html[data-theme="win95"] .panel {
  background: var(--win95-gray);
  color: var(--win95-text);
  border-block-start: 2px solid var(--win95-gray-light);
  border-inline-start: 2px solid var(--win95-gray-light);
  border-block-end: 2px solid var(--win95-gray-darker);
  border-inline-end: 2px solid var(--win95-gray-darker);
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="win95"] #sidebar,
html[data-theme="win95"] #sidebar .sidebar__container,
html[data-theme="win95"] #sidebar .sidebar__rooms-group,
html[data-theme="win95"] #sidebar .sidebar__tools {
  background: var(--win95-gray);
  color: var(--win95-text);
}

html[data-theme="win95"] a,
html[data-theme="win95"] .message__timestamp {
  color: var(--win95-link);
}

html[data-theme="win95"] .btn,
html[data-theme="win95"] .room,
html[data-theme="win95"] .rooms__new-btn,
html[data-theme="win95"] .input:not(.input--transparent):not(.input--invisible):not(:where(.input--actor *)):not([type="file"]),
html[data-theme="win95"] .input--actor,
html[data-theme="win95"] .theme-option,
html[data-theme="win95"] .message__action-btn,
html[data-theme="win95"] .message__options-btn,
html[data-theme="win95"] .composer__tool-btn,
html[data-theme="win95"] .boost,
html[data-theme="win95"] .boost__action,
html[data-theme="win95"] .boost__form-button {
  background: var(--win95-gray);
  color: var(--win95-text);
  border-block-start: 2px solid var(--win95-gray-light);
  border-inline-start: 2px solid var(--win95-gray-light);
  border-block-end: 2px solid var(--win95-gray-darker);
  border-inline-end: 2px solid var(--win95-gray-darker);
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="win95"] .btn:active,
html[data-theme="win95"] .composer__tool-btn:active,
html[data-theme="win95"] .message__action-btn:active {
  border-block-start-color: var(--win95-gray-dark);
  border-inline-start-color: var(--win95-gray-dark);
  border-block-end-color: var(--win95-gray-light);
  border-inline-end-color: var(--win95-gray-light);
}

html[data-theme="win95"] .btn--reversed,
html[data-theme="win95"] .btn--reversed:visited,
html[data-theme="win95"] .btn--reversed:hover,
html[data-theme="win95"] .btn--reversed:active {
  background: var(--win95-title);
  color: var(--win95-title-text);
}

html[data-theme="win95"] .btn--reversed img:not(.avatar):not(.room-icon-image),
html[data-theme="win95"] .btn--reversed .colorize--black,
html[data-theme="win95"] .btn--reversed .colorize--white {
  filter: invert(100%) !important;
}

html[data-theme="win95"] #sidebar .sidebar__heading,
html[data-theme="win95"] #sidebar .sidebar__heading--toggle,
html[data-theme="win95"] #sidebar .direct,
html[data-theme="win95"] #sidebar .direct:visited,
html[data-theme="win95"] #sidebar .direct__author,
html[data-theme="win95"] #sidebar .sidebar__font-scaler-label {
  color: var(--win95-text);
  text-shadow: none;
}

html[data-theme="win95"] #sidebar .sidebar__heading {
  font-weight: 800;
  letter-spacing: 0;
}

html[data-theme="win95"] #sidebar .sidebar__heading::after {
  border-block-start-color: var(--win95-gray-dark);
}

html[data-theme="win95"] #sidebar .room {
  font-size: 0.95rem;
  line-height: 1.1;
  min-block-size: 2.45rem;
  padding-block: 0.35em;
  padding-inline: 0.45em;
}

html[data-theme="win95"] #sidebar .room.current,
html[data-theme="win95"] #sidebar .room.current:visited,
html[data-theme="win95"] #sidebar .room.current:hover,
html[data-theme="win95"] #sidebar .room.current > .overflow-ellipsis {
  background: var(--win95-title);
  color: var(--win95-title-text);
}

html[data-theme="win95"] #sidebar .room.room--with-background {
  align-items: stretch;
  background-image:
    linear-gradient(180deg, rgb(192 192 192 / 0.18), rgb(192 192 192 / 0.34)),
    var(--room-tile-background-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--win95-text);
  gap: 0.2em;
  justify-content: stretch;
  min-block-size: 2.95rem;
  padding: 0.2em;
  text-shadow: none;
}

html[data-theme="win95"] #sidebar .room.room--with-background > .overflow-ellipsis {
  align-self: center;
  background: var(--win95-title);
  border-block-start: 2px solid color-mix(in srgb, var(--win95-title) 55%, #ffffff);
  border-inline-start: 2px solid color-mix(in srgb, var(--win95-title) 55%, #ffffff);
  border-block-end: 2px solid #000000;
  border-inline-end: 2px solid #000000;
  color: var(--win95-title-text);
  display: block;
  font-size: 0.9rem;
  inline-size: 100%;
  line-height: 1.1;
  padding: 0.1em 0.4em;
  text-align: center;
}

html[data-theme="win95"] #sidebar .room.room--with-background.current {
  background-image:
    linear-gradient(180deg, rgb(0 0 128 / 0.22), rgb(0 0 128 / 0.4)),
    var(--room-tile-background-image);
  color: var(--win95-title-text);
}

html[data-theme="win95"] #sidebar .room.unread::before,
html[data-theme="win95"] #sidebar .direct.unread .direct__author::after {
  background-color: var(--win95-title);
}

html[data-theme="win95"] .message__body-content,
html[data-theme="win95"] .messages--with-background .message:not(.message--emoji) .message__body-content {
  background: #ffffff;
  color: var(--win95-text);
  border-block-start: 2px solid var(--win95-gray-dark);
  border-inline-start: 2px solid var(--win95-gray-dark);
  border-block-end: 2px solid var(--win95-gray-light);
  border-inline-end: 2px solid var(--win95-gray-light);
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="win95"] .message--me .message__body-content,
html[data-theme="win95"] .messages--with-background .message--me:not(.message--emoji) .message__body-content {
  background: #ffffe1;
}

html[data-theme="win95"] .message__meta,
html[data-theme="win95"] .settings-layout__header {
  background: var(--win95-title);
  color: var(--win95-title-text);
  padding: 0.25rem 0.5rem;
}

html[data-theme="win95"] .message__meta .message__permalink,
html[data-theme="win95"] .message__meta .message__timestamp,
html[data-theme="win95"] .message__meta .message__status {
  color: inherit;
  opacity: 1;
}

html[data-theme="win95"] .avatar {
  --avatar-border-radius: 0;
}

html[data-theme="win95"] .avatar:where(:has(> img)),
html[data-theme="win95"] .avatar__group {
  background: var(--win95-gray);
  border-block-start: 2px solid var(--win95-gray-light);
  border-inline-start: 2px solid var(--win95-gray-light);
  border-block-end: 2px solid var(--win95-gray-dark);
  border-inline-end: 2px solid var(--win95-gray-dark);
  border-radius: 0;
  box-shadow: none;
  padding: 2px;
}

html[data-theme="win95"] .avatar img,
html[data-theme="win95"] .message__avatar img {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  inline-size: 100%;
}

html[data-theme="win95"] .message__avatar {
  background: transparent;
  border: 0;
  padding: 0;
}

html[data-theme="win95"] #sidebar .direct > .avatar,
html[data-theme="win95"] #sidebar .direct > .avatar__group {
  background: var(--win95-gray);
  border-block-start: 2px solid var(--win95-gray-light);
  border-inline-start: 2px solid var(--win95-gray-light);
  border-block-end: 2px solid var(--win95-gray-dark);
  border-inline-end: 2px solid var(--win95-gray-dark);
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="win95"] #sidebar .room__icon,
html[data-theme="win95"] #sidebar .room__icon img,
html[data-theme="win95"] #sidebar .direct > .room__icon,
html[data-theme="win95"] #sidebar .direct > .room__icon img {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="win95"] .message__day-separator time,
html[data-theme="win95"] .message__day-separator span,
html[data-theme="win95"] .messages__unread-divider span {
  background: var(--win95-gray);
  color: var(--win95-text);
  border-block-start: 2px solid var(--win95-gray-light);
  border-inline-start: 2px solid var(--win95-gray-light);
  border-block-end: 2px solid var(--win95-gray-dark);
  border-inline-end: 2px solid var(--win95-gray-dark);
  border-radius: 0;
}

html[data-theme="win95"] ::selection {
  background: var(--win95-title);
  color: var(--win95-title-text);
}
