/* Desktop shell shared by every page: taskbar, Start menu, mobile bottom nav,
   the segmented progress bar and the Win95 zoom rectangle. Built by
   desktop-shell.js; tokens come from style.css. */

/* ===== Taskbar ===== */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  height: calc(var(--taskbar-h) + var(--safe-b)); padding: 4px 4px calc(3px + var(--safe-b));
  display: flex; align-items: stretch; gap: 4px;
  background: var(--face); box-shadow: inset 0 1px var(--hilite), inset 0 2px var(--light);
  font: 400 var(--t-sm)/1 var(--font-ui); user-select: none;
}
.task-start, .task, .task-nav a, .task-nav button {
  --py: 0; --px: 8px;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--px); min-width: 0;
  background: var(--face); color: var(--text); border: 0; cursor: pointer; text-decoration: none;
  box-shadow: var(--bevel-out);
}
.task-start { font-weight: 700; padding-right: 10px; }
.task-start img, .task img { width: 16px; height: 16px; image-rendering: pixelated; flex: none; }
.task-start[aria-expanded="true"], .task-start:active, .task:active, .task.active {
  box-shadow: var(--bevel-in); padding-top: 1px; padding-left: calc(var(--px) + 1px);
}
.task.active { background: var(--dither); font-weight: 600; }
.task-start:hover, .task:hover { text-decoration: none; }
.task-sep { width: 2px; margin: 1px 1px; border-left: 1px solid var(--shadow); border-right: 1px solid var(--light); }
.task-list { flex: 1; min-width: 0; display: flex; gap: 4px; }
.task { flex: 0 1 200px; }
.task span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task-tray {
  display: flex; align-items: center; gap: 6px; padding: 0 8px; box-shadow: var(--bevel-thin-in);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tray-user { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 4px; cursor: pointer; }
.tray-user img { width: 16px; height: 16px; image-rendering: pixelated; }
.tray-user:hover { text-decoration: underline; }
@media (pointer: coarse) { .tray-user { min-height: var(--tap); } }
.task-nav { display: none; }

/* ===== Start menu ===== */
#start-menu {
  position: fixed; left: 2px; bottom: calc(var(--taskbar-h) + var(--safe-b) - 2px); z-index: 95;
  max-height: calc(100dvh - var(--taskbar-h) - var(--safe-b) - 2px);   /* short screens scroll the items */
  display: flex; min-width: 264px; padding: 3px; background: var(--face);
  box-shadow: var(--bevel-window), 3px 3px 0 rgba(0,0,0,.3);
  transform-origin: bottom left; animation: rise .14s steps(5, end);
}
#start-menu[hidden] { display: none; }
@keyframes rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.start-banner {
  width: 30px; flex: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; overflow: hidden;
  background: linear-gradient(0deg, var(--title-a), var(--title-b));
}
.start-banner span {
  writing-mode: vertical-rl; transform: rotate(180deg); color: var(--sel-text); white-space: nowrap;
  font: 400 var(--d-lg)/1 var(--font-display); letter-spacing: .02em;
}
.start-banner b { font-weight: 400; color: var(--sel-muted); }
.start-items { flex: 1; display: flex; flex-direction: column; padding: 2px 0; min-height: 0; overflow-y: auto; }
.start-items > * { flex: none; }
.si {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 18px 4px 8px;
  background: none; border: 0; text-align: left; color: var(--text); cursor: default; white-space: nowrap;
  font: 400 var(--t-md)/1.2 var(--font-ui); text-decoration: none;
}
.si img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.si > span { min-width: 0; }   /* a long "Đọc tiếp" title ellipsizes instead of scrolling the menu sideways */
.si small { display: block; color: var(--muted); font-size: var(--t-xs); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.si kbd { margin-left: auto; padding-left: 16px; font: inherit; color: var(--muted); }
@media (pointer: coarse) { .si kbd { display: none; } }   /* a key hint means nothing on a touch screen */
.si:hover, .si:focus-visible { background: var(--sel); color: var(--sel-text); text-decoration: none; outline: none; }
.si:hover small, .si:focus-visible small, .si:hover kbd, .si:focus-visible kbd { color: var(--sel-muted); }
.si[hidden] { display: none; }
.start-items .msep { margin: 3px 4px; }

/* ===== Mobile: the taskbar becomes a bottom nav (phones upright or on their side) ===== */
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  #taskbar { padding: 4px 4px calc(4px + var(--safe-b)); gap: 4px; }
  .task-list, .task-tray, .task-sep { display: none; }
  .task-start b { display: none; }
  .task-start { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; padding: 0 2px; font-size: var(--t-xs); }
  .task-start::after { content: "Menu"; font-weight: 500; }
  .task-nav { display: flex; flex: 5 1 0; gap: 4px; }
  .task-nav a, .task-nav button {
    flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; padding: 0 2px;
    font: 500 var(--t-xs)/1.1 var(--font-ui); white-space: nowrap;
  }
  .task-nav img { width: 24px; height: 24px; image-rendering: pixelated; }
  .task-start img { width: 24px; height: 24px; }
  .task-nav .active { box-shadow: var(--bevel-in); background: var(--dither); font-weight: 700; }
  .task-nav [hidden] { display: none; }
}
@media (max-width: 640px) {
  #start-menu { left: 4px; right: 4px; min-width: 0; }
  .si { min-height: 48px; }
}
/* On its side the nav is one slim row, each word beside its icon (style.css sets
   the 40px height), clear of the notch and the rounded corners. */
@media (max-height: 500px) and (pointer: coarse) and (min-width: 641px) {
  #taskbar { padding: 3px max(4px, env(safe-area-inset-right)) calc(3px + var(--safe-b)) max(4px, env(safe-area-inset-left)); }
  .task-start, .task-nav a, .task-nav button { flex-direction: row; gap: 8px; font-size: var(--t-sm); }
  .task-start img, .task-nav img { width: 16px; height: 16px; }
}
/* The reader wants every pixel on a phone. */
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  body.shell-reader { padding-bottom: 0; }
  body.shell-reader #taskbar { display: none; }
}

/* ===== Segmented progress bar (Win95 file-copy) ===== */
.progress95 {
  width: min(300px, 80%); height: 22px; padding: 3px; background: var(--paper); box-shadow: var(--bevel-field);
  position: relative; overflow: hidden;
}
.progress95 i {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: 40%;
  background: repeating-linear-gradient(90deg, var(--sel) 0 10px, transparent 10px 12px);
  animation: march 1.4s steps(14, end) infinite;
}
@keyframes march { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.loading95 { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; color: var(--muted); font-size: var(--t-sm); text-align: center; }
@media (prefers-reduced-motion: reduce) { .progress95 i { animation: none; width: 100%; opacity: .5; } }

/* ===== Zoom rectangle: the outline Win95 drew when a window opened ===== */
.zoom-rect { position: fixed; z-index: 100; pointer-events: none; border: 2px solid var(--dark); outline: 1px solid var(--light); }

/* ===== Welcome dialog (first run) ===== */
#welcome-backdrop { z-index: 70; }
#welcome {   /* like the dialogs in style.css: centred above the taskbar, which stays on top */
  position: fixed; z-index: 71; top: calc(50% - (var(--taskbar-h) + var(--safe-b)) / 2); left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - var(--taskbar-h) - var(--safe-b) - 16px); overflow: auto;
}
#welcome[hidden], #welcome-backdrop[hidden] { display: none; }
.welcome-body { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); padding: var(--s2) var(--s3) 0; }
.welcome-art { width: 64px; height: 64px; image-rendering: pixelated; }
.welcome-hero { margin: 0 0 var(--s2); font: 400 var(--d-lg)/1 var(--font-display); color: var(--title-a); }
.welcome-hero b { font-weight: 400; color: var(--text); }
.welcome-tip {
  background: var(--tip-bg); padding: var(--s3) var(--s4); box-shadow: var(--bevel-field); min-height: 132px;
  display: flex; flex-direction: column; gap: 6px;
}
.welcome-tip h2 { margin: 0; font: 600 var(--t-lg)/1.3 var(--font-ui); }
.welcome-tip p { margin: 0; font-size: var(--t-md); line-height: 1.55; color: var(--text-2); }
.welcome-steps { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.welcome-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3); flex-wrap: wrap;
}
.welcome-foot label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); cursor: pointer; }
@media (pointer: coarse) { .welcome-foot label { min-height: var(--tap); } }   /* the whole label ticks the 13px box */
.welcome-actions { display: flex; gap: var(--s2); margin-left: auto; }
.chk95 { appearance: none; -webkit-appearance: none; width: 13px; height: 13px; margin: 0; background: var(--paper); box-shadow: var(--bevel-field); display: grid; place-items: center; cursor: pointer; }
.chk95:checked::after { content: ""; width: 7px; height: 7px; background: var(--dark); clip-path: polygon(0 43%, 14% 29%, 43% 57%, 86% 0, 100% 14%, 43% 86%); }
@media (max-width: 480px) {
  .welcome-body { grid-template-columns: 1fr; }
  .welcome-art { width: 48px; height: 48px; }
  .welcome-actions { width: 100%; }
  .welcome-actions .btn { flex: 1; }
}

/* ===== Message box ===== */
/* msgbox-ui.js: the Win95 box that replaces alert(), confirm() and prompt().
   It sits above every other window (Properties 50, Kindle picker 61, taskbar
   90) because it is always the answer to something just done in one of them. */
#msgbox-backdrop { z-index: 110; }
#msgbox {
  position: fixed; z-index: 111; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
}
#msgbox[hidden], #msgbox-backdrop[hidden] { display: none; }
.msgbox-body { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s2) var(--s4) 0; }
.msgbox-body img { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.msgbox-main { flex: 1; min-width: 0; }
.msgbox-text {
  margin: 0; padding-top: 6px; min-width: 0; font-size: var(--t-md); line-height: 1.55;
  white-space: pre-line; overflow-wrap: anywhere;   /* callers break lines with \n; long e-mails wrap */
}
.msgbox-input { display: block; width: 100%; margin: var(--s3) 0 0; }
.msgbox-input[hidden], .msgbox-actions .btn[hidden] { display: none; }
.msgbox-actions { display: flex; justify-content: center; gap: var(--s2); padding: var(--s5) var(--s3) var(--s3); }
/* The ring marks the button Enter presses, and Enter presses the focused one:
   as in Win95 the ring follows focus along the row (focus in the text field
   leaves it on OK, which is what Enter there does). One weight for every
   button, so the labels do not shift as the ring moves. */
.msgbox-actions .btn { min-width: 88px; font-weight: 500; }
.msgbox-actions:focus-within .btn-primary:not(:focus, :active) { box-shadow: var(--bevel-out); }
.msgbox-actions .btn:focus { box-shadow: 0 0 0 1px var(--dark), var(--bevel-out); }
.msgbox-actions .btn:focus:active { box-shadow: 0 0 0 1px var(--dark), var(--bevel-in); }
/* Phones: a box that asks for typing sits high, clear of the on-screen keyboard. */
@media (pointer: coarse) {
  #msgbox.msgbox-prompt { top: max(var(--s4), 8dvh); transform: translateX(-50%); max-height: calc(92dvh - var(--s4)); }
}