/* =========================================================
   SAIGONSCIENCE — window manager, menu, taskbar, hộp thoại,
   bảng màu (color schemes) và hình nền
   ========================================================= */

/* ---------- bảng màu (áp cho :root và ô xem trước) ---------- */
[data-scheme] {
  --raised: inset -1px -1px var(--dark), inset 1px 1px var(--hilite), inset -2px -2px var(--shadow), inset 2px 2px var(--face-light);
  --pressed: inset -1px -1px var(--hilite), inset 1px 1px var(--dark), inset -2px -2px var(--face-light), inset 2px 2px var(--shadow);
  --sunken: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow), inset -2px -2px var(--face-light), inset 2px 2px var(--dark);
  --window-edge: inset -1px -1px var(--dark), inset 1px 1px var(--face-light), inset -2px -2px var(--shadow), inset 2px 2px var(--hilite);
  --thin-sunken: inset -1px -1px var(--hilite), inset 1px 1px var(--shadow);
  --default-btn: inset -2px -2px var(--dark), inset 1px 1px var(--dark), inset 2px 2px var(--hilite), inset -3px -3px var(--shadow), inset 3px 3px var(--face-light);
}
[data-scheme="desert"] { --face: #d5ccbb; --face-light: #eae3d6; --shadow: #a2937a; --dark: #1e1a14; --navy: #008080; --blue: #5fb3b3; --teal: #a28d68; }
[data-scheme="rainy"] { --face: #c7cdd4; --face-light: #e3e7eb; --shadow: #7d8791; --dark: #151a20; --navy: #3b5068; --blue: #7e97b1; --teal: #52606e; }
[data-scheme="lilac"] { --face: #c9c2dc; --face-light: #e4dff0; --shadow: #8a80a6; --dark: #1b1626; --navy: #5b3f8c; --blue: #a58bd6; --teal: #6e5a8e; }
[data-scheme="hotdog"] { --face: #ffff00; --face-light: #ffff99; --shadow: #b3a100; --dark: #000; --navy: #ff0000; --blue: #ff0000; --teal: #ff0000; }
[data-scheme] body, body { background: var(--teal); }

/* ---------- hình nền ---------- */
.desktop { isolation: isolate; }
[data-wall="teal"] { background: radial-gradient(ellipse at 50% 120%, rgba(255, 255, 255, .12), transparent 60%), var(--teal); }
[data-wall="plain"] { background: var(--teal); }
[data-wall="clouds"] {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='150' shape-rendering='crispEdges'%3E%3Cg fill='%23fff'%3E%3Crect x='44' y='20' width='36' height='8'/%3E%3Crect x='30' y='28' width='66' height='8'/%3E%3Crect x='16' y='36' width='96' height='10'/%3E%3Crect x='172' y='86' width='28' height='6'/%3E%3Crect x='160' y='92' width='54' height='8'/%3E%3Crect x='148' y='100' width='76' height='8'/%3E%3C/g%3E%3Cg fill='%23d6e6f7'%3E%3Crect x='16' y='46' width='96' height='4'/%3E%3Crect x='148' y='108' width='76' height='3'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(#2f6fd0, #7fb8f2 65%, #d6ecff);
}
[data-wall="saigon"] {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='160' shape-rendering='crispEdges'%3E%3Cg fill='%23070b1d'%3E%3Crect y='110' width='40' height='50'/%3E%3Crect x='40' y='90' width='30' height='70'/%3E%3Crect x='70' y='120' width='28' height='40'/%3E%3Cpath d='M108 160 111 42 119 22 127 42 130 160z'/%3E%3Crect x='121' y='50' width='16' height='3'/%3E%3Crect x='140' y='100' width='36' height='60'/%3E%3Crect x='180' y='70' width='26' height='90'/%3E%3Cpath d='M218 160V32h6V18h6V8h4v10h6v14h6v128z'/%3E%3Crect x='256' y='104' width='40' height='56'/%3E%3Crect x='300' y='84' width='28' height='76'/%3E%3Crect x='332' y='116' width='30' height='44'/%3E%3Crect x='366' y='96' width='34' height='64'/%3E%3C/g%3E%3Cg fill='%23ffd23f'%3E%3Crect x='48' y='100' width='3' height='3'/%3E%3Crect x='58' y='114' width='3' height='3'/%3E%3Crect x='116' y='70' width='3' height='3'/%3E%3Crect x='118' y='96' width='3' height='3'/%3E%3Crect x='150' y='110' width='3' height='3'/%3E%3Crect x='162' y='126' width='3' height='3'/%3E%3Crect x='188' y='80' width='3' height='3'/%3E%3Crect x='194' y='98' width='3' height='3'/%3E%3Crect x='227' y='44' width='3' height='3'/%3E%3Crect x='234' y='66' width='3' height='3'/%3E%3Crect x='228' y='90' width='3' height='3'/%3E%3Crect x='266' y='114' width='3' height='3'/%3E%3Crect x='280' y='128' width='3' height='3'/%3E%3Crect x='308' y='94' width='3' height='3'/%3E%3Crect x='316' y='112' width='3' height='3'/%3E%3Crect x='374' y='106' width='3' height='3'/%3E%3Crect x='386' y='122' width='3' height='3'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom / auto 38%,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90' shape-rendering='crispEdges' fill='%23fff'%3E%3Crect x='8' y='12' width='2' height='2'/%3E%3Crect x='70' y='6' width='1' height='1'/%3E%3Crect x='40' y='40' width='1' height='1'/%3E%3Crect x='98' y='30' width='2' height='2'/%3E%3Crect x='20' y='66' width='1' height='1'/%3E%3Crect x='84' y='72' width='1' height='1'/%3E%3C/svg%3E"),
    linear-gradient(#050818, #1b2766 62%, #6a3d7e);
}
[data-wall="grid"] {
  background:
    linear-gradient(rgba(0, 0, 128, .13) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(0, 0, 128, .13) 1px, transparent 1px) 0 0 / 24px 24px,
    #fbf8ec;
}
[data-wall="grid"] .desk-icon, [data-wall="clouds"] .desk-icon { color: #000; }
[data-wall="grid"] .desk-icon__label, [data-wall="clouds"] .desk-icon__label { text-shadow: 1px 1px 0 rgba(255, 255, 255, .8); }
[data-wall="tiles"] {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect width='56' height='56' fill='%23efe4c8'/%3E%3Cpath d='M28 4 52 28 28 52 4 28z' fill='%23127a78'/%3E%3Cpath d='M28 13 43 28 28 43 13 28z' fill='%23efe4c8'/%3E%3Ccircle cx='28' cy='28' r='6' fill='%23b8352a'/%3E%3Cg fill='%23b8352a'%3E%3Ccircle r='9'/%3E%3Ccircle cx='56' r='9'/%3E%3Ccircle cy='56' r='9'/%3E%3Ccircle cx='56' cy='56' r='9'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- cửa sổ ---------- */
.desktop > .window:not(.toast) { position: absolute; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.win__body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.win__status { margin-top: 2px; }
.window.is-maximized { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.window.is-minimized { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(35%) scale(.15); }
.desktop > .window:not(.toast) { transition: opacity .16s steps(4), transform .16s steps(4), visibility .16s; }
.window.is-dragging { user-select: none; transition: none; }
.window.is-inactive > .title-bar { background: linear-gradient(90deg, #808080, #b5b5b5); color: #d4d0c8; }
.title-bar { touch-action: none; }
.sysmenu {
  display: grid; place-items: center;
  width: 18px; height: 18px; padding: 0; border: 0;
  background: transparent; color: inherit; flex: none;
}
.sysmenu .pixel, .sysmenu .win__emoji { width: 16px; height: 16px; font-size: 14px; line-height: 16px; }
.sysmenu:focus-visible { outline: 1px dotted #fff; }
.tb-btn--help { font: 700 12px/1 var(--font-ui); }
.is-maximized > .title-bar .ico-max { width: 7px; height: 6px; margin: 3px 0 0 -3px; }
.is-maximized > .title-bar .ico-max::before {
  content: ""; position: absolute; width: 7px; height: 6px;
  border: 1px solid #000; border-top-width: 2px;
  top: -5px; left: 2px; background: var(--face);
}
.win__grip {
  position: absolute; right: 3px; bottom: 3px; z-index: 2;
  width: 14px; height: 14px; cursor: nwse-resize; touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 45%, var(--hilite) 45% 52%, var(--shadow) 52% 60%, transparent 60% 70%, var(--hilite) 70% 77%, var(--shadow) 77% 85%, transparent 85%);
}
.is-maximized > .win__grip { display: none; }

/* ---------- menu popup ---------- */
.menu-pop {
  position: fixed; z-index: 450;
  min-width: 190px; max-width: min(380px, 96vw);
  padding: 2px;
  display: flex; flex-direction: column;
  font-size: 13px;
  animation: menu-in .1s steps(2) both;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-3px); } }
.mi {
  display: grid; grid-template-columns: 16px 22px minmax(0, 1fr) auto 14px; align-items: center; gap: 2px;
  width: 100%; min-height: 24px; padding: 2px 4px 2px 2px;
  border: 0; background: transparent; color: #000; text-align: left; text-decoration: none;
  font: inherit; cursor: pointer; white-space: nowrap;
}
.mi:hover, .mi:focus, .mi.is-open { background: var(--navy); color: #fff; outline: 0; }
.mi.is-disabled { color: var(--shadow); text-shadow: 1px 1px 0 var(--hilite); cursor: default; }
.mi.is-disabled:hover, .mi.is-disabled:focus { background: transparent; color: var(--shadow); }
.mi__check { font-size: 11px; text-align: center; }
.mi__icon { display: grid; place-items: center; font-size: 14px; line-height: 1; }
.mi__icon .pixel { width: 16px; height: 16px; }
.mi__label { overflow: hidden; text-overflow: ellipsis; padding-right: 6px; }
.mi__key { color: inherit; opacity: .8; padding-left: 14px; font-size: 12px; }
.mi__arrow { font-size: 10px; text-align: center; }
.mi-sep { border: 0; height: 2px; margin: 3px 2px; box-shadow: inset 0 1px var(--shadow), inset 0 -1px var(--hilite); }

.start-pop { flex-direction: row; min-width: 250px; padding: 3px; }
.start-pop .menu-pop__items { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.start-pop .mi { grid-template-columns: 0 34px minmax(0, 1fr) auto 14px; min-height: 36px; font-size: 14px; }
.start-pop .mi__icon { font-size: 22px; }
.start-pop .mi__icon .pixel { width: 26px; height: 26px; }
.menu-pop__banner {
  width: 30px; flex: none;
  background: linear-gradient(0deg, var(--navy), var(--blue));
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
}
.menu-pop__banner span { writing-mode: vertical-rl; transform: rotate(180deg); font: 26px/1 var(--font-pixel); color: var(--face); letter-spacing: 1px; }
.menu-pop__banner b { color: #fff; font-weight: 400; }

.win__menu { padding: 1px 2px 3px; }
.win__menu .menu__label { font-size: 13px; }

/* ---------- taskbar ---------- */
.quick { display: flex; gap: 1px; flex: none; }
.quick__btn {
  display: grid; place-items: center; width: 24px; height: 26px;
  border: 0; background: transparent; padding: 0;
}
.quick__btn:hover { box-shadow: var(--thin-sunken), inset 1px 1px var(--hilite); box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hilite); }
.quick__btn:active { box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hilite); }
.quick__btn .pixel { width: 16px; height: 16px; }
.task-list { flex: 1; min-width: 0; display: flex; gap: 3px; overflow: hidden; }
.task-list .task-btn { flex: 0 1 190px; width: auto; min-width: 36px; }
.task-btn .win__emoji { font-size: 14px; line-height: 1; }
.task-btn .pixel { width: 16px; height: 16px; }
.tray { flex: none; }
.tray__clock { border: 0; background: transparent; padding: 0 2px; font: 20px/1 var(--font-pixel); color: #000; cursor: pointer; }
.tray__clock:focus-visible, .tray__btn:focus-visible { outline: 1px dotted #000; }

/* ---------- hộp thoại ---------- */
.modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .12); }
.modal--dither {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' fill='%23000' fill-opacity='.62'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000' fill-opacity='.62'/%3E%3C/svg%3E");
  animation: dither-in .5s steps(3) both;
}
@keyframes dither-in { from { opacity: 0; } }
.dialog { position: relative; max-width: calc(100vw - 24px); }
.dialog__icon .pixel { width: 32px; height: 32px; }
.dialog__icon .win__emoji { font-size: 32px; }
.dialog__text { min-width: 0; }
.dialog__text code { font: 13px var(--font-mono); background: #fff; padding: 0 3px; }
.shut-dlg { width: min(380px, 100%); }
.shut .radios { margin-left: 4px; }
.keys { border-collapse: collapse; font-size: 13px; }
.keys td { padding: 3px 10px 3px 0; vertical-align: top; }
kbd {
  display: inline-block; min-width: 20px; padding: 0 5px;
  font: 600 11px/18px var(--font-ui); text-align: center;
  background: var(--face); box-shadow: var(--raised);
}
.rename-input { width: 100%; padding: 4px 6px; border: 0; margin-top: 4px; font-size: 14px; }

/* ---------- toast ---------- */
.toast { z-index: 100000; }
.toast__note { margin: 0; padding: 12px 12px 14px; font-size: 13.5px; }

/* ---------- responsive: điện thoại ---------- */
@media (max-width: 760px) {
  .desktop > .window:not(.toast) { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
  .desktop > .window [data-wm="max"], .desktop > .window > .win__grip { display: none; }
  .quick__btn:nth-child(n+2) { display: none; }
  .task-list .task-btn { flex-basis: 150px; }
  .menu-pop { max-width: calc(100vw - 8px); }
  .mi { min-height: 36px; font-size: 14px; }
}