/* ===== PIRCH26 Revival ===== */
:root {
  --desk: #008080;
  --face: silver;
  --navy: #000080;
  --ui-font: Tahoma, "Leelawadee UI", "Pixelated MS Sans Serif", "Noto Sans Thai", Arial, sans-serif;
  --log-font: Tahoma, "Leelawadee UI", "Noto Sans Thai", "Courier New", monospace;
  --taskbar-h: 34px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--desk);
  font-family: var(--ui-font);
  font-size: 13px;
  overflow: hidden;
  -webkit-font-smoothing: none;
}
/* 98.css forces its pixel font — use Tahoma so Thai renders nicely */
button, input, select, textarea, label, legend, .title-bar-text, .window, .status-bar-field {
  font-family: var(--ui-font) !important;
  font-size: 13px;
}
[hidden] { display: none !important; }
.sunken {
  background: #fff;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  padding: 3px;
}

/* ---------- Desktop ---------- */
#desktop { position: fixed; inset: 0 0 var(--taskbar-h) 0; padding: 12px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.desk-icon { width: 76px; text-align: center; color: #fff; cursor: pointer; user-select: none; }
.desk-icon .ico { font-size: 34px; line-height: 1.1; filter: drop-shadow(1px 1px 0 #0006); }
.desk-icon span { display: inline-block; padding: 1px 3px; font-size: 12px; }
.desk-icon:focus span, .desk-icon:active span { background: var(--navy); outline: 1px dotted #ff0; }

/* ---------- Dialogs ---------- */
.dialog { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 24px)); z-index: 20; }
.dlg-buttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.dlg-buttons button { min-width: 80px; }
button.default { outline: 1px solid #000; outline-offset: -4px; }
.login-hero { text-align: center; padding: 8px 0 10px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; margin: -2px -2px 8px; }
.logo { font: italic bold 38px "Arial Black", Impact, sans-serif; letter-spacing: 1px; text-shadow: 3px 3px 0 #000; }
.logo span { color: #ff0; }
.logo-sub { font-size: 12px; opacity: .9; letter-spacing: 3px; }
.login-note { font-size: 12px; color: #333; margin: 8px 0 0; line-height: 1.5; }
.progress { margin-top: 10px; }
.progress p { margin: 0 0 4px; }
.progress .bar { height: 18px; padding: 2px; background: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
.progress .fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--navy) 0 10px, transparent 10px 12px); animation: load 3s steps(24) forwards; }
@keyframes load { to { width: 100%; } }
.field-row-stacked { margin-bottom: 8px; }
.field-row-stacked input { width: 100%; }
.err { color: #c00; min-height: 1em; margin: 4px 0 0; }
.preview { margin: 4px 0; padding: 4px; background: #fff; box-shadow: inset 1px 1px grey; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.swatches button { min-width: 0; min-height: 0; height: 22px; padding: 0; border: 0; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
.swatches button.sel { outline: 2px dotted #000; outline-offset: 1px; }

/* ---------- Main window ---------- */
#app { position: fixed; top: 6px; left: 6px; right: 6px; bottom: calc(var(--taskbar-h) + 6px); display: flex; flex-direction: column; z-index: 5; }
#app > .window-body { flex: 1; display: flex; flex-direction: column; margin: 2px 3px; min-height: 0; }
.tb-ico { font-size: 12px; }
.menubar { display: flex; padding: 1px 2px; }
.menubar button { box-shadow: none; background: transparent; min-width: 0; padding: 2px 8px; min-height: 0; }
.menubar button:hover, .menubar button.open { box-shadow: inset -1px -1px grey, inset 1px 1px #fff; }
.menubar button:focus { outline: none; }
.toolbar { display: flex; gap: 2px; padding: 2px 3px; align-items: center; flex-wrap: wrap; border-top: 1px solid grey; border-bottom: 1px solid #fff; box-shadow: 0 1px 0 grey inset; }
.toolbar button { min-width: 0; padding: 2px 6px; min-height: 24px; }
.toolbar .sep { width: 2px; height: 20px; border-left: 1px solid grey; border-right: 1px solid #fff; margin: 0 3px; }
.only-mobile { display: none; }

.workspace { flex: 1; display: grid; grid-template-columns: 170px 1fr 180px; gap: 3px; min-height: 0; margin-top: 3px; }
.tree, .nicks { overflow: auto; min-height: 0; }
.chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.topic { padding: 3px 6px; margin-bottom: 3px; background: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px grey; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 22px; }
.topic b { color: var(--navy); }
.logs { flex: 1; position: relative; min-height: 0; padding: 0; }
.log { position: absolute; inset: 2px; overflow-y: auto; padding: 4px 6px; font-family: var(--log-font); font-size: 14px; line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; }
.log .line { white-space: pre-wrap; }
.log .ts { color: #7f7f7f; margin-right: 4px; font-size: 12px; }
.log .nick { font-weight: bold; cursor: pointer; }
.log .sys { color: #009300; }
.log .join { color: #009300; }
.log .part, .log .quit { color: #7f0000; }
.log .kick, .log .err { color: #ff0000; }
.log .topicl { color: #00007f; }
.log .action { color: #9c009c; }
.log .info { color: #00007f; }
.log .hist { opacity: .72; }
.log .histsep { color: #7f7f7f; text-align: center; font-size: 12px; }
.log .hl { background: #ffff9c; }
.log .motd { color: #00007f; font-family: "Courier New", monospace; font-size: 12px; line-height: 1.25; }
.log .wink-e { font-size: 22px; vertical-align: middle; }
.log a { color: #0000fc; }

/* tree */
.tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.tree > ul { padding-left: 0; }
.tree li { white-space: nowrap; }
.tree .item { display: inline-block; padding: 1px 3px; cursor: pointer; user-select: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.tree .item.active { background: var(--navy); color: #fff; outline: 1px dotted #ff0; }
.tree .item.unread { color: #c00; font-weight: bold; }
.tree .item.hlt { color: #0000fc; font-weight: bold; }
.tree .item.active.unread, .tree .item.active.hlt { color: #fff; }
.tree .group { color: #555; font-size: 12px; padding: 4px 3px 1px; }
.tree .cnt { color: #7f7f7f; font-size: 11px; }

/* nick list */
.nicks-head { padding: 2px 4px 4px; border-bottom: 1px solid #dfdfdf; font-size: 12px; color: #333; }
#nicklist { list-style: none; margin: 0; padding: 2px 0; }
#nicklist li { padding: 1px 4px; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nicklist li:hover { background: #e8e8ff; }
#nicklist li.sel { background: var(--navy); color: #fff !important; }
#nicklist li.away { color: #7f7f7f !important; font-style: italic; }
#nicklist li .pfx { display: inline-block; width: 12px; color: #c00; font-weight: bold; }
#nicklist li.me { font-weight: bold; }

.inputbar { display: flex; gap: 3px; margin-top: 3px; }
.inputbar input { flex: 1; height: 26px; font-size: 14px !important; }
.inputbar button { min-width: 60px; }
.status-bar { margin: 0 1px 1px; }

/* ---------- Popups & menus ---------- */
.popup { position: fixed; z-index: 30; width: 300px; }
.winks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.winks-grid button { min-width: 0; padding: 4px 2px; height: auto; display: flex; flex-direction: column; align-items: center; font-size: 11px !important; }
.winks-grid button .e { font-size: 24px; line-height: 1.2; }
.menu { position: fixed; z-index: 40; list-style: none; margin: 0; padding: 2px; min-width: 170px; background: silver; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; }
.menu li { padding: 3px 20px 3px 22px; cursor: pointer; white-space: nowrap; position: relative; }
.menu li:hover { background: var(--navy); color: #fff; }
.menu li.sep { padding: 0; margin: 3px 2px; border-top: 1px solid grey; border-bottom: 1px solid #fff; cursor: default; }
.menu li.sep:hover { background: none; }
.menu li.dis { color: grey; pointer-events: none; }
.menu li .mi { position: absolute; left: 4px; }
.start-menu { bottom: var(--taskbar-h); left: 2px; padding-left: 26px; min-width: 200px; }
.start-menu::before { content: "PIRCH26"; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 22px; background: linear-gradient(0deg, #000080, #1084d0); color: #fff; writing-mode: vertical-rl; transform: rotate(180deg); font: bold 14px "Arial Black", sans-serif; padding: 6px 0; }

.modal-bg { position: fixed; inset: 0; z-index: 50; background: transparent; }
.mb-row { display: flex; gap: 12px; align-items: flex-start; padding: 6px 2px; }
.mb-ico { font-size: 30px; line-height: 1; }
.mb-text { flex: 1; white-space: pre-wrap; line-height: 1.5; padding-top: 4px; }
#mb-input { width: 100%; margin-top: 4px; }

/* ---------- Notepad manual ---------- */
.notepad { position: fixed; z-index: 45; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100vw - 12px)); height: min(640px, calc(100vh - var(--taskbar-h) - 16px)); display: flex; flex-direction: column; }
.np-menu { display: flex; gap: 14px; padding: 2px 8px; }
.np-body { flex: 1; display: flex; flex-direction: column; min-height: 0; margin: 2px 3px 3px; }
.np-body pre { flex: 1; margin: 0; overflow: auto; white-space: pre-wrap; font-family: var(--log-font); font-size: 14px; line-height: 1.55; padding: 6px 10px; }
.np-body .dlg-buttons { margin-top: 6px; }

/* ---------- Taskbar ---------- */
#taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); background: silver; box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff; display: flex; align-items: center; gap: 4px; padding: 3px 3px 2px; z-index: 35; }
#start-btn { min-width: 0; padding: 0 8px; height: 26px; }
#tasks { flex: 1; display: flex; gap: 3px; overflow: hidden; }
#tasks button { min-width: 0; max-width: 200px; height: 26px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 8px; }
#tasks button.on { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; background: repeating-conic-gradient(#fff 0 25%, silver 0 50%) 0 0 / 2px 2px; font-weight: bold; }
#tray { height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 10px; box-shadow: inset -1px -1px #fff, inset 1px 1px grey; }
#tray-sound { cursor: pointer; }

/* ---------- Wink / fx ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.fx-wink { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); text-align: center; }
.fx-wink .e { font-size: min(34vw, 170px); line-height: 1; filter: drop-shadow(4px 4px 0 #0004); }
.fx-wink .cap { display: inline-block; margin-top: 8px; background: #ffffe1; border: 1px solid #000; padding: 4px 10px; font-size: 16px; box-shadow: 2px 2px 0 #0005; }
.anim-bounce .e { animation: bounce .45s ease-in-out 4 alternate; }
.anim-shake .e { animation: shake .12s linear 12; }
.anim-zoom .e { animation: zoom 2.2s ease-out forwards; }
.anim-spin .e { animation: spin .7s linear 3; }
.anim-wave .e { animation: wave .35s ease-in-out 6 alternate; transform-origin: 70% 90%; }
.anim-fly .e { animation: fly 1.6s ease-in forwards; }
.anim-rain .e, .anim-hearts .e { animation: bounce .6s ease-in-out 3 alternate; }
.fx-wink { animation: fadeout 2.6s forwards; }
.fx-drop { position: absolute; top: -40px; font-size: 32px; animation: drop 2.2s linear forwards; }
.fx-rise { position: absolute; bottom: -40px; font-size: 34px; animation: rise 2.4s ease-out forwards; }
@keyframes bounce { from { transform: translateY(0) scale(1); } to { transform: translateY(-40px) scale(1.1); } }
@keyframes shake { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-14px) rotate(-6deg); } 75% { transform: translateX(14px) rotate(6deg); } }
@keyframes zoom { 0% { transform: scale(.1); } 40% { transform: scale(1.25); } 60% { transform: scale(1); } 100% { transform: scale(1.05); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wave { from { transform: rotate(-20deg); } to { transform: rotate(25deg); } }
@keyframes fly { 0% { transform: translateX(-60vw) rotate(0); } 70% { transform: translateX(10vw) rotate(-30deg); } 100% { transform: translateX(80vw) rotate(-60deg); } }
@keyframes fadeout { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes drop { to { transform: translateY(110vh); } }
@keyframes rise { to { transform: translateY(-110vh) rotate(20deg); opacity: .2; } }
.shake-screen { animation: shake .1s linear 6; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root { --taskbar-h: 32px; }
  #app { top: 0; left: 0; right: 0; bottom: var(--taskbar-h); }
  .only-mobile { display: inline-block; }
  .toolbar button span { display: none; }
  .workspace { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .tree { max-height: 64px; }
  .tree ul, .tree > ul { display: flex; flex-wrap: wrap; gap: 2px 6px; padding: 0; }
  .tree .group { display: none; }
  .nicks { position: absolute; right: 6px; top: 96px; bottom: 90px; width: 58vw; z-index: 12; display: none; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a, 4px 4px 0 #0005; }
  body.show-nicks .nicks { display: block; }
  .status-bar-field:nth-child(3) { display: none; }
  #desktop { flex-direction: row; flex-wrap: wrap; }
  #tasks button { max-width: 130px; }
  .log { font-size: 15px; }
  .inputbar input { font-size: 16px !important; } /* prevent iOS zoom */
}