:root {
  --bg: #f0ede4;
  --surface: #fffaf0;
  --surface-strong: #fff;
  --border: #1f3a5f;
  --accent: #9a1f56;
  --accent-strong: #5d0f31;
  --text: #1f1d1b;
  --muted: #5a5a5a;
  --success: #e6f7e8;
  --error: #fde8e8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(154, 31, 86, 0.08), transparent 28%),
    linear-gradient(180deg, #faf7f0 0%, var(--bg) 100%);
}

.page-shell {
  width: min(1080px, calc(100% - 32px));
  margin: 24px auto 36px;
}

.masthead {
  background: linear-gradient(135deg, rgba(31, 58, 95, 0.96), rgba(154, 31, 86, 0.92));
  color: white;
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: 0 12px 40px rgba(31, 58, 95, 0.2);
}

.brand-kicker {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.76rem;
  opacity: 0.9;
}

.masthead h1 {
  margin: 8px 0 6px;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
}

.lede {
  margin: 0;
  max-width: 56rem;
  opacity: 0.92;
}

/* Fixed toast stack so feedback is always visible, even on very long pages
   (the admin dashboard scrolls thousands of pixels; a top-of-page banner
   would never be seen after a button click near the bottom). */
.flash-stack {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.flash {
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--surface-strong);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  font-weight: 600;
  pointer-events: auto;
  animation: flash-in 0.25s ease-out, flash-out 0.5s ease-in 6s forwards;
}

.flash-success {
  background: var(--success);
}

.flash-error {
  background: var(--error);
}

.flash-warning {
  background: #ffe9b8;
  border-color: #d9a441;
}

@keyframes flash-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flash-out {
  to { opacity: 0; visibility: hidden; }
}

.content {
  margin-top: 18px;
}

.card {
  background: rgba(255, 250, 240, 0.95);
  border: 2px solid rgba(31, 58, 95, 0.14);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.card-narrow {
  max-width: 440px;
}

.stack-form {
  display: grid;
  gap: 14px;
}

.field-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

.hint {
  font-size: 0.82rem;
  color: var(--muted);
}

input,
textarea {
  width: 100%;
  border: 1px solid rgba(31, 58, 95, 0.24);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
  color: var(--text);
  background: white;
}

textarea {
  resize: vertical;
  min-height: 110px;
}

button,
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}

.secondary-button,
.link-button {
  color: var(--text);
  background: linear-gradient(135deg, #e9e3d2, #d7d1c0);
}

.button-row,
.action-row,
.section-header {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.note-box,
.meta-line,
.empty-copy {
  color: var(--muted);
}

.note-box {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(31, 58, 95, 0.06);
}

.availability-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.available {
  color: #14633f;
}

.unavailable {
  color: #8a2233;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap: 18px;
}

.full-width {
  grid-column: 1 / -1;
}

.request-list,
.invite-list {
  display: grid;
  gap: 14px;
}

.compact-list {
  gap: 10px;
}

.request-card,
.invite-row {
  border: 1px solid rgba(31, 58, 95, 0.15);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.qa-details {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(31, 58, 95, 0.06);
}

.qa-details summary {
  cursor: pointer;
  font-weight: 700;
}

.qa-answer {
  margin-top: 10px;
}

.qa-answer p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.request-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.interest-copy {
  margin: 10px 0;
  white-space: pre-wrap;
}

.reject-form {
  display: flex;
  flex: 1;
  gap: 8px;
  flex-wrap: wrap;
}

.reject-form input {
  flex: 1;
  min-width: 200px;
}

.invite-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.decision-table {
  width: 100%;
  border-collapse: collapse;
}

.decision-table th,
.decision-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(31, 58, 95, 0.12);
}

.modal-stage {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.26)),
    url("https://prodigyclassic.com/assets/pstarbackground.gif") center center / cover no-repeat;
}

.win95-window {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  border: 2px solid #000;
  background: #c0c0c0;
  box-shadow:
    inset 2px 2px 0 #fff,
    inset -2px -2px 0 #808080,
    10px 12px 0 rgba(0, 0, 0, 0.18);
}

.win95-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  background: linear-gradient(180deg, #2340c8, #132f9c);
  color: #fff;
  font-weight: 700;
}

.win95-close {
  min-width: 22px;
  height: 22px;
  border: 2px solid #f4f4f4;
  border-right-color: #4f4f4f;
  border-bottom-color: #4f4f4f;
  background: #c0c0c0;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}

.win95-body {
  padding: 18px;
  color: #000;
}

.win95-body p {
  margin: 0 0 14px;
  line-height: 1.45;
}

.win95-form {
  display: grid;
  gap: 12px;
}

.win95-form label {
  gap: 4px;
}

.win95-form input {
  border: 2px solid #7f7f7f;
  border-top-color: #3f3f3f;
  border-left-color: #3f3f3f;
  border-right-color: #fff;
  border-bottom-color: #fff;
  border-radius: 0;
  padding: 9px 10px;
}

.win95-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.win95-button {
  min-width: 110px;
  border: 2px solid #f4f4f4;
  border-right-color: #4f4f4f;
  border-bottom-color: #4f4f4f;
  border-radius: 0;
  background: #d4d0c8;
  color: #000;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.win95-note {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #7f7f7f;
  background: #efefef;
  font-size: 0.92rem;
}

@media (max-width: 860px) {
  .page-shell {
    width: min(100% - 20px, 1080px);
    margin-top: 12px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.chat-web-page {
  margin: 0;
  min-height: 100vh;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: #000;
}

.chat-web-app {
  width: min(990px, calc(100% - 8px));
  margin: 0 auto;
  position: relative;
}

.prodigy-service-shell {
  position: relative;
  z-index: 10;
  border: 1px solid #777;
  background: #c0c0c0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.prodigy-os-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 21px;
  padding: 1px 4px;
  background: linear-gradient(90deg, #1d1da5, #2d6fb2);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.prodigy-os-controls {
  display: flex;
  gap: 2px;
}

.prodigy-os-controls button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid;
  border-color: #fff #333 #333 #fff;
  border-radius: 0;
  background: #c0c0c0;
  color: #000;
  font: inherit;
  line-height: 1;
}

.prodigy-menubar {
  display: flex;
  gap: 0;
  align-items: center;
  min-height: 24px;
  padding: 2px 6px;
  border-bottom: 1px solid #9c9c9c;
  background: #d7d7d7;
  color: #000;
  font-size: 14px;
}

.prodigy-menu {
  position: relative;
}

.prodigy-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 6px;
}

.prodigy-menu > button {
  height: 20px;
  padding: 1px 8px 2px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #000;
  font: inherit;
  text-align: left;
}

.prodigy-menu:hover > button,
.prodigy-menu:focus-within > button,
.prodigy-menu.is-open > button {
  border-color: #fff #808080 #808080 #fff;
  background: #c0c0c0;
}

.prodigy-submenu {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 20000;
  display: none;
  min-width: 178px;
  padding: 2px;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  background: #c0c0c0;
  box-shadow: 1px 1px 0 #808080;
}

.prodigy-submenu-wide {
  min-width: 232px;
}

.prodigy-menu:hover .prodigy-submenu,
.prodigy-menu:focus-within .prodigy-submenu,
.prodigy-menu.is-open .prodigy-submenu {
  display: grid;
}

.prodigy-submenu button {
  min-height: 20px;
  padding: 2px 26px 2px 18px;
  border: 0;
  border-radius: 0;
  background: #c0c0c0;
  color: #000;
  font: inherit;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
}

.prodigy-submenu button:hover,
.prodigy-submenu button:focus {
  outline: 0;
  background: #000080;
  color: #fff;
}

.chat-main-screen {
  position: relative;
  min-height: 724px;
  padding: 0 12px 44px;
  background: #fff;
  overflow: hidden;
}

.chat-main-logo {
  display: block;
  width: 390px;
  height: auto;
  margin: 2px 0 2px;
}

.chat-main-tagline {
  margin: 0 0 12px 3px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
}

.chat-main-directory {
  display: grid;
  grid-template-columns: 500px 264px;
  gap: 10px;
  max-width: none;
  margin: 0 0 3px;
  align-items: start;
}

.chat-main-start-links,
.chat-main-side-copy {
  display: grid;
  align-content: start;
  gap: 9px;
}

.chat-main-panel {
  border: 2px solid;
  border-color: #707070 #f7f7f7 #f7f7f7 #707070;
  background: #fff;
}

.chat-main-list-panel {
  height: 126px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 2px 4px;
}

.chat-main-list-row,
.chat-main-link {
  border: 0;
  background: transparent;
  color: #0000ee;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.chat-main-list-row {
  display: grid;
  grid-template-columns: 25px 1fr;
  align-items: center;
  width: 100%;
  min-height: 26px;
  padding: 1px 4px;
  color: #000;
  text-decoration: none;
}

.chat-main-list-row.is-selected {
  background: transparent;
}

.chat-doc-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.chat-main-start-links {
  height: auto;
  padding: 0 0 0 3px;
  gap: 2px;
}

.chat-main-start-links.chat-main-panel,
.chat-main-side-copy.chat-main-panel {
  border: 0;
  background: transparent;
}

.chat-main-start-links .chat-main-link,
.chat-main-side-copy .chat-main-link {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  min-height: 18px;
  padding: 0 0 0 14px;
  font-size: 14px;
  line-height: 1.12;
  text-align: left;
}

.chat-main-side-copy {
  gap: 4px;
}

.chat-main-start-links .chat-main-link::before,
.chat-main-side-copy .chat-main-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 10px;
  height: 10px;
  background: url("/static/img/historical/ChatBullet.gif?v=webchat-main-icons-1") center / contain no-repeat;
  text-decoration: none;
}

/* Runs from under the list panel down to the ad row, the way the original did -
   a fixed height left it stopping well short of the bottom. Bottom 44px keeps
   it level with the ads and clear of the nav bar. */
.chat-main-hot-panel {
  position: absolute;
  left: 12px;
  top: 212px;
  width: 500px;
  bottom: 44px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1.28;
}

.chat-main-hot-panel h1,
.chat-main-hot-panel h2,
.chat-main-side-copy h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
}

.chat-main-hot-panel h2 {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
}

.chat-main-hot-panel p {
  margin: 0 0 12px;
}

.chat-main-side-copy {
  position: absolute;
  top: 187px;
  right: auto;
  left: 522px;
  width: 232px;
  min-height: 245px;
  padding: 0;
  background: #fff;
}

.chat-main-side-copy h2 {
  margin-top: 20px;
  margin-bottom: 5px;
}

.chat-main-side-copy h2:first-child {
  margin-top: 0;
}

.chat-main-footer-area {
  position: absolute;
  left: 522px;
  right: 10px;
  bottom: 44px;
  display: flex;
  justify-content: flex-start;
  align-items: end;
  gap: 0;
}

.chat-main-startup-check {
  align-self: end;
  font-size: 14px;
}

.chat-main-close {
  align-self: end;
}

.chat-main-ads {
  display: flex;
  gap: 12px;
  align-items: end;
}

.chat-main-ads img {
  max-width: 116px;
  max-height: 56px;
  object-fit: contain;
}

.prodigy-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 4px;
  align-items: center;
  height: 36px;
  padding: 4px 7px;
  border-top: 1px solid #8a8a8a;
  background: #bcbcbc;
}

.prodigy-bottom-bar button {
  min-width: 36px;
  height: 28px;
  padding: 2px 7px;
  border: 1px solid;
  border-color: #fff #555 #555 #fff;
  border-radius: 0;
  background: #dfdfdf;
  color: #000;
  font: inherit;
}

.prodigy-bottom-bar button.is-active {
  background: #dfdfdf;
}

.member-mail-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

.member-mail-indicator[hidden] {
  display: none !important;
}

.member-mail-indicator img {
  display: block;
  width: 45px;
  height: 20px;
  image-rendering: pixelated;
}

.member-mail-indicator-floating {
  position: fixed;
  right: 78px;
  bottom: 16px;
  z-index: 3000;
}

.chat-room-window {
  position: fixed;
  left: 50%;
  top: 18px;
  z-index: 300;
  width: min(790px, calc(100% - 8px));
  transform: translateX(-50%);
}

.chat-room-window[hidden] {
  display: none;
}

.chat-window-shell,
.room-modal-window,
.im-window-shell,
.buddy-window-shell {
  border: 1px solid #8e8e8e;
  background: #c0c0c0;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}

.chat-window-shell {
  position: relative;
  overflow: visible;
}

.chat-window-titlebar,
.room-modal-titlebar,
.im-window-titlebar,
.buddy-window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  padding: 2px 5px;
  background: #808080;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  user-select: none;
}

.drag-titlebar {
  cursor: move;
}

.chat-window-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chat-window-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
  image-rendering: auto;
}

.chat-window-controls {
  display: flex;
  gap: 4px;
}

.chat-window-control,
.chat-side-button,
.chat-small-button,
.chat-large-button,
.chat-command-button,
.room-area-choice,
.room-list-choice {
  border: 1px solid #8c8c8c;
  border-top-color: #f5f5f5;
  border-left-color: #f5f5f5;
  border-right-color: #6f6f6f;
  border-bottom-color: #6f6f6f;
  border-radius: 0;
  background: #dfdfdf;
  color: #000;
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  box-shadow: 1px 1px 0 #808080;
}

.chat-window-control:active,
.chat-side-button:active,
.chat-small-button:active,
.chat-large-button:active,
.chat-command-button:active {
  border-top-color: #6f6f6f;
  border-left-color: #6f6f6f;
  border-right-color: #f5f5f5;
  border-bottom-color: #f5f5f5;
  box-shadow: none;
}

.chat-window-control {
  width: 28px;
  height: 24px;
  padding: 0;
  background: #dfdfdf;
  color: #000;
  font-weight: 700;
}

.chat-window-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  grid-template-rows: 365px 64px 32px;
  grid-template-areas:
    "transcript side"
    "input side"
    "footer footer";
  column-gap: 5px;
  row-gap: 4px;
  padding: 5px 6px 8px;
  background: #fff;
}

.chat-main-column {
  display: contents;
  min-width: 0;
}

.chat-side-column {
  grid-area: side;
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 180px;
}

.chat-transcript-panel,
.chat-member-list,
#chat-input,
.room-modal-area-list,
.room-modal-room-list,
.room-search-label input {
  background: #fff;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 #4f4f4f,
    inset -1px -1px 0 #f2f2f2;
}

.chat-transcript-panel {
  grid-area: transcript;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 2px 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.chat-transcript-line {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 6px;
  margin-bottom: 0;
  white-space: pre-wrap;
}

.chat-transcript-line strong {
  color: #1f248f;
}

.chat-transcript-line-system strong {
  color: #4c102c;
}

.chat-input-row {
  grid-area: input;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 5px;
  align-items: start;
  padding-top: 2px;
  border-top: 1px solid #d8d8d8;
}

#chat-input {
  resize: none;
  min-height: 62px;
  height: 62px;
  padding: 3px 4px;
  font: 700 15px Arial, Helvetica, sans-serif;
}

.chat-inline-actions {
  display: grid;
  gap: 4px;
}

.chat-command-button,
.chat-side-button {
  min-height: 28px;
  padding: 3px 7px;
}

.chat-bottom-row {
  grid-area: footer;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
  min-height: 32px;
  background: #fff;
}

.chat-small-button {
  min-width: 64px;
  min-height: 28px;
  padding: 3px 7px;
  white-space: nowrap;
}

.chat-large-button {
  margin-left: auto;
  min-width: 180px;
  min-height: 28px;
  padding: 3px 12px;
}

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

.chat-side-panel-title {
  padding: 2px 0 3px;
  font-size: 14px;
  font-weight: 700;
  background: #fff;
  color: #000;
}

.chat-member-list {
  min-height: 126px;
  max-height: 126px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 1px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.chat-member-row {
  padding: 1px 3px;
  font-weight: 700;
}

.room-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 8px;
  z-index: 420;
}

.room-modal-overlay[hidden] {
  display: none;
}

.room-modal-window {
  width: min(790px, calc(100% - 8px));
  position: relative;
}

.room-modal-body {
  background: #fff;
  padding: 8px 10px 9px;
}

.room-modal-top,
.room-modal-main,
.room-modal-middle,
.room-modal-footer {
  display: grid;
  gap: 7px;
}

.room-modal-top {
  grid-template-columns: 394px 342px;
  gap: 8px;
  align-items: start;
}

.room-modal-label,
.room-list-heading,
.room-search-label span {
  font-weight: 700;
  display: block;
  margin-bottom: 3px;
}

.room-modal-area-box,
.room-modal-type-box {
  min-height: 126px;
  margin: 0;
  padding: 7px 8px 8px;
  border: 1px solid #8c8c8c;
  background: #fff;
}

.room-modal-area-box legend,
.room-modal-type-box legend {
  padding: 0 4px;
  font-weight: 700;
}

.room-modal-area-list {
  min-height: 104px;
  padding: 2px;
  border: 2px solid #000;
  box-shadow:
    inset 1px 1px 0 #4f4f4f,
    inset -1px -1px 0 #f2f2f2;
}

.room-area-choice,
.room-list-choice {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1px 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 700;
  line-height: 1.15;
  appearance: none;
}

.room-area-choice.is-selected,
.room-list-choice.is-selected {
  background: #007f7f;
  color: #fff;
}

/* Two columns (All/ProdStar, Member/Private) so the four options fit inside the
   Room Type box instead of running "Private" off the right edge of the window. */
.room-modal-type-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  column-gap: 18px;
  row-gap: 6px;
  align-items: center;
  font-weight: 700;
  padding: 4px 0 0;
}

.room-modal-type-row label {
  display: grid;
  grid-template-columns: 18px max-content;
  align-items: center;
  column-gap: 5px;
  margin: 0;
  min-width: max-content;
  font-weight: 700;
  white-space: nowrap;
}

.room-modal-type-row label span {
  display: inline-block;
  white-space: nowrap;
}

.room-modal-type-row input[type="radio"] {
  flex: 0 0 auto;
  margin: 0;
}

.room-modal-middle {
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: end;
  margin-top: 3px;
}

.room-search-label input {
  width: 100%;
  height: 27px;
  padding: 3px 5px;
  font: inherit;
}

.room-modal-main {
  grid-template-columns: minmax(0, 1fr) 172px;
  margin-top: 1px;
}

.room-modal-room-list {
  min-height: 154px;
  max-height: 154px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 4px;
}

.room-list-choice {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.room-modal-actions {
  display: grid;
  gap: 8px;
  align-content: start;
}

.chat-side-button-bottom {
  margin-top: 8px;
}

.room-modal-footer {
  grid-auto-flow: column;
  justify-content: start;
  margin-top: 10px;
}

.im-window-shell {
  position: fixed;
  left: calc(50% - 390px);
  top: 52px;
  z-index: 900;
  width: min(775px, calc(100% - 16px));
}

.im-window-shell:not([hidden]) {
  z-index: 10000 !important;
}

.im-window-shell[hidden] {
  display: none;
}

.buddy-window-shell {
  position: fixed;
  left: calc(50% + 110px);
  top: 86px;
  z-index: 850;
  width: min(360px, calc(100vw - 16px));
}

.buddy-window-shell[hidden] {
  display: none;
}

.buddy-window-body {
  background: #fff;
  padding: 8px 10px 9px;
  font: 700 15px Arial, Helvetica, sans-serif;
}

.buddy-add-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 7px;
  align-items: end;
  margin: 0 0 8px;
  padding: 7px 9px 8px;
  border: 1px solid #b0b0b0;
  background: #fff;
}

.buddy-add-box legend {
  padding: 0 4px;
  font-weight: 700;
}

.buddy-add-label {
  display: grid;
  gap: 3px;
}

.buddy-add-label input {
  height: 27px;
  padding: 3px 5px;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 #4f4f4f,
    inset -1px -1px 0 #f2f2f2;
  font: inherit;
}

.buddy-list-heading {
  margin: 0 0 3px;
  font-weight: 700;
}

.buddy-list-box {
  height: 176px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 2px solid #000;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 #4f4f4f,
    inset -1px -1px 0 #f2f2f2;
}

.buddy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  padding: 2px 4px;
  text-align: left;
  font: inherit;
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
}

.buddy-row span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buddy-row span:last-child {
  color: #555;
  font-size: 13px;
  white-space: nowrap;
}

.buddy-row.is-online span:last-child {
  color: #006000;
}

.buddy-row.is-selected {
  background: #007f7f;
  color: #fff;
}

.buddy-row.is-selected span:last-child {
  color: #fff;
}

.buddy-empty-row {
  padding: 4px;
  color: #555;
  font-weight: 700;
}

.buddy-action-row {
  display: grid;
  grid-template-columns: 1fr 78px 78px;
  gap: 5px;
  margin-top: 8px;
}

.buddy-status {
  min-height: 18px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
}

.im-window-body {
  background: #fff;
  padding: 8px 10px 9px;
}

.im-send-box {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 112px;
  gap: 8px 14px;
  align-items: start;
  margin: 0 0 7px;
  padding: 8px 10px 7px;
  border: 1px solid #b0b0b0;
}

.im-send-box legend {
  padding: 0 4px;
  font-weight: 700;
}

.im-recipient-input,
.im-message-input,
.im-name-list,
.im-transcript {
  border: 1px solid #7f7f7f;
  border-top-color: #303030;
  border-left-color: #303030;
  border-right-color: #fff;
  border-bottom-color: #fff;
  border-radius: 0;
  background: #fff;
  font: inherit;
}

.im-recipient-input {
  width: 160px;
  height: 25px;
  padding: 2px 4px;
  font-weight: 700;
  margin-top: 22px;
}

.im-message-input {
  width: 100%;
  height: 62px;
  resize: none;
  padding: 4px;
  font: 700 15px Arial, Helvetica, sans-serif;
}

.im-send-actions {
  display: grid;
  gap: 7px;
}

.im-conversation-row {
  display: grid;
  grid-template-columns: 202px minmax(0, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.im-name-list {
  height: 134px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* One screen name per line, full-width rows. These are <button> elements, so
   they must be forced to block or the browser lays the first names out
   side-by-side like inline text. */
.im-name-row {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  text-align: left;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Prodigy's list selection was teal, not Windows blue. */
.im-name-row.is-selected {
  background: #008080;
  color: #fff;
}

.im-transcript {
  height: 134px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

/* The IM transcript is narrower than the room transcript: tighter name column,
   and speaker names print in black like the real Instant Message Center. */
.im-transcript .chat-transcript-line {
  grid-template-columns: 112px minmax(0, 1fr);
  line-height: 1.25;
}

.im-transcript .chat-transcript-line strong {
  color: #000;
}

/* The real Instant Message Center wrapped a message well before the right edge,
   leaving a gutter. Our message cell filled the whole width; hold it back so
   long lines wrap with room to spare, like the original. */
.im-transcript .chat-transcript-line span {
  padding-right: 42px;
}

.im-bottom-row {
  display: grid;
  grid-template-columns: 202px minmax(0, 1fr);
  column-gap: 8px;
  margin-top: 5px;
}

.im-button-row {
  display: grid;
  grid-column: 2;
  grid-template-columns: 42px 56px 48px 64px 94px 110px 60px;
  gap: 4px;
  align-items: center;
  justify-content: start;
  margin-left: 0;
  width: 100%;
  white-space: nowrap;
}

.im-button-row .chat-small-button {
  width: 100%;
  min-width: 0;
  min-height: 25px;
  padding: 2px 4px;
  font-size: 14px;
}

.im-button-row #im-help-button {
  width: 100%;
}

.im-button-row #im-delete-button {
  width: 100%;
}

.im-button-row #im-save-button {
  width: 100%;
}

.im-button-row #im-exclude-button {
  width: 100%;
}

.im-button-row #im-member-info-button {
  width: 100%;
}

.im-button-row #im-setup-button {
  width: 100%;
}

.im-button-row #im-cancel-button {
  width: 100%;
}

.im-reminder-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 202px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-top: 7px;
  padding-left: 0;
}

.im-reminder-label {
  font-weight: 700;
  justify-self: end;
}

.im-reminder-copy {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.setup-window-shell {
  width: min(460px, calc(100vw - 16px));
  border: 2px solid #000;
  background: #fff;
  box-shadow: 2px 2px 0 #808080;
  color: #000;
  font: 700 15px Arial, Helvetica, sans-serif;
  z-index: 900;
}

.setup-window-shell[hidden] {
  display: none;
}

.setup-window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  padding: 2px 5px;
  background: #808080;
  color: #fff;
  user-select: none;
}

.setup-window-body {
  padding: 12px 14px 10px;
  background: #fff;
}

.setup-options-box {
  min-height: 94px;
  margin: 0 0 12px;
  padding: 12px 12px 10px;
  border: 1px solid #8c8c8c;
  background: #fff;
}

.setup-options-box:last-of-type {
  margin-bottom: 0;
}

.setup-options-box legend {
  padding: 0 6px;
  font-weight: 700;
}

.setup-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.setup-check-row input {
  width: 15px;
  height: 15px;
}

.setup-help-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
}

.setup-button-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.create-room-window-shell {
  width: min(470px, calc(100vw - 16px));
  border: 2px solid #000;
  background: #fff;
  box-shadow: 2px 2px 0 #808080;
  color: #000;
  font: 700 15px Arial, Helvetica, sans-serif;
  z-index: 930;
}

.create-room-window-shell[hidden] {
  display: none;
}

.create-room-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  padding: 2px 5px;
  background: #808080;
  color: #fff;
  user-select: none;
}

.create-room-body {
  padding: 12px 14px 10px;
  background: #fff;
}

.create-room-field {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.create-room-field input,
.create-room-field select {
  height: 28px;
  padding: 3px 5px;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 #4f4f4f,
    inset -1px -1px 0 #f2f2f2;
  font: inherit;
  background: #fff;
}

.create-room-mode-box {
  display: grid;
  gap: 6px;
  margin: 2px 0 12px;
}

.create-room-mode-box label,
.create-room-check {
  display: flex;
  align-items: center;
  gap: 7px;
}

.create-room-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.create-room-help-copy {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.25;
}

.create-room-button-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.alert-window-shell {
  width: min(520px, calc(100vw - 16px));
  border: 2px solid #000;
  background: #fff;
  box-shadow: 2px 2px 0 #808080;
  color: #000;
  font: 700 15px Arial, Helvetica, sans-serif;
  z-index: 940;
}

.alert-window-shell[hidden] {
  display: none;
}

.alert-window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  padding: 2px 5px;
  background: #808080;
  color: #fff;
  user-select: none;
}

.alert-window-body {
  padding: 12px 14px 10px;
  background: #fff;
}

.alert-window-copy,
.alert-window-note {
  margin: 0 0 10px;
  line-height: 1.25;
}

.alert-window-field {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.alert-window-field textarea {
  min-height: 76px;
  padding: 4px 5px;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 #4f4f4f,
    inset -1px -1px 0 #f2f2f2;
  font: inherit;
  resize: vertical;
  background: #fff;
}

.alert-window-section-title {
  margin: 4px 0 8px;
}

.alert-window-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.alert-window-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.alert-window-button-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.moderator-window-shell {
  width: min(460px, calc(100vw - 16px));
  border: 2px solid #000;
  background: #fff;
  box-shadow: 2px 2px 0 #808080;
  color: #000;
  font: 700 15px Arial, Helvetica, sans-serif;
  z-index: 945;
}

.moderator-window-shell[hidden] {
  display: none;
}

.moderator-window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  padding: 2px 5px;
  background: #808080;
  color: #fff;
  user-select: none;
}

.moderator-window-body {
  padding: 12px 14px 10px;
  background: #fff;
}

.moderator-window-field {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.moderator-window-check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
}

.moderator-window-field select,
.moderator-window-field textarea {
  border: 2px solid #000;
  border-radius: 0;
  box-shadow:
    inset 1px 1px 0 #4f4f4f,
    inset -1px -1px 0 #f2f2f2;
  font: inherit;
  background: #fff;
}

.moderator-window-field select {
  height: 28px;
  padding: 3px 5px;
}

.moderator-window-field textarea {
  min-height: 84px;
  padding: 4px 5px;
  resize: vertical;
}

.moderator-window-note {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.25;
}

.moderator-window-history-box {
  margin-top: 10px;
  border: 1px solid #000;
  background: #fff;
}

.moderator-window-history-title {
  padding: 4px 6px;
  border-bottom: 1px solid #000;
  background: #efefef;
  font-size: 13px;
}

.moderator-window-history-list {
  min-height: 78px;
  max-height: 120px;
  overflow: auto;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1.25;
}

.moderator-window-history-list p {
  margin: 0 0 6px;
}

.moderator-window-history-list p:last-child {
  margin-bottom: 0;
}

.moderator-window-button-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.detail-window-shell {
  width: min(470px, calc(100vw - 16px));
  border: 2px solid #000;
  background: #fff;
  box-shadow: 2px 2px 0 #808080;
  color: #000;
  font: 700 15px Arial, Helvetica, sans-serif;
  z-index: 950;
}

.detail-window-shell[hidden] {
  display: none;
}

.detail-window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  padding: 2px 5px;
  background: #808080;
  color: #fff;
  user-select: none;
}

.detail-window-body {
  padding: 20px 22px 16px;
  background: #fff;
}

/* The real Member Information dialog had no inner frame - the label/value rows
   sit straight on the dialog face, labels right-aligned into a column. */
.detail-window-content {
  min-height: 172px;
  border: 0;
  padding: 0;
  background: #fff;
}

.detail-window-content p {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  column-gap: 12px;
  margin: 0 0 18px;
  line-height: 1.3;
}

.detail-window-content p:last-child {
  margin-bottom: 0;
}

.detail-window-content strong {
  display: block;
  min-width: 0;
  text-align: right;
}

.detail-window-button-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}

.detail-window-button-row .chat-small-button {
  min-width: 116px;
  min-height: 27px;
  padding: 3px 12px;
}

.detail-window-button-row #detail-window-secondary {
  min-width: 186px;
}

/* ---------------------------------------------------------------------------
   Large window size (Set-Up Options -> Window Size). Same 1990s look, just
   roomier: the service shell and the chat window scale up so more of the room
   and more of the transcript fit on screen. The Instant Message Center is
   deliberately NOT scaled - it is a period-exact recreation.
   --------------------------------------------------------------------------- */
.chat-web-app[data-window-size="large"] {
  width: min(1320px, calc(100% - 8px));
}

.chat-web-app[data-window-size="large"] .chat-main-screen {
  min-height: 880px;
}

.chat-web-app[data-window-size="large"] .chat-room-window {
  width: min(1120px, calc(100% - 8px));
}

/* The transcript row grows with the viewport instead of being pinned, so Large
   fills a big screen but still fits a laptop (the minmax floor). The reserved
   268px covers the window offset, titlebar, padding, input row, footer, gaps
   and the guest banner. */
.chat-web-app[data-window-size="large"] .chat-window-body {
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-rows: minmax(380px, calc(100vh - 268px)) 76px 32px;
}

.chat-web-app[data-window-size="large"] .chat-side-column {
  min-width: 220px;
}

/* Roomier than Classic's 126px, but deliberately NOT full height - the roster
   does not need to show everyone at once, and the buttons ride up under it the
   same way they do in Classic. */
.chat-web-app[data-window-size="large"] .chat-member-list {
  min-height: 220px;
  max-height: none;
  height: calc(100vh - 660px);
}

.chat-web-app[data-window-size="large"] .chat-transcript-line {
  grid-template-columns: 196px 1fr;
}

/* Set-Up Options -> "Color screen names in the transcript" off. The real
   service printed the whole transcript in plain black. */
/* Plain black AND the same weight as the message text. The transcript panel is
   700, and <strong> defaults to `bolder` - which against a 700 parent computes
   to 900 - so the names were rendering heavier than everything else. inherit
   puts them back in step for the period-correct flat look. */
.chat-web-app[data-name-colors="off"] .chat-transcript-line strong,
.chat-web-app[data-name-colors="off"] .chat-transcript-line-system strong {
  color: #000;
  font-weight: inherit;
}

.health-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.health-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border: 1px solid rgba(31, 58, 95, 0.15);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.86);
}

.health-row span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 800;
}

.health-ok span {
  color: #14633f;
  background: var(--success);
}

.health-warning span {
  color: #8a2233;
  background: var(--error);
}

@media (max-width: 980px) {
  .im-window-shell {
    left: 8px;
    top: 18px;
  }

  .im-send-box,
  .im-conversation-row {
    grid-template-columns: 1fr;
  }

  .im-reminder-label {
    justify-self: start;
  }
}

@media (max-width: 980px) {
  .chat-window-body,
  .room-modal-top,
  .room-modal-main,
  .room-modal-middle,
  .chat-input-row {
    grid-template-columns: 1fr;
  }

  .chat-main-column {
    grid-template-rows: minmax(340px, 1fr) auto auto;
  }

  .chat-large-button {
    margin-left: 0;
  }
}