/* Windows 95 / Notepad window chrome.
   Palette: silver #c0c0c0, white #fff, highlight #dfdfdf, shadow #808080,
   black #0a0a0a, active titlebar navy #000080.
   Typeface: Unscii-16 (Viznut, public domain), pixel-crisp at 16px. */

/* Self-hosted woff2 of the Unscii-16 bitmap font (viznut.fi/unscii);
   nothing is loaded from third-party hosts. */
@font-face {
  font-family: 'Unscii';
  font-style: normal;
  font-display: swap;
  font-weight: normal;
  src: url('/fonts/unscii-16.woff2') format('woff2');
}

/* Windows 95 cursors as local assets: the owner's classic arrow-with-CD
   (Cursor_17.cur -> 32x32 PNG, hotspot 10,10), an I-beam, and a wait hourglass. */
html { cursor: url('/ui/cursor-17.png') 10 10, auto; }
button { cursor: inherit; }
#paper, #entry, .dialog-body input { cursor: url('/ui/ibeam.svg') 16 16, text; }
body.busy, body.busy button, body.busy #paper, body.busy #entry, body.busy .dialog-body input { cursor: url('/ui/wait.svg') 16 16, wait; }
::selection { background: #000080; color: #ffffff; }
::highlight(lalala-find) { background-color: #000080; color: #ffffff; }

html, body { margin: 0; height: 100%; overflow: hidden; background: #008080; }
video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
body > img { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2; max-width: 90%; height: auto; }
#panel { position: absolute; z-index: 3; top: 18px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 48px)); height: calc(66.66dvh - 18px); box-sizing: border-box; display: flex; flex-direction: column; padding: 3px; background: #c0c0c0; color: #000; font: 16px/20px 'Unscii', ui-monospace, monospace; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
#panel.maximized { top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; transform: none; }
#panel.minimized { display: none; }
#titlebar { display: flex; align-items: center; height: 24px; margin: 2px 2px 0; padding: 0 2px 0 4px; background: #000080; color: #fff; font: bold 16px/24px 'Unscii', ui-monospace, monospace; }
#title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#winbtns { display: flex; gap: 2px; }
.winbtn { display: grid; place-items: center; width: 18px; height: 18px; border: 0; padding: 0; background-color: #c0c0c0; background-repeat: no-repeat; color: #000; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
.winbtn:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #ffffff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; }
.winbtn[data-act="min"] { background-image: url('/ui/btn-min.svg'); background-position: 6px 12px; }
.winbtn[data-act="max"] { background-image: url('/ui/btn-max.svg'); background-position: 4px 4px; }
.winbtn[data-act="close"] { background-image: url('/ui/btn-close.svg'); background-position: 5px 5px; }
#menubar { display: flex; gap: 1px; margin: 2px 6px 3px; font: 16px/1.2 'Unscii', ui-monospace, monospace; }
.menu { border: 0; margin: 0; padding: 3px 8px 4px; background: transparent; color: #000; font: 16px/1.2 'Unscii', ui-monospace, monospace; }
.menu:hover { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff; }
.menu[aria-expanded="true"] { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #ffffff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; }
.menu-popup { position: absolute; z-index: 10; min-width: 172px; padding: 2px; background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff, 4px 4px 0 rgba(0, 0, 0, .35); }
.menu-popup[hidden] { display: none; }
.menu-item { display: block; width: 100%; box-sizing: border-box; border: 0; padding: 4px 34px 4px 10px; background: transparent; color: #000; font: 16px/1.3 'Unscii', ui-monospace, monospace; text-align: left; position: relative; white-space: nowrap; }
.menu-item:hover:not(:disabled), .menu-item:focus:not(:disabled) { background: #000080; color: #ffffff; }
.menu-item:disabled { color: #808080; text-shadow: 1px 1px 0 #ffffff; }
.menu-item .accel { position: absolute; right: 6px; top: 4px; }
.menu-sep { height: 0; margin: 3px 1px; border-top: 1px solid #808080; border-bottom: 1px solid #ffffff; }
/* padding-top = the 2px frame line, so #paper (and its scrollbar) starts right
   below the line; the text's 4px air lives on #paper's top padding instead. */
#page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 2px 0 0 8px; background: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
/* No scrollbar-color/scrollbar-width here: any non-auto value disables the
   ::-webkit-scrollbar styling below in Chromium (Chrome 121+, css-scrollbars),
   which replaced the Win95 scrollbar with the browser-default one. */
#paper { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-wrap: anywhere; white-space: pre-wrap; padding-top: 4px; }
#paper::-webkit-scrollbar { width: 16px; height: 16px; }
#paper::-webkit-scrollbar-track { background: #dfdfdf; background-image: repeating-conic-gradient(#dfdfdf 0% 25%, #b0b0b0 0% 50%); background-size: 2px 2px; }
#paper::-webkit-scrollbar-thumb { background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
#paper::-webkit-scrollbar-button:vertical:start:decrement, #paper::-webkit-scrollbar-button:vertical:end:increment { display: block; height: 16px; background-color: #c0c0c0; background-repeat: no-repeat; background-position: center; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
#paper::-webkit-scrollbar-button:vertical:start:decrement { background-image: url('/ui/sb-up.svg'); }
#paper::-webkit-scrollbar-button:vertical:end:increment { background-image: url('/ui/sb-down.svg'); }
#history { unicode-bidi: plaintext; }
#cursors { display: inline; white-space: nowrap; }
.caret { display: inline-block; width: 2px; height: 18px; vertical-align: -4px; margin-left: 3px; animation: caret-blink 1.06s step-end infinite; }
/* #entry lives inside #paper (the scroller) so the Win95 scrollbar spans the
   full height of the white page area; sticky pins the input to the bottom
   edge while the history scrolls, and the white background keeps the text
   underneath from showing through. */
#entry { display: block; box-sizing: border-box; background: #fff; color: #000; border: 0; outline: none; resize: none; width: 100%; height: 30px; padding: 0; font: inherit; caret-color: transparent; position: sticky; bottom: 0; }
#presence { display: flex; align-items: center; gap: 4px; font-size: 14px; min-height: 24px; margin: 0; padding: 2px 6px; flex-wrap: wrap; flex: 0 0 auto; box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff; }
.person { display: grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; font-size: 12px; line-height: 1; border: 1px solid #0a0a0a; box-shadow: inset -1px -1px rgba(0, 0, 0, .28), inset 1px 1px rgba(255, 255, 255, .65); }
#dialog { position: fixed; z-index: 30; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 32px)); box-sizing: border-box; padding: 3px; background: #c0c0c0; color: #000; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff, 6px 6px 0 rgba(0, 0, 0, .35); }
#dialog[hidden] { display: none; }
.dialog-titlebar { display: flex; align-items: center; height: 22px; margin: 1px 1px 0; padding: 0 4px; background: #000080; color: #fff; font: bold 16px/22px 'Unscii', ui-monospace, monospace; }
.dialog-titlebar span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dialog-body { padding: 14px 12px 4px; font: 16px/1.5 'Unscii', ui-monospace, monospace; }
.dialog-buttons { display: flex; justify-content: center; gap: 10px; padding: 12px; }
.dlg-btn { min-width: 84px; padding: 4px 10px; border: 0; background: #c0c0c0; color: #000; font: 16px 'Unscii', ui-monospace, monospace; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
.dlg-btn:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #ffffff, inset 2px 2px #808080, inset -2px -2px #dfdfdf; }
.dlg-btn:focus-visible { outline: 1px dotted #0a0a0a; outline-offset: -4px; }
.about-row { display: flex; gap: 12px; align-items: flex-start; }
.about-row img { flex: 0 0 auto; }
.about-row .about-title { font-weight: bold; }
.find-row { display: flex; gap: 8px; align-items: center; }
.find-row label { flex: 0 0 auto; }
.find-row input { flex: 1 1 auto; min-width: 0; border: 0; padding: 3px 4px; background: #fff; font: 16px 'Unscii', ui-monospace, monospace; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
#taskbtn { position: fixed; z-index: 25; left: 8px; bottom: 8px; border: 0; padding: 5px 12px; background: #c0c0c0; color: #000; font: bold 16px 'Unscii', ui-monospace, monospace; box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080, inset 2px 2px #dfdfdf, inset -2px -2px #0a0a0a; }
#taskbtn[hidden] { display: none; }
#panel[data-state="offline"] { opacity: .75; }
#panel[data-state="rejected"] #titlebar { background: #800000; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes caret-blink { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
@media (max-width: 500px) { #panel { width: calc(100% - 32px); font-size: 16px; } }