/* ===========================================================================
   w95_desktop.css - Windows 95 style desktop shell for the PRODIGY web client.

   This is a presentation layer only. It wraps the existing .chat-web-app in a
   draggable/resizable application window that sits on a simulated Windows 95
   desktop (wallpaper, icons, taskbar, Start menu, tray clock).

   Nothing in here changes chat behaviour. Every rule that touches existing
   Prodigy markup is scoped to `body.w95-on`, so when the shell is disabled
   (small screens, or JS off) the page renders exactly as it did before.

   Typeface comes from themesberg/windows-95-ui-kit (MIT) - see
   static/vendor/windows-95-ui-kit/LICENSE. All icon artwork here is original
   vector work drawn on a 32x32 grid for this project; no Microsoft system
   files are redistributed. See THIRD_PARTY_NOTICES.md.
   =========================================================================== */

@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;
}

:root {
  --w95-face: #c0c0c0;
  --w95-face-lit: #dfdfdf;
  --w95-white: #ffffff;
  --w95-shadow: #808080;
  --w95-dark: #000000;
  --w95-desk: #008080;
  --w95-title-a1: #000080;
  --w95-title-a2: #1084d0;
  --w95-title-i1: #808080;
  --w95-title-i2: #b5b5b5;
  --w95-taskbar-h: 30px;
  --w95-top: 0px;
  /* The chrome is drawn in the same face the sign-on dialog uses. The bundled
     "Windows 95" webfont (@font-face above, still registered) is a converted
     bitmap: crisp only at the one size it was cut for, and visibly wobbly
     anywhere else. MS Sans Serif IS the Windows 95 UI font and is still on
     every Windows box; Tahoma is the near-identical fallback elsewhere. Put
     "Windows 95" back at the front of this list to restore the pixel face. */
  --w95-font: "MS Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
}

/* ===========================================================================
   DESKTOP
   =========================================================================== */

.w95-desktop {
  display: none;
}

body.w95-on {
  margin: 0;
  overflow: hidden;
  background: var(--w95-desk);
}

body.w95-on .w95-desktop {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--w95-top);
  bottom: 0;
  z-index: 0;
  display: block;
  background: var(--w95-desk);
  color: #000;
  overflow: hidden;
  cursor: default;
}

/* The desktop's typeface belongs to the desktop's own chrome and nowhere else.
   Setting it on .w95-desktop put it on the Prodigy client too, because the
   client is now a descendant - so the service's menus and dialogs, designed in
   Arial at 14-17px, were being drawn in a bitmap face scaled well past its
   native size. That is what made them look shaky. */
.w95-icons,
.w95-taskbar,
.w95-startmenu,
.w95-submenu,
.w95-msgbox,
.w95-shutdown {
  font-family: var(--w95-font);
  font-size: 12px;
  user-select: none;
}

/* Work area: everything above the taskbar. */
.w95-workarea {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--w95-taskbar-h);
}

/* styles.css styles every <button> on the site as a modern rounded pill
   (inline-flex, border-radius: 999px, white text on a gradient). Undo that for
   the desktop chrome only. Written with :where() so the whole selector carries
   almost no specificity and every component rule below still wins on a plain
   class. The Prodigy client's own buttons are deliberately left alone. */
:where(.w95-icons, .w95-taskbar, .w95-startmenu, .w95-submenu, .w95-msgbox,
       .w95-titlebar, .w95-menubar) :where(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: 12px var(--w95-font);
  font-weight: normal;
  text-decoration: none;
  cursor: default;
}

/* ===========================================================================
   DESKTOP ICONS
   =========================================================================== */

.w95-icons {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  padding: 6px 4px;
  z-index: 1;
}

.w95-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 86px;
  padding: 4px 2px 5px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 12px var(--w95-font);
  text-align: center;
  cursor: default;
}

.w95-icon-art {
  display: block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0 auto 3px;
  image-rendering: pixelated;
}

.w95-icon-label {
  display: inline-block;
  max-width: 82px;
  text-align: center;
  padding: 1px 2px;
  line-height: 1.15;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
  /* Wrap between words only. break-word was splitting "Neighborhood" across
     two lines rather than letting the label be two words tall. */
  overflow-wrap: normal;
  word-break: normal;
}

.w95-icon.is-selected .w95-icon-art {
  /* Classic selection tint over the glyph. */
  filter: brightness(0.72) sepia(1) hue-rotate(190deg) saturate(3.5);
}

.w95-icon.is-selected .w95-icon-label {
  background: var(--w95-title-a1);
  outline: 1px dotted #fff;
  outline-offset: -1px;
  text-shadow: none;
}

.w95-icon:focus {
  outline: none;
}

/* ===========================================================================
   WINDOWS
   =========================================================================== */

.w95-windows {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Webamp renders its own faithful application windows. This desktop-owned
   host gives those windows the work area as their coordinate system without
   wrapping them in a second, fake title bar. It is created only on launch. */
.prodigyamp-host {
  position: absolute;
  inset: 0;
  z-index: 350;
  overflow: hidden;
  pointer-events: none;
}

.prodigyamp-host[hidden] {
  display: none;
}

.prodigyamp-host > * {
  pointer-events: auto;
}

.w95-window {
  display: block;
  position: absolute;
  left: 40px;
  top: 40px;
  width: 900px;
  height: 640px;
  z-index: 100;
  pointer-events: auto;
  background: var(--w95-face);
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  padding: 3px;
}

.w95-window[data-w95-state="minimized"],
.w95-window[data-w95-state="closed"] {
  display: none;
}

/* The frame is the containing block for every position:fixed panel the chat
   client creates (room window, IM window, modals). A transform makes fixed
   descendants resolve against this box instead of the viewport, which is what
   turns the existing MDI-style client into a real child of this window - and
   overflow:hidden keeps those panels clipped to the window, exactly like the
   original MDI application did. */
.w95-window-frame {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  transform: translate(0px, 0px);
  background: var(--w95-face);
}

/* Client area for windows the shell builds itself (W95.openWindow). The
   Prodigy window does not use this - it brings its own chrome. */
.w95-window-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  bottom: 0;
  overflow: auto;
  background: var(--w95-face);
}

.w95-app-window .w95-window-content {
  overflow: hidden;
  background: #c0c0c0;
}

.w95-app-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #c0c0c0;
}

/* Resize grips. Eight of them, sitting on the window's outer edge. */
.w95-resizer {
  position: absolute;
  z-index: 5;
}

.w95-window[data-w95-state="maximized"] .w95-resizer,
.w95-window[data-w95-resizable="false"] .w95-resizer {
  display: none;
}

.w95-resizer[data-dir="n"]  { left: 8px; right: 8px; top: -3px; height: 7px; cursor: n-resize; }
.w95-resizer[data-dir="s"]  { left: 8px; right: 8px; bottom: -3px; height: 7px; cursor: s-resize; }
.w95-resizer[data-dir="w"]  { top: 8px; bottom: 8px; left: -3px; width: 7px; cursor: w-resize; }
.w95-resizer[data-dir="e"]  { top: 8px; bottom: 8px; right: -3px; width: 7px; cursor: e-resize; }
.w95-resizer[data-dir="nw"] { left: -3px; top: -3px; width: 12px; height: 12px; cursor: nw-resize; }
.w95-resizer[data-dir="ne"] { right: -3px; top: -3px; width: 12px; height: 12px; cursor: ne-resize; }
.w95-resizer[data-dir="sw"] { left: -3px; bottom: -3px; width: 12px; height: 12px; cursor: sw-resize; }
.w95-resizer[data-dir="se"] { right: -3px; bottom: -3px; width: 12px; height: 12px; cursor: se-resize; }

/* Drag/resize feedback: no smoothing, no transitions - Windows 95 moved the
   whole window instantly. */
body.w95-dragging,
body.w95-dragging * {
  user-select: none !important;
}

/* --- generic window chrome (used by desktop-owned windows, e.g. dialogs) --- */
.w95-titlebar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  height: 20px;
  padding: 0 2px 0 3px;
  background: linear-gradient(90deg, var(--w95-title-a1), var(--w95-title-a2));
  color: #fff;
  font: bold 12px var(--w95-font);
  cursor: default;
}

.w95-window[data-w95-active="false"] .w95-titlebar {
  background: linear-gradient(90deg, var(--w95-title-i1), var(--w95-title-i2));
  color: #dfdfdf;
}

.w95-titlebar img {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  object-fit: contain;
}

.w95-titlebar-text {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.w95-titlebar-buttons {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.w95-tb-button {
  width: 16px;
  height: 14px;
  padding: 0;
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: bold 10px var(--w95-font);
  line-height: 1;
  cursor: default;
}

.w95-tb-button:active {
  border-color: var(--w95-dark) var(--w95-face-lit) var(--w95-face-lit) var(--w95-dark);
  box-shadow: inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-white);
}

.w95-tb-button[data-w95-action="close"] {
  margin-left: 2px;
}

/* Application menu bar, for windows that want the period chrome without
   pulling in the chat client's full menu system. */
.w95-menubar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 2px 4px;
  background: var(--w95-face);
  border-bottom: 1px solid var(--w95-shadow);
  box-shadow: inset 0 -2px 0 var(--w95-white);
  font: 12px var(--w95-font);
  color: #000;
}

.w95-menubar > span {
  padding: 2px 7px;
}

.w95-menu {
  position: relative;
}

.w95-menu > button {
  padding: 2px 7px;
  border: 1px solid transparent;
  background: transparent;
  font: 12px var(--w95-font);
  color: #000;
}

/* Keyboard and pointer open the same way. :focus-within also keeps the menu up
   while a link inside it has focus, so Tab walks the whole menu. */
.w95-menu:hover > button,
.w95-menu:focus-within > button {
  border-color: var(--w95-white) var(--w95-shadow) var(--w95-shadow) var(--w95-white);
  background: var(--w95-face);
}

.w95-menu-popup {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 60;
  display: none;
  min-width: 196px;
  padding: 2px;
  background: var(--w95-face);
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow),
              2px 2px 0 rgba(0, 0, 0, 0.3);
}

.w95-menu:hover > .w95-menu-popup,
.w95-menu:focus-within > .w95-menu-popup {
  display: block;
}

/* A clicked menu can remain open through :focus-within. As soon as the pointer
   moves to a sibling menu, stand the focused one down so two popups never stack. */
.w95-menubar:hover .w95-menu:not(:hover) > .w95-menu-popup {
  display: none;
}

.w95-menubar:hover .w95-menu:hover > .w95-menu-popup {
  display: block;
}

.w95-menu-popup a,
.w95-menu-popup button,
.w95-menu-popup .is-disabled {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  padding: 3px 20px 3px 9px;
  border: 0;
  background: transparent;
  color: #000;
  font: 12px var(--w95-font);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
}

.w95-menu-popup .w95-menu-shortcut {
  margin-left: auto;
  padding-left: 28px;
  text-align: right;
}

.w95-menu-popup a:hover,
.w95-menu-popup button:hover,
.w95-menu-popup a:focus-visible,
.w95-menu-popup button:focus-visible {
  background: var(--w95-title-a1);
  color: #fff;
  outline: none;
}

/* Windows greyed an unavailable command rather than hiding it - the etched
   look is the period way of saying "this exists, just not here". */
.w95-menu-popup .is-disabled {
  color: var(--w95-shadow);
  text-shadow: 1px 1px 0 var(--w95-white);
  pointer-events: none;
}

.w95-menu-sep {
  height: 2px;
  margin: 3px 2px;
  border-top: 1px solid var(--w95-shadow);
  border-bottom: 1px solid var(--w95-white);
}

/* ===========================================================================
   HOSTING A PAGE THAT BRINGS NO CHROME OF ITS OWN
   Chat, Mail, Boards and the service pages each have a title bar the shell can
   drive. A page that has none - Public Highlights is the member view of the
   public site - gets this pair instead: the shell's own title bar on top, the
   page below it as the client area.
   =========================================================================== */

.w95-hosted-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  background: var(--w95-face);
}

.w95-hosted-app > .w95-titlebar {
  flex: 0 0 auto;
}

.w95-hosted-canvas {
  background: #fff;
}

/* Shell off: no window, so the borrowed chrome must not be left stranded. */
body:not(.w95-on) .w95-hosted-app,
body:not(.w95-on) .w95-hosted-canvas {
  display: contents;
}

body:not(.w95-on) .w95-hosted-app > .w95-titlebar {
  display: none;
}

/* ===========================================================================
   LEGACY APPLICATION FITTING
   The client rectangle is what is left of the window after the Win95 chrome -
   title bar, menu bar, borders, any status strip. The logical page is scaled
   into it uniformly by w95_desktop.js. min-height/min-width: 0 on every link
   in the chain, because a flex or grid child defaults to min-content and will
   otherwise push its parent taller than the window.
   =========================================================================== */

/* Explicit `display` on every shell container above and below is deliberate:
   a page served where this stylesheet cannot load (the Bulletin Boards file is
   also the public site's own page, and there /static is a different vhost)
   needs to default the wrappers to `display: contents` so its content still
   flows. That fallback can only be overridden if the values here are stated
   rather than left at their initial value. */

[data-w95-client] {
  display: block;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

/* Reserves the SCALED footprint. A transform does not change layout, so
   without this the client would scroll as though the page were full size. */
.w95-fit-sizer {
  display: block;
  position: relative;
  margin: 0 auto;
  min-height: 0;
  min-width: 0;
}

.w95-fit-canvas {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
}

/* Shell off: no window, no fitting - the page lays out normally again. */
body:not(.w95-on) .w95-fit-sizer,
body:not(.w95-on) .w95-fit-canvas {
  display: contents;
}

/* ===========================================================================
   TASKBAR
   =========================================================================== */

.w95-taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 3px;
  height: var(--w95-taskbar-h);
  padding: 2px;
  background: var(--w95-face);
  border-top: 1px solid var(--w95-white);
}

.w95-start-button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 6px 0 4px;
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: bold 12px var(--w95-font);
  cursor: default;
}

.w95-start-button.is-open,
.w95-start-button:active {
  border-color: var(--w95-dark) var(--w95-face-lit) var(--w95-face-lit) var(--w95-dark);
  box-shadow: inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-white);
  padding: 1px 5px 0 5px;
}

.w95-start-button img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.w95-task-divider {
  flex: 0 0 auto;
  width: 2px;
  height: 22px;
  border-left: 1px solid var(--w95-shadow);
  border-right: 1px solid var(--w95-white);
}

.w95-tasks {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.w95-task {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 168px;
  min-width: 40px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: 12px var(--w95-font);
  justify-content: flex-start;
  text-align: left;
  cursor: default;
  overflow: hidden;
  white-space: nowrap;
}

.w95-task img {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.w95-task span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.w95-task.is-active {
  border-color: var(--w95-dark) var(--w95-face-lit) var(--w95-face-lit) var(--w95-dark);
  box-shadow: inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-white);
  background-color: var(--w95-face);
  background-image: repeating-conic-gradient(#c0c0c0 0 25%, #dfdfdf 0 50%);
  background-size: 2px 2px;
  font-weight: bold;
  padding-left: 7px;
}

.w95-tray {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid;
  border-color: var(--w95-shadow) var(--w95-white) var(--w95-white) var(--w95-shadow);
  box-shadow: inset 1px 1px 0 var(--w95-dark), inset -1px -1px 0 var(--w95-face-lit);
  font: 12px var(--w95-font);
}

/* The Prodigy notification-area icon. Flat until you press it, like every
   other tray icon - it is not a toolbar button. */
.w95-tray-app {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.w95-tray-app img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.w95-tray-app:active {
  border-color: var(--w95-shadow) var(--w95-white) var(--w95-white) var(--w95-shadow);
}

.w95-tray-menu {
  min-width: 188px;
}

.w95-tray-icon {
  width: 16px;
  height: 16px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
  image-rendering: pixelated;
}

.w95-clock {
  min-width: 56px;
  text-align: center;
}

/* ===========================================================================
   START MENU
   =========================================================================== */

.w95-startmenu {
  position: absolute;
  left: 2px;
  bottom: var(--w95-taskbar-h);
  z-index: 20;
  display: none;
  width: 214px;
  padding: 3px;
  background: var(--w95-face);
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
}

.w95-startmenu.is-open {
  display: flex;
}

/* The vertical "Prodigy 95" spine down the left edge. */
.w95-startmenu-spine {
  flex: 0 0 24px;
  background: linear-gradient(180deg, var(--w95-title-a2), var(--w95-title-a1));
  color: #fff;
  font: bold 13px var(--w95-font);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  padding: 8px 4px;
  letter-spacing: 0.5px;
}

.w95-startmenu-items {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-left: 2px;
}

.w95-startitem {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 27px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  font: 12px var(--w95-font);
  justify-content: flex-start;
  text-align: left;
  cursor: default;
}

.w95-startitem img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.w95-startitem span {
  flex: 1 1 auto;
}

.w95-startitem .w95-arrow {
  flex: 0 0 auto;
  font-size: 10px;
}

.w95-startitem:hover,
.w95-startitem.is-open {
  background: var(--w95-title-a1);
  color: #fff;
}

.w95-startsep {
  height: 2px;
  margin: 3px 2px;
  border-top: 1px solid var(--w95-shadow);
  border-bottom: 1px solid var(--w95-white);
}

.w95-submenu {
  position: absolute;
  z-index: 21;
  display: none;
  min-width: 176px;
  padding: 3px;
  background: var(--w95-face);
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
}

.w95-submenu.is-open {
  display: block;
}

.w95-submenu .w95-startitem {
  height: 24px;
}

.w95-submenu .w95-startitem img {
  width: 16px;
  height: 16px;
}

/* ===========================================================================
   WORKING ACCESSORIES
   Calculator, the text editors, Character Map and Paint run wholly in the
   browser. Their document area uses the same inset borders as Windows 95.
   =========================================================================== */

.w95-accessory-window .w95-window-content {
  overflow: hidden;
  background: var(--w95-face);
}

.w95-accessory {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 8px;
  color: #000;
  font: 12px var(--w95-font);
}

.w95-accessory-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  margin: -8px -8px 7px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--w95-shadow);
  box-shadow: inset 0 -1px 0 var(--w95-white);
}

.w95-calculator {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.w95-calc-display {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 4px 7px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  border-radius: 0;
  background: #fff;
  color: #000;
  font: 24px "Courier New", monospace;
  text-align: right;
}

.w95-calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 42px;
  gap: 7px;
}

.w95-calc-keys .w95-button {
  min-width: 0;
  height: 100%;
  padding: 0;
  font-size: 14px;
}

.w95-calc-keys .is-equals {
  font-weight: bold;
  color: #000080;
}

.w95-text-accessory {
  display: flex;
  flex-direction: column;
}

.w95-text-editor {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  padding: 5px;
  resize: none;
  overflow: auto;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  border-radius: 0;
  outline: 0;
  background: #fff;
  color: #000;
  font: 14px "Courier New", monospace;
  white-space: pre-wrap;
}

.w95-text-editor.is-rich {
  font-family: "Times New Roman", serif;
}

.w95-accessory-status {
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 2px 5px;
  border: 1px solid;
  border-color: var(--w95-shadow) var(--w95-white) var(--w95-white) var(--w95-shadow);
}

.w95-charmap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.w95-char-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  overflow: auto;
  padding: 3px;
  background: #fff;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
}

.w95-char-button {
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #808080;
  border-radius: 0;
  background: #fff;
  font: 18px "Times New Roman", serif;
}

.w95-char-button:focus,
.w95-char-button:hover {
  outline: 2px solid #000080;
  outline-offset: -2px;
}

.w95-char-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.w95-char-selected {
  width: 60px;
  height: 31px;
  border-radius: 0;
  background: #fff;
  font: 22px "Times New Roman", serif;
  text-align: center;
}

.w95-paint {
  display: flex;
  flex-direction: column;
}

.w95-paint-color {
  width: 42px;
  height: 24px;
  padding: 0;
  border-radius: 0;
}

.w95-paint-size {
  height: 24px;
  border-radius: 0;
  font: 12px var(--w95-font);
}

.w95-paint-canvas {
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  touch-action: none;
  cursor: crosshair;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  background: #fff;
}

.w95-volume-control {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 22px;
}

.w95-volume-control label:first-child {
  display: grid;
  gap: 8px;
  font-weight: bold;
}

.w95-volume-control input[type="range"] {
  width: 100%;
}

.w95-volume-mute {
  padding-top: 10px;
  border-top: 1px solid var(--w95-shadow);
}

.w95-explorer {
  display: flex;
  flex-direction: column;
  padding: 3px;
}

.w95-explorer-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 3px;
  border: 1px solid;
  border-color: var(--w95-white) var(--w95-shadow) var(--w95-shadow) var(--w95-white);
}

.w95-explorer-toolbar > span {
  margin-left: 4px;
}

.w95-explorer-address {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  height: 23px;
  padding: 2px 5px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  border-radius: 0;
  background: #fff;
  color: #000;
  font: 12px var(--w95-font);
}

.w95-explorer-files {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 0;
  margin-top: 4px;
  padding: 10px;
  overflow: auto;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  background: #fff;
}

.w95-explorer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 72px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #000;
  font: 12px var(--w95-font);
  text-align: center;
}

.w95-explorer-item img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.w95-explorer-item:focus {
  border-color: #000080;
  outline: 1px dotted #000;
  outline-offset: -3px;
  background: #dbe8ff;
}

/* ===========================================================================
   MESSAGE BOX (for icons/menu entries that are decorative only)
   =========================================================================== */

.w95-msgbox {
  position: absolute;
  z-index: 30;
  width: 340px;
  padding: 3px;
  background: var(--w95-face);
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
}

.w95-msgbox-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 14px 10px;
  font: 12px var(--w95-font);
  line-height: 1.35;
}

.w95-msgbox-body img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.w95-msgbox-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 12px;
}

.w95-button {
  min-width: 75px;
  height: 23px;
  padding: 0 10px;
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: 12px var(--w95-font);
  cursor: default;
}

.w95-button:active {
  border-color: var(--w95-dark) var(--w95-face-lit) var(--w95-face-lit) var(--w95-dark);
  box-shadow: inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-white);
  padding: 1px 9px 0 11px;
}

.w95-button:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

/* ===========================================================================
   SHUT DOWN SCREEN
   =========================================================================== */

.w95-shutdown {
  position: fixed;
  inset: 0;
  z-index: 40000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #ffa000;
  font: bold clamp(18px, 3.2vw, 34px) var(--w95-font);
  text-align: center;
  letter-spacing: 1px;
  cursor: default;
}

/* ===========================================================================
   HOSTING THE EXISTING PRODIGY CLIENT INSIDE THE WINDOW
   Everything below only applies while the shell is on.
   =========================================================================== */

body.w95-on.chat-web-page {
  min-height: 0;
  background: transparent;
}

body.w95-on .chat-web-app {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  /* Restated rather than inherited, so no future desktop-wide font rule can
     reach into the service again. */
  font-family: Arial, Helvetica, sans-serif;
}

/* The service shell becomes the window's client area: title bar and menu bar
   pinned, the white main screen taking whatever height is left. Because the
   main screen's panels are anchored with `bottom:`, they reflow for real as
   the window grows or shrinks - they are not scaled. */
body.w95-on .prodigy-service-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 0;
  box-shadow: none;
}

/* The white main screen takes whatever height the window leaves it. Both the
   Classic (724px) and Large (880px) floors have to go, or the screen would
   overflow the window instead of reflowing inside it - its panels are anchored
   with `bottom:`, so they follow the height for real. */
body.w95-on .chat-main-screen,
body.w95-on .chat-web-app[data-window-size="large"] .chat-main-screen {
  flex: 1 1 auto;
  min-height: 0;
}

body.w95-on .prodigy-os-titlebar {
  cursor: default;
  background: linear-gradient(90deg, var(--w95-title-a1), var(--w95-title-a2));
  padding: 1px 2px 1px 4px;
}

body.w95-on .w95-window[data-w95-active="false"] .prodigy-os-titlebar {
  background: linear-gradient(90deg, var(--w95-title-i1), var(--w95-title-i2));
  color: #dfdfdf;
}

body.w95-on .prodigy-os-controls button {
  width: 16px;
  height: 14px;
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  background: var(--w95-face);
  font: bold 10px var(--w95-font);
  cursor: default;
}

body.w95-on .prodigy-os-controls button:active {
  border-color: var(--w95-dark) var(--w95-face-lit) var(--w95-face-lit) var(--w95-dark);
  box-shadow: inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-white);
}

body.w95-on .prodigy-os-controls button[data-w95-action="close"] {
  margin-left: 2px;
}

/* The guest countdown banner is appended to <body> by chat_web.js; the desktop
   is shifted down by its height (--w95-top) rather than sitting under it. */
body.w95-on #guest-banner {
  z-index: 40001;
}

/* ===========================================================================
   SMALL SCREENS
   The shell switches itself off below ~1000px of viewport width (see
   w95_desktop.js). `display: contents` dissolves the wrapper boxes so the
   transform/containing block disappears and the page lays out exactly as it
   did before the desktop existed.
   =========================================================================== */

body:not(.w95-on) .w95-desktop,
body:not(.w95-on) .w95-workarea,
body:not(.w95-on) .w95-windows,
body:not(.w95-on) .w95-window,
body:not(.w95-on) .w95-window-frame {
  display: contents;
}

body:not(.w95-on) .w95-icons,
body:not(.w95-on) .w95-taskbar,
body:not(.w95-on) .w95-startmenu,
body:not(.w95-on) .w95-resizer {
  display: none;
}

/* --- menu flyouts (Goodies > Bookmarks) ---------------------------------
   A submenu opens to the RIGHT of its parent item, the way a Windows 95 menu
   does, rather than below it. The parent popup must not clip it, so the
   flyout is positioned against the item and the popup keeps its own overflow
   visible. Hover-driven like the rest of this menubar - no JS state to get
   out of step with the CSS.
   ------------------------------------------------------------------------ */
.w95-menu-item-sub {
  position: relative;
}

.w95-menu-item-sub > button {
  width: 100%;
}

.w95-menu-arrow {
  margin-left: auto;
  padding-left: 18px;
  font-size: 10px;
  line-height: 1;
}

.w95-menu-sub {
  left: 100%;
  top: -3px;
  min-width: 184px;
  max-height: 70vh;
  overflow-y: auto;
}

.w95-menu-item-sub:hover > .w95-menu-sub,
.w95-menu-item-sub:focus-within > .w95-menu-sub {
  display: block;
}

/* A flyout close to the right edge would otherwise run off the window. */
@media (max-width: 900px) {
  .w95-menu-sub { left: auto; right: 100%; }
}

/* --- Edit Bookmarks dialog ---------------------------------------------- */
.bookmark-dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.35);
  font-family: Arial, Helvetica, sans-serif;
}

.bookmark-dialog[hidden] { display: none; }

.bookmark-dialog-frame {
  width: min(640px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  color: #000;
  font-size: 12px;
}

.bookmark-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #000080;
  color: #fff;
  font: bold 12px Arial, Helvetica, sans-serif;
  padding: 3px 3px 3px 6px;
}

.bookmark-close {
  width: 18px;
  height: 17px;
  padding: 0;
  background: #c0c0c0;
  color: #000;
  font: bold 11px Arial, Helvetica, sans-serif;
  line-height: 1;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  border-radius: 0;
  cursor: pointer;
}

.bookmark-body {
  padding: 10px;
  overflow-y: auto;
}

.bookmark-hint,
.bookmark-note,
.bookmark-empty {
  margin: 0 0 8px;
  color: #333;
  font-size: 11px;
}

.bookmark-list {
  background: #fff;
  border: 1px solid #808080;
  padding: 2px;
  min-height: 62px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.bookmark-empty { padding: 8px; margin: 0; }

.bookmark-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid #e6e6e6;
}
.bookmark-row:last-child { border-bottom: 0; }
.bookmark-row.is-editing { background: #ffffcc; }

.bookmark-row-main {
  flex: 1 1 auto;
  min-width: 0;
  cursor: default;
}
.bookmark-row-main:focus-visible { outline: 1px dotted #000; }

.bookmark-row-title {
  display: block;
  font-weight: bold;
}

.bookmark-row-url {
  display: block;
  color: #0000aa;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookmark-row-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  white-space: nowrap;
}

.bookmark-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 11px;
}

.bookmark-suggestion,
.bookmark-button {
  padding: 3px 10px;
  background: #c0c0c0;
  color: #000;
  font: 11px Arial, Helvetica, sans-serif;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  border-radius: 0;
  cursor: pointer;
}
.bookmark-button { font-size: 12px; min-width: 74px; }
.bookmark-suggestion:active,
.bookmark-button:active {
  border-top-color: #808080;
  border-left-color: #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}
.bookmark-suggestion:disabled,
.bookmark-button:disabled { color: #808080; cursor: default; }

.bookmark-form {
  border-top: 1px solid #9a9a9a;
  padding-top: 10px;
}

.bookmark-field { margin-bottom: 6px; }
.bookmark-field label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bookmark-field input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 5px;
  background: #fff;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  border-radius: 0;
  font: 12px Arial, Helvetica, sans-serif;
}

.bookmark-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  font-weight: bold;
}

.bookmark-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.bookmark-status { font-size: 11px; color: #7a0000; }

/* --- an emulated title running in a desktop window ------------------------
   Games opened from Start > Programs > Accessories > Games run here rather
   than on the Packard Bell shelf. The splash covers the frame until it loads,
   because an archive item fetches a whole Windows 3.1 image first and an empty
   white rectangle looks like a failure.
   ------------------------------------------------------------------------ */
.w95-emu {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  background: #000;
}

.w95-emu iframe {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #000;
  visibility: hidden;
}

.w95-emu iframe.is-ready { visibility: visible; }

.w95-emu-splash {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #000;
  color: #d8d8d8;
  font: 14px var(--w95-font);
  text-align: center;
  z-index: 2;
}

.w95-emu-splash.is-done { display: none; }
.w95-emu-sub { font-size: 12px; color: #8a8a8a; }

@keyframes w95-emu-dots { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
.w95-emu-dots { animation: w95-emu-dots 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .w95-emu-dots { animation: none; } }

.w95-emu-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 26px;
  padding: 0 8px;
  background: var(--w95-face);
  border-top: 1px solid var(--w95-white);
  color: #000;
  font: 11px var(--w95-font);
}

.w95-emu-bar span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.w95-emu-bar a { color: #000080; }