/* Reconstructed from img/c001.jpg–c017.jpg. No screenshot backgrounds. */
:root {
  --classic-blue: #323f91;
  --classic-panel: #96aad1;
  --classic-edge: #171943;
}
body[data-view="admin"],
body[data-view="chat"],
.legacy-login {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
  background: #eceadd;
  color: #111;
  min-height: 100vh;
  display: flow-root;
}
:is(body[data-view="admin"], body[data-view="chat"], .legacy-login) button {
  border-radius: 2px;
  padding: 3px 10px;
  min-height: 23px;
  border: 1px solid #4c4c50;
  color: #111;
  background: linear-gradient(#fff, #e6e6e1 48%, #c9c9c4);
  box-shadow:
    inset 1px 1px #fff,
    1px 1px #202443;
  font-size: 11px;
  transition: none;
}
:is(body[data-view="admin"], body[data-view="chat"], .legacy-login)
  button:hover {
  background: linear-gradient(#fff, #dbe5ff);
}
:is(body[data-view="admin"], body[data-view="chat"], .legacy-login)
  button:active {
  box-shadow: inset 1px 1px #626262;
}
:is(body[data-view="admin"], body[data-view="chat"], .legacy-login)
  button:disabled {
  opacity: 1;
  color: #777;
  background: #d1d1cd;
  box-shadow: inset 1px 1px #eee;
}
:is(body[data-view="admin"], body[data-view="chat"], .legacy-login)
  :is(input, select, textarea) {
  border-radius: 0;
  padding: 2px 4px;
  border: 1px solid #777;
  border-top-color: #3b3b3b;
  background: #fffef7;
  color: #111;
  box-shadow: inset 1px 1px #b8b8ae;
  min-height: 22px;
  font:
    12px Tahoma,
    Arial,
    sans-serif;
}
:is(body[data-view="admin"], body[data-view="chat"], .legacy-login)
  :is(input[type="checkbox"]) {
  min-height: 13px;
  height: 13px;
  width: 13px;
}
:is(body[data-view="admin"], body[data-view="chat"], .legacy-login)
  :focus-visible {
  outline: 2px solid #171975;
  outline-offset: 2px;
}
:is(body[data-view="admin"], body[data-view="chat"], .legacy-login) a {
  color: #152876;
  text-decoration: underline;
}
:is(body[data-view="admin"], body[data-view="chat"]) .topbar {
  min-height: 33px;
  padding: 4px 8px;
  gap: 18px;
  flex-wrap: wrap;
  background: #eceadd;
  border-bottom: 1px solid #787976;
  font-size: 11px;
}
:is(body[data-view="admin"], body[data-view="chat"]) .brand {
  gap: 4px;
}
:is(body[data-view="admin"], body[data-view="chat"]) .brand-mark {
  border-radius: 0;
  padding: 1px 4px;
  background: #323f91;
  font-size: 12px;
}
:is(body[data-view="admin"], body[data-view="chat"]) .brand strong {
  font-size: 11px;
  letter-spacing: 0;
}
:is(body[data-view="admin"], body[data-view="chat"]) .brand small {
  display: none;
}
:is(body[data-view="admin"], body[data-view="chat"]) .topbar nav {
  gap: 4px;
}
:is(body[data-view="admin"], body[data-view="chat"]) .topbar nav a {
  border-radius: 0;
  padding: 3px 7px;
  font-size: 11px;
  color: #111;
  text-decoration: none;
}
:is(body[data-view="admin"], body[data-view="chat"]) .topbar nav a.active {
  color: #fff;
  background: #323f91;
}
:is(body[data-view="admin"], body[data-view="chat"]) .top-actions {
  font-size: 11px;
  gap: 6px;
}
.classic-title,
body[data-view="admin"] .dialog-head,
body[data-view="chat"] .dialog-head {
  padding: 4px 6px;
  min-height: 27px;
  color: #fff;
  background: linear-gradient(
    #4599fb 0%,
    #0876ee 15%,
    #0052d6 52%,
    #0064ef 78%,
    #174bab 100%
  );
  border: 1px solid #6198fa;
  border-bottom: 1px solid #151d70;
  font:
    bold 12px Tahoma,
    Arial,
    sans-serif;
  text-shadow: 1px 1px #1d4e9b;
}
body[data-view="admin"] .page {
  max-width: 100%;
  padding: 0 12px 16px;
}
body[data-view="admin"] .page-heading {
  width: min(492px, 100%);
  margin: 12px auto 6px;
  gap: 15px;
}
body[data-view="admin"] .page-heading .eyebrow {
  display: none;
}
body[data-view="admin"] .page-heading h1 {
  font-size: 13px;
  letter-spacing: 0;
  margin: 0;
}
body[data-view="admin"] .page-heading .field {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 11px;
}
body[data-view="admin"] .admin-layout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: min(492px, 100%);
  margin: auto;
  padding: 3px;
  border: 2px solid #4766d4;
  background: var(--classic-blue);
  box-shadow:
    inset 1px 1px #add1ff,
    2px 2px 3px #0005;
}
body.classic-options-document {
  min-height: 100dvh;
  background: #044889;
}
body.classic-options-document .page {
  padding: 0;
}
body.classic-options-document .page-heading,
body.classic-options-document .admin-layout > .classic-title {
  display: none;
}
body.classic-options-document .admin-layout {
  width: 100%;
  border: 0;
  box-shadow: none;
  background: #044889;
}
body[data-view="admin"].classic-options-document
  :is(.admin-nav, .admin-content, .classic-help, .classic-status) {
  background: #044889;
}
body[data-view="admin"].classic-options-document .admin-content {
  background: #eee;
  border-radius: 10px;
  color: blue;
}
body[data-view="admin"] .admin-nav {
  border: 0;
  border-radius: 0;
  padding: 6px 6px 0;
  background: var(--classic-blue);
  max-height: none;
  overflow: visible;
}
.classic-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  column-gap: 2px;
}
.classic-tabs > :nth-child(6) {
  grid-column: 1;
}
.classic-tabs [data-section="Reserved Icons"] {
  white-space: nowrap;
  font-size: 9px !important;
}
body[data-view="admin"] .classic-tabs button {
  display: block;
  width: 100%;
  padding: 3px 2px;
  min-height: 23px;
  border-radius: 8px 8px 0 0;
  border: 1px solid #10133c;
  border-bottom: 0;
  color: #fff;
  background: linear-gradient(#8e939e, #535667);
  box-shadow: inset 1px 1px #c3c6d4;
  font-size: 10px;
  font-weight: normal;
  text-align: center;
  overflow-wrap: anywhere;
}
body[data-view="admin"] .classic-tabs button.active {
  background: var(--classic-panel);
  color: #111;
  font-weight: bold;
  position: relative;
  z-index: 1;
}
.classic-more {
  color: #fff;
  font-size: 10px;
  margin: 5px 0;
}
.classic-search {
  font-size: 10px;
}
.classic-search summary {
  cursor: pointer;
}
.classic-more summary {
  cursor: pointer;
  padding: 2px;
}
body[data-view="admin"] .classic-more[open] {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
body[data-view="admin"] .classic-more button {
  width: auto;
  display: inline-block;
  padding: 2px 5px;
  font-size: 10px;
  margin: 2px;
  text-align: start;
}
body[data-view="admin"] .classic-more button.active {
  background: #b9cbee;
  color: #111;
}
body[data-view="admin"] .admin-content {
  border-radius: 0;
  border: 1px solid #0f1026;
  background: var(--classic-panel);
  box-shadow:
    inset 1px 1px #e0e5f2,
    inset -1px -1px #5d729f;
  padding: 9px 10px;
  min-height: 340px;
  margin: 0 6px 6px;
}
body[data-view="admin"] .content-toolbar {
  gap: 6px;
  margin-bottom: 6px;
}
body[data-view="admin"] .content-toolbar h2 {
  color: #111;
  font-size: 11px;
  margin: 0;
  flex: 1;
}
body[data-view="admin"] .content-toolbar .field {
  margin-bottom: 0;
  font-size: 10px;
}
body[data-view="admin"] .content-toolbar :is(input, select) {
  width: 130px;
  max-width: 100%;
}
.classic-record-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  gap: 9px;
  min-height: 274px;
}
.classic-record-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 10px;
}
.classic-record-actions button {
  width: 100%;
}
body[data-view="admin"] .table-wrap {
  border: 1px solid #28284d;
  background: white;
  box-shadow: inset 1px 1px #7f7f83;
  max-height: 390px;
  overflow: auto;
  scrollbar-color: #d7d7c8 #f5f4e9;
  scrollbar-width: auto;
}
.classic-list {
  color: #111;
  font:
    11px Tahoma,
    Arial,
    sans-serif;
  width: 100%;
}
body[data-view="admin"] :is(th, td) {
  padding: 3px 5px;
  border: 1px solid #fff;
  font-size: 11px;
}
body[data-view="admin"] th {
  background: linear-gradient(#b8b8b8, #929292);
  color: #111;
  font-weight: normal;
  position: sticky;
  top: 0;
}
body[data-view="admin"] tbody tr {
  background: #ededed;
}
body[data-view="admin"] tbody tr:nth-child(even) {
  background: #f6f6f6;
}
body[data-view="admin"] tbody tr.selected {
  color: #fff;
  background: #302483;
}
.classic-list tr {
  cursor: default;
}
.classic-list td img {
  object-fit: contain;
  vertical-align: middle;
}
.classic-list td:first-child {
  white-space: nowrap;
}
.classic-help {
  margin: 0 6px 5px;
  padding: 5px;
  background: var(--classic-panel);
  border: 1px solid #10132c;
  box-shadow: inset 1px 1px #dbe1ef;
}
body[data-view="admin"] .classic-help button {
  color: #b30000;
  font:
    bold 15px Arial,
    sans-serif;
  padding: 2px 7px;
  text-shadow: 1px 1px #fff;
}
.classic-status {
  color: #151515;
  background: #eceadd;
  font-size: 10px;
  padding: 2px 4px;
  border-top: 1px solid #9ba0b1;
}
body[data-view="admin"] .metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
body[data-view="admin"] .metric-card {
  border-radius: 0;
  background: #f5f5ef;
  padding: 10px;
}
body[data-view="admin"] .metric-card strong {
  font-size: 20px;
}
body[data-view="admin"] .metric-card span {
  color: #333;
  font-size: 10px;
}
body[data-view="admin"] .muted {
  color: #24304a;
}
:is(body[data-view="admin"], body[data-view="chat"]) .modal {
  background: var(--original-outerBackground, var(--classic-blue));
  border: 3px solid #4776dd;
  border-radius: 2px;
  color: var(--original-outerText, #111);
  width: min(390px, calc(100vw - 20px));
  max-height: 92vh;
  box-shadow:
    inset 1px 1px #b3d5ff,
    2px 2px 5px #0007;
}
:is(body[data-view="admin"], body[data-view="chat"]) .modal.original-ip-list {
  width: min(460px, calc(100vw - 20px));
}
.original-ip-list .ip-list-heading { text-align: center; margin: 4px 0 8px; }
.original-ip-list .ip-list-scroll { height: min(240px, 40vh); overflow: auto; border: 1px solid #808080; background: white; color: black; }
.original-ip-list table { width: 100%; border-collapse: collapse; }
.original-ip-list th { text-align: start; background: #d4d0c8; padding: 3px 6px; }
.original-ip-list td { padding: 0; }
html[lang] body[data-view] .modal.original-ip-list tbody td button {
  width: 100%; text-align: start; background: transparent; background-image: none;
  color: inherit; border: 0; box-shadow: none; border-radius: 0; min-height: 22px;
  padding: 2px 4px; font: inherit;
}
.original-ip-list tr[aria-selected="true"] { background: #000080; color: white; }
html[lang] body[data-view] .modal.original-ip-list tbody tr[aria-selected="true"] td { background: #000080; color: white; }
.original-ip-list .ip-list-content > .actions { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
.modal[data-moderation="ip-ban"] .ip-ban-kick-options { display: flex; flex-direction: column; gap: 5px; }
.modal[data-moderation="ip-ban"] .ip-ban-kick-choice { display: flex; align-items: center; gap: 5px; }
.modal[data-moderation="ip-ban"] .ip-ban-kick-choice input[type="radio"] {
  appearance: auto; width: 13px; height: 13px; min-height: 0; flex: 0 0 13px;
  margin: 0; padding: 0; border: 0; border-radius: 50%; box-shadow: none; background: transparent;
}
:is(body[data-view="admin"], body[data-view="chat"]) .modal::backdrop {
  background: #11151e55;
  backdrop-filter: none;
}
:is(body[data-view="admin"], body[data-view="chat"]) .dialog-head {
  padding: 3px 4px;
}
:is(body[data-view="admin"], body[data-view="chat"]) .dialog-head h2 {
  font:
    bold 12px Tahoma,
    Arial,
    sans-serif;
}
:is(body[data-view="admin"], body[data-view="chat"]) .dialog-head button {
  padding: 0;
  font-size: 0;
  width: 20px;
  min-height: 20px;
  color: #fff;
  background: linear-gradient(135deg, #fdb9a0, #dc4323);
  border: 1px solid #fff;
}
:is(body[data-view="admin"], body[data-view="chat"])
  .dialog-head
  button::after {
  content: "×";
  font:
    bold 18px/15px Arial,
    sans-serif;
}
:is(body[data-view="admin"], body[data-view="chat"])
  .modal
  > :is(form, .dialog-content) {
  margin: 8px;
  padding: 10px 8px;
  background: var(--original-tabsBackground, var(--classic-panel));
  border: 1px solid #11142c;
  box-shadow: inset 1px 1px #d8dfef;
  font-size: 11px;
 color:var(--original-tabsText, inherit);}
:is(body[data-view="admin"], body[data-view="chat"]) .modal .form-grid {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
:is(body[data-view="admin"], body[data-view="chat"]) .modal .field {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  margin: 0;
  font-size: 11px;
}
:is(body[data-view="admin"], body[data-view="chat"]) .modal .check-field {
  display: flex;
  flex-direction: row-reverse;
  justify-content: end;
}
:is(body[data-view="admin"], body[data-view="chat"])
  .modal
  :is(.actions, footer) {
  padding: 6px 0 0;
  margin: 0;
}
body[data-view="admin"] .modal[data-resource="chatwatch"] {
  width: min(325px, calc(100vw - 20px));
}
body[data-view="admin"]
  .modal[data-resource="chatwatch"]
  .legacy-watch-blank-help {
  grid-column: 1 / -1;
  color: inherit;
  font: 11px Arial;
}
body[data-view="admin"] .modal[data-resource="emoticons"] {
  width: min(310px, calc(100vw - 20px));
}
body[data-view="admin"] .modal[data-resource="accounts"] {
  width: min(375px, calc(100vw - 20px));
}
.classic-permissions {
  border: 1px solid #161834;
  background: #eee;
  max-height: 225px;
  overflow: auto;
  padding: 2px;
}
.moderation-target {
  display: flex;
  align-items: center;
  gap: 8px;
}
.advanced-user-details { display: grid; gap: 4px; margin: 5px 0; }
html[lang] body[data-view] dialog.modal.source-advanced-dialog { width: min(540px, calc(100vw - 18px)); max-height: calc(100vh - 20px); }
.source-advanced-dialog > footer.actions { display: none; }
.source-advanced-content { font-size: 12px; }
.source-advanced-target { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #999; padding: 4px 4px 8px; margin-bottom: 5px; }
.source-advanced-target strong { flex: 1; text-align: center; }
.source-advanced-grid { display: grid; gap: 6px; }
.source-advanced-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 120px; align-items: center; gap: 6px; }
.source-advanced-row > span { overflow-wrap: anywhere; }
html[lang] body[data-view] .source-advanced-row > button { width: 100%; margin: 0; min-height: 23px; }
html[lang] body[data-view] .source-advanced-row > :is(input, select, textarea) { width: 100%; margin: 0; min-width: 0; }
html[lang] body[data-view] .source-advanced-row > .field { display: flex; margin: 0; gap: 5px; min-width: 0; }
.source-advanced-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px; margin-top: 10px; }
.source-advanced-footer .actions { display: flex; gap: 5px; margin: 0; padding: 0; }
html[lang] body.chat-client[data-original-theme] dialog.modal.source-advanced-dialog button:disabled { color: #666; background: #e5e5e5; text-shadow: none; }
html[lang] body.chat-client[data-original-theme] dialog.modal.source-advanced-dialog .source-advanced-row > button { background-image: none; }
html[lang] body[data-view] .source-advanced-footer .advanced-keep-control { flex-wrap: wrap; }
html[lang] body[data-view] .source-advanced-footer .advanced-keep-control .field { display: flex; flex-direction: row; width: auto; gap: 5px; margin: 0; align-items: center; }
html[lang] body[data-view] .source-advanced-footer .advanced-keep-control .check-field { flex-direction: row-reverse; }
@media (max-width: 460px) { .source-advanced-row { grid-template-columns: 58px minmax(0, 1fr) 100px; gap: 4px; } }
.advanced-user-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 6px; align-items: center;
}
html[lang] body[data-view] .advanced-user-detail > button { width: 100%; margin: 0; }
html[lang] body[data-view] .advanced-user-room .field {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 4px; margin: 0;
}
:is(body[data-view="admin"], body[data-view="chat"])
  .modal[data-moderation="kick"] {
  width: min(280px, calc(100vw - 20px));
}
:is(body[data-view="admin"], body[data-view="chat"])
  .modal[data-moderation]
  .field:has(textarea) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body[data-view="admin"] .modal .classic-permissions .field {
  grid-template-columns: minmax(0, 1fr) 90px;
  border-bottom: 1px solid #fff;
  padding: 2px 4px;
}
body[data-view="admin"] .modal .classic-permissions select {
  font-size: 10px;
}
/* ChatMaster's c001 desktop structure, with the modern room list retained. */
body[data-view="chat"] .page {
  width: min(1050px, 100%);
  margin: 10px auto;
  padding: 8px;
  background: var(--classic-blue);
  border: 2px solid #5374d9;
}
body[data-view="chat"] .page-heading {
  margin-bottom: 8px;
  min-height: 48px;
  padding: 0 6px;
  color: #fff;
}
body[data-view="chat"] .page-heading h1 {
  font-size: 13px;
  letter-spacing: 0;
}
body[data-view="chat"] .page-heading .eyebrow {
  font-size: 9px;
  margin: 0 0 4px;
  letter-spacing: 0;
  color: #fff;
}
body[data-view="chat"] .chat-layout {
  grid-template-columns: 145px minmax(0, 1fr) 180px;
  gap: 5px;
  height: calc(100vh - 240px);
  min-height: 360px;
}
body[data-view="chat"] .panel {
  border-radius: 0;
  border: 1px solid #151632;
  box-shadow: inset 1px 1px #d8dff1;
}
body[data-view="chat"] :is(.room-sidebar, .people-sidebar) {
  background: var(--classic-panel);
}
body[data-view="chat"] .panel-heading {
  padding: 5px;
  border-bottom: 1px solid #59668e;
}
body[data-view="chat"] .panel-heading h2 {
  font-size: 11px;
}
body[data-view="chat"] :is(.tabs button, .list-item) {
  font-size: 11px;
}
body[data-view="chat"] .list {
  padding: 3px;
}
body[data-view="chat"] .list-item {
  padding: 4px;
  border-radius: 0;
  gap: 5px;
  margin: 0;
  box-shadow: none;
  background: #eee;
  min-height: 27px;
}
body[data-view="chat"] .list-item:nth-child(even) {
  background: #f6f6f6;
}
body[data-view="chat"] .list-item.active {
  color: #fff;
  background: #302483;
}
body[data-view="chat"] .list-item.active small {
  color: #fff;
}
body[data-view="chat"] .list-item small {
  font-size: 10px;
  margin: 0;
  color: #333;
}
body[data-view="chat"] .sidebar-bottom {
  padding: 5px;
  gap: 5px;
  border-top-color: #59668e;
}
body[data-view="chat"] .sidebar-bottom img {
  max-width: 100%;
}
body[data-view="chat"] .chat-room-heading {
  padding: 5px 8px;
  gap: 7px;
  background: var(--classic-panel);
}
body[data-view="chat"] .chat-room-heading h2 {
  font-size: 12px;
}
body[data-view="chat"] .messages {
  padding: 5px;
  color: var(--fg);
  background: var(--surface);
}
body[data-view="chat"] .message {
  padding: 3px 0;
  gap: 6px;
  line-height: 1.3;
}
body[data-view="chat"] .message .byline {
  font-size: 11px;
  gap: 6px;
}
body[data-view="chat"] .message .content {
  font-size: 12px;
}
body[data-view="chat"] .message .content.text-large {
  font-size: 15px;
}
body[data-view="chat"] .composer {
  padding: 5px;
  background: var(--classic-panel);
}
body[data-view="chat"] .composer input {
  background: #fff;
  min-height: 30px;
}
body[data-view="chat"] .events-strip {
  padding: 5px 0;
  gap: 5px;
}
body[data-view="chat"] .footer-note {
  color: #111;
  background: var(--classic-panel);
  padding: 7px;
  margin: 0;
  border: 1px solid #10142f;
  font-size: 10px;
}
body[data-view="chat"] .pm-window {
  border-radius: 0;
  border: 2px solid #446ce0;
}
body[data-view="chat"] .pm-window header {
  background: linear-gradient(#1387ff, #004bcc);
  font-size: 11px;
  padding: 3px 5px;
}
/* Original cf.html loader settings; img2/7.gif supplies the rendered form. */
.legacy-login {
  background: #fff;
  color: #c04571;
  min-height: 100vh;
}
html:has(.legacy-login) {
  background: #fff;
}
.legacy-login {
  display: flow-root;
}
.chat-window-title {
  margin: -5px -5px 6px;
}
.digichat-menu {
  position: relative;
  font-size: 11px;
}
.digichat-menu summary {
  cursor: pointer;
  padding: 2px 5px;
}
.digichat-menu-items {
  position: absolute;
  z-index: 20;
  min-width: 180px;
  background: #fffef4;
  border: 1px solid #777;
  box-shadow: 2px 2px #1115;
  padding: 4px;
}
.digichat-menu-items a,
.digichat-menu-items button {
  display: block;
  width: 100%;
  padding: 5px;
  text-align: start;
}
@media (min-width: 1000px) {
  .classic-more {
    position: absolute;
    inset-inline-start: calc(100% + 12px);
    inset-block-start: 0;
    width: 190px;
    background: #323f91;
    padding: 5px;
    border: 1px solid #323f91;
  }
  .classic-more button {
    flex: 1 0 45%;
  }
  body[data-view="admin"] .classic-record-list {
    height: 310px;
    min-height: 310px;
  }
  body[data-view="admin"] .classic-record-list > .table-wrap {
    height: 100%;
    min-height: 0;
  }
}
.advanced-room > summary {
  cursor: pointer;
  padding: 4px;
}
.advanced-room[open] > .field,
.advanced-room[open] > fieldset {
  margin-top: 8px !important;
}
body[data-view="admin"] .modal[data-resource="banners"] {
  width: min(310px, calc(100vw - 20px));
}
body[data-view="admin"] .modal[data-resource="icons"] {
  width: min(328px, calc(100vw - 20px));
}
.login-shell {
  width: min(620px, calc(100% - 24px));
  margin: 35px auto;
}
.legacy-login .classic-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-brand {
  text-align: center;
  margin: 16px;
}
.login-brand img {
  max-width: 160px;
  height: auto;
}
.legacy-login-settings {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.legacy-login-settings .field {
  max-width: 220px;
  margin: 0;
}
.legacy-login-settings .field span {
  font-size: 11px;
}
.legacy-login-forms {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}
.legacy-login-form {
  width: 250px;
  min-height: 120px;
  padding: 10px;
  border: 1px solid #cbbfc3;
  background: #fff;
}
.legacy-login-form h2 {
  font-size: 12px;
  margin-bottom: 10px;
  color: #c04571;
}
.legacy-login-form .field {
  margin: 0 0 9px;
  gap: 3px;
}
.legacy-login-form .field span {
  font-size: 11px;
  font-weight: normal;
}
.legacy-login-form input {
  width: 100%;
}
.legacy-login-form button {
  float: inline-end;
}
.login-status {
  padding: 6px;
  text-align: center;
  font-size: 12px;
  color: #233b76;
  min-height: 24px;
}
.legacy-login .form-error {
  color: #8a112d;
  background: #fff1f4;
  padding: 10px;
  margin: 10px 0;
}
/* Keep the old inline entry compatible, with a direct link to iframe login. */
:is(body[data-view="chat"], body[data-view="admin"]) .login-layout {
  max-width: 570px;
  margin: 30px auto;
  border-radius: 0;
  grid-template-columns: 1fr;
  box-shadow: none;
}
:is(body[data-view="chat"], body[data-view="admin"]) .welcome {
  padding: 12px;
  background: #323f91;
  text-align: center;
}
:is(body[data-view="chat"], body[data-view="admin"])
  .welcome
  :is(h1, p, .icon-mosaic, .welcome-links) {
  display: none;
}
:is(body[data-view="chat"], body[data-view="admin"]) .heritage {
  border-radius: 0;
}
:is(body[data-view="chat"], body[data-view="admin"]) .login-form {
  padding: 16px 30px;
  background: #fff;
  color: #913356;
}
:is(body[data-view="chat"], body[data-view="admin"]) .login-form h2 {
  font-size: 15px;
}
.iframe-login-link {
  display: block;
  margin-top: 12px;
  text-align: center;
}
@media (max-width: 760px) {
  :is(body[data-view="admin"], body[data-view="chat"]) .topbar {
    gap: 6px;
  }
  :is(body[data-view="admin"], body[data-view="chat"]) .top-actions {
    margin: 0;
    flex-wrap: wrap;
  }
  body[data-view="chat"] .chat-layout {
    grid-template-columns: 110px minmax(0, 1fr);
    height: auto;
    min-height: 480px;
  }
  body[data-view="chat"] .people-sidebar {
    grid-column: 1/-1;
    max-height: 180px;
  }
  body[data-view="chat"] .chat-main {
    min-height: 400px;
  }
  body[data-view="chat"] .page {
    margin: 4px auto;
    padding: 4px;
  }
}
@media (max-width: 480px) {
  body[data-view="admin"] .page {
    padding: 0 4px 8px;
  }
  body[data-view="admin"] .classic-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .classic-tabs > :nth-child(6) {
    grid-column: auto;
  }
  body[data-view="admin"] .admin-nav {
    padding: 4px 3px 0;
  }
  body[data-view="admin"] .admin-content {
    margin: 0 2px 4px;
    padding: 7px 5px;
  }
  .classic-record-list {
    grid-template-columns: minmax(0, 1fr) 57px;
    gap: 5px;
  }
  body[data-view="admin"] :is(th, td) {
    padding: 3px;
    font-size: 10px;
  }
  body[data-view="chat"] .chat-layout {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  body[data-view="chat"] .room-sidebar {
    max-height: 150px;
  }
  body[data-view="chat"] .room-sidebar .sidebar-bottom {
    display: none;
  }
  body[data-view="chat"] .chat-main {
    min-height: 400px;
  }
  body[data-view="chat"] .people-sidebar {
    grid-column: 1;
  }
  .legacy-login .login-shell {
    margin-top: 12px;
  }
  .legacy-login-forms {
    gap: 10px;
  }
  :is(body[data-view="admin"], body[data-view="chat"]) .modal .field {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}
/* Native hidden must win over layout declarations. */
[hidden] {
  display: none !important;
}
/* img2/7.gif: compact Super left / Guest right on a white page. */
.legacy-login .login-shell {
  width: min(693px, calc(100% - 24px));
  margin: 24px auto;
  color: #000080;
}
.legacy-login-forms {
  direction: ltr;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.legacy-login-form {
  width: auto;
  min-height: 100px;
  border: 0;
  padding: 4px 12px;
  color: #000080;
}
.legacy-login-form + .legacy-login-form {
  border-inline-start: 1px solid #a4b5d8;
}
.legacy-login-form .field {
  display: grid;
  grid-template-columns: 112px 96px;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.legacy-login-form .field span {
  font-weight: bold;
  font-size: 10px;
}
.legacy-login-form input {
  width: 96px;
  min-height: 20px;
  height: 20px;
  background: #fff;
}
.legacy-login-form button {
  margin-inline-end: 30px;
  color: #fff3a4;
  background: linear-gradient(#a1b0d9, #344f88);
  border: 1px solid #30304b;
  box-shadow:
    inset 1px 1px #e0e4fa,
    1px 1px #343548;
}
.legacy-login-settings {
  margin: 12px 0 0;
  font-size: 10px;
}
.legacy-login-settings summary {
  cursor: pointer;
}
.legacy-login-settings .field {
  margin: 8px 0;
}
.login-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
/* img2/1,4,11: transcript left, shared users/rooms panel right. */
body.chat-client {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: #323f91;
}
.chat-client #app {
  height: calc(100dvh - 34px);
  min-height: 0;
}
body.chat-client .topbar {
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 34px;
  height: 34px;
  padding: 3px 7px;
}
.chat-client .client-title {
  white-space: nowrap;
  font-size: 11px;
}
.chat-client .top-actions {
  margin-inline-start: auto;
  flex-wrap: nowrap;
}
.chat-client .top-actions #settings-top {
  display: none;
}
body.chat-client .page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 6px;
  border-width: 1px;
  display: flex;
  flex-direction: column;
}
body.chat-client .chat-window-title {
  display: none;
}
body.chat-client .page-heading {
  position: relative;
  flex: 0 0 65px;
  min-height: 65px;
  justify-content: center;
  margin: 0;
}
.chat-client .page-heading > div:first-of-type {
  position: absolute;
  inset-inline-start: 8px;
  font-size: 10px;
}
.chat-client .page-heading .eyebrow {
  display: none;
}
.chat-client .client-logo {
  width: 110px;
  max-height: 55px;
  object-fit: contain;
}
.chat-client .banner {
  position: absolute;
  inset-inline-end: 6px;
  max-width: 25%;
}
.chat-client .banner:has(.badge) {
  display: none;
}
body.chat-client .chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 192px;
  flex: 1;
  min-height: 0;
  height: auto;
  gap: 6px;
}
body.chat-client .chat-main {
  min-height: 0;
}
.chat-client .chat-room-heading {
  min-height: 28px;
}
.chat-client .chat-room-heading .room-symbol {
  display: none;
}
body.chat-client .chat-room-heading h2 {
  font-size: 11px;
}
body.chat-client .people-sidebar {
  grid-column: 2;
  min-height: 0;
  max-height: none;
}
.chat-client .people-sidebar .list {
  flex: 1;
  background: #fff;
  margin: 3px;
  border: 1px solid #73758d;
  padding: 0;
}
.chat-client .people-sidebar .list-item {
  min-height: 24px;
  padding: 2px 3px;
}
.chat-client .people-sidebar .list-item img.avatar {
  width: 18px;
  height: 18px;
}
.chat-client .people-sidebar .list-item small {
  font-size: 9px;
}
.chat-client .sidebar-tabs button {
  border-radius: 7px 7px 0 0;
  padding: 2px 10px;
}
.chat-client .sidebar-tabs [aria-selected="true"] {
  background: #96aad1;
  font-weight: bold;
}
.chat-client .client-user-tools {
  padding: 2px 5px;
  border-bottom: 1px solid #62688f;
}
.chat-client .people-sidebar .sidebar-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  margin-top: 0;
}
body.chat-client .message {
  padding: 2px 0;
}
.chat-client .message > img {
  width: 18px;
  height: 18px;
}
.chat-client .message.system {
  margin: 0;
  background: #eee;
  border: 0;
  color: #333;
}
.chat-client .message.digicast,
.chat-client .message.broadcast {
  background: #ffffc2;
}
body.chat-client .composer {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 50px;
}
.chat-client .composer form {
  flex: 1;
  min-width: 0;
}
.chat-client .composer input {
  min-width: 0;
  height: 34px;
}
.chat-client .composer-hint {
  display: none;
}
.chat-client .formatting-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.chat-client .formatting-toolbar button {
  font-size: 9px;
  padding: 1px 3px;
  min-height: 19px;
}
body.chat-client .events-strip {
  flex: 0 0 auto;
  padding: 3px 0;
}
body.chat-client .events-strip .tabs button {
  padding: 2px 6px;
  font-size: 10px;
}
body.chat-client .footer-note {
  font-size: 9px;
  padding: 5px;
  min-height: 26px;
}
/* Full-height white Site Options lists, img/c004–c017 and img2/17. */
body[data-view="admin"] .classic-record-list {
  min-height: 310px;
}
body[data-view="admin"] .classic-list thead th {
  box-shadow: inset 1px 1px #ddd;
}
body[data-view="admin"] .classic-tabs button {
  border-radius: 7px 7px 0 0;
}
@media (max-width: 600px) {
  .legacy-login-forms {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .legacy-login-form {
    width: 270px;
    margin: auto;
  }
  .legacy-login-form + .legacy-login-form {
    border: 0;
    border-top: 1px solid #a4b5d8;
    padding-top: 14px;
  }
  body.chat-client .topbar {
    height: auto;
    min-height: 34px;
    flex-wrap: wrap;
  }
  .chat-client .client-title {
    display: none;
  }
  .chat-client .top-actions {
    gap: 3px;
  }
  .chat-client .top-actions button {
    padding: 2px 4px;
    font-size: 10px;
  }
  .chat-client #app {
    height: calc(100dvh - 60px);
  }
  body.chat-client .page-heading {
    min-height: 38px;
    flex-basis: 38px;
  }
  .chat-client .client-logo {
    max-height: 34px;
    width: 85px;
  }
  .chat-client .page-heading > div:first-of-type {
    display: none;
  }
  body.chat-client .chat-layout {
    grid-template-columns: minmax(0, 1fr) 124px;
  }
  .chat-client .people-sidebar .panel-heading {
    padding: 2px;
  }
  .chat-client .sidebar-tabs button {
    font-size: 10px;
    padding: 2px 5px;
  }
  .chat-client .people-sidebar .sidebar-bottom {
    grid-template-columns: 1fr;
  }
  body.chat-client .people-sidebar .list {
    display: block;
  }
  body.chat-client .people-sidebar .list-item {
    width: 100%;
  }
  .chat-client .people-sidebar .list-item img.rank {
    display: none;
  }
  .chat-client .formatting-toolbar {
    display: none;
  }
  body.chat-client .footer-note {
    font-size: 8px;
  }
}
.legacy-login .legacy-login-form input {
  background: #fff;
}
.legacy-login .login-shell > .field {
  max-width: 460px;
  margin: 10px auto;
  font:
    12px/1.5 Tahoma,
    Arial,
    sans-serif;
}
.legacy-login .legacy-login-form button {
  color: #fff3a4;
  background: linear-gradient(#a1b0d9, #344f88);
}
/* Blue window caption, a separate menubar, and reference formatting buttons. */
body.chat-client {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}
.chat-client .client-caption {
  grid-row: 1;
  margin: 0;
}
.chat-client .topbar {
  grid-row: 2;
  height: auto;
}
.chat-client #app {
  grid-row: 3;
  height: auto;
}
.chat-client .formatting-toolbar {
  grid-template-columns: repeat(2, 24px);
}
.chat-client .formatting-toolbar button {
  font-size: 12px;
  height: 20px;
  padding: 0;
}
.chat-client [data-style="bold"] {
  font-weight: bold;
}
.chat-client [data-style="italic"] {
  font-style: italic;
}
.chat-client [aria-pressed="true"] {
  background: #bcc8e3;
  box-shadow: inset 1px 1px #222;
}
.content.text-bold {
  font-weight: bold;
}
.content.text-italic {
  font-style: italic;
}
/* Keep distributor data readable within the existing classic scrolling panel. */
body[data-view="admin"] .distributor-sites table {
  min-width: 1100px;
}
body[data-view="admin"] .distributor-sites td:last-child {
  min-width: 230px;
}
body[data-view="admin"] .distributor-sites td:nth-child(2) {
  min-width: 110px;
}
body[data-view="admin"] .distributor-sites td:nth-child(5) {
  min-width: 230px;
}
@media (max-width: 600px) {
  body.chat-client .composer {
    flex-wrap: wrap;
  }
  .chat-client .composer form {
    flex-basis: 100%;
  }
  .chat-client .formatting-toolbar {
    display: flex;
    gap: 3px;
  }
  .chat-client .formatting-toolbar button {
    width: 24px;
  }
}