/* ==========================================================================
   LAB 95 — desktop.css
   Área de trabalho, ícones, barra de tarefas, menu Iniciar, bandeja,
   menu de contexto, avisos (toast), botão de pânico e efeitos de ambiente.
   ========================================================================== */

/* ------------------------------- Área de trabalho ------------------------------ */
#desktop {
  position: relative;
  height: calc(100vh - var(--task-height));
  overflow: hidden;
  background-color: var(--wallpaper-color, #008080);
  background-image: var(--wallpaper-image, none);
  background-size: var(--wallpaper-size, auto);
  background-position: var(--wallpaper-position, center);
  background-repeat: var(--wallpaper-repeat, repeat);
}
@supports (height: 100dvh) {
  #desktop { height: calc(100dvh - var(--task-height)); }
}

/* Marcad'água discreta no canto superior direito */
#desktop-stamp {
  position: absolute;
  right: 20px;
  top: 22px;
  color: #006666;
  pointer-events: none;
  text-align: right;
  text-shadow: 1px 1px #239494;
}
#desktop-stamp strong { display: block; font-size: 42px; letter-spacing: -3px; }
#desktop-stamp small { font: 11px var(--font-mono); letter-spacing: 2px; }

/* ------------------------------------ Ícones ----------------------------------- */
#icons {
  display: grid;
  /* Desktop Win95: ícones em colunas estreitas, preenchidas de cima para baixo. */
  grid-template-rows: repeat(auto-fill, 76px);
  grid-auto-flow: column;
  grid-auto-columns: 76px;
  gap: 2px 1px;
  padding: 6px 4px;
  width: max-content;
  max-width: 100%;
  height: 100%;
  align-content: start;
  overflow: auto;
}

.desktop-icon {
  width: 74px;
  height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 3px;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px #004747;
  border: 1px solid transparent;
  background: transparent;
  cursor: default;
}

.desktop-icon svg, .desktop-icon .classic-icon { width: 32px; height: 32px; shape-rendering: crispEdges; image-rendering: pixelated; }
.desktop-icon span {
  font-size: 11px;
  line-height: 14px;
  padding: 1px 3px;
  overflow-wrap: anywhere;
}
.desktop-icon.selected span,
.desktop-icon:focus-visible span {
  background: navy;
  outline: 1px dotted #fff;
  color: #fff;
}
.desktop-icon.egg-icon { opacity: .85; }

/* ------------------------------- Barra de tarefas ------------------------------- */
#taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--task-height);
  padding: 3px;
  gap: 3px;
  display: flex;
  align-items: center;
  background: var(--silver);
  border-top: 2px solid #fff;
  z-index: 10000;
}

#start {
  height: 24px;
  padding: 1px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}
#start .start-glyph { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; padding: 2px; transform: skewY(-12deg); filter: drop-shadow(1px 1px #555); }
#start .start-glyph i { display: block; }
#start .start-glyph i:nth-child(1) { background: #e53935; }
#start .start-glyph i:nth-child(2) { background: #27a844; }
#start .start-glyph i:nth-child(3) { background: #1673d1; }
#start .start-glyph i:nth-child(4) { background: #ffd52a; }
#start.pressed { border-color: #404040 #fff #fff #404040; box-shadow: inset 1px 1px var(--silver-dark); }

#taskitems {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
}
#taskitems::-webkit-scrollbar { display: none; }

#taskitems button {
  height: 24px;
  min-width: 45px;
  width: 150px;
  flex: 0 1 150px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  margin: 0;
  font-size: 11px;
  text-align: left;
}
#taskitems button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#taskitems button svg, #taskitems button .classic-icon { width: 16px; height: 16px; flex-shrink: 0; image-rendering: pixelated; }
#taskitems .active {
  background: repeating-conic-gradient(#fff 0% 25%, #d4d4d4 0% 50%) 0 0/2px 2px;
  font-weight: bold;
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px var(--silver-dark);
}
#taskitems .flash-task { animation: taskflash .6s steps(2) 4; }
@keyframes taskflash { 50% { background: navy; color: #fff; } }

#tray {
  display: flex;
  align-items: center;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  height: 26px;
  gap: 1px;
  padding: 0 3px;
  flex-shrink: 0;
}
.tray-button {
  background: transparent;
  border: 0;
  padding: 1px 4px;
  height: 20px;
  min-width: 22px;
  font-size: 13px;
  margin: 0;
}
.tray-button:hover { background: #d4d0c8; }
#tray .offline { color: #600; }
#clock { border: 0; padding: 2px 5px; margin: 0; font-size: 11px; background: transparent; min-height: 20px; }

/* Pictogramas locais para a bandeja, sem depender de emoji do sistema. */
.tray-icon { display: block; position: relative; width: 16px; height: 16px; }
.tray-icon.sound::before { content: ""; position: absolute; left: 1px; top: 5px; width: 5px; height: 6px; background: #111; }
.tray-icon.sound::after { content: ")"; position: absolute; left: 5px; top: -3px; font: bold 16px Arial; color: #111; }
.tray-icon.sound.off::after { content: "×"; left: 8px; top: -2px; font: bold 12px Arial; color: #800; }
.tray-icon.network { border: 1px solid #333; background: linear-gradient(90deg, #c0c0c0 0 25%, #808080 25% 50%, #c0c0c0 50% 75%, #808080 75%); height: 12px; margin-top: 2px; }
.tray-icon.network::after { content: ""; position: absolute; left: 5px; top: 10px; height: 4px; border-left: 2px solid #333; }
.tray-icon.network.online { background: repeating-linear-gradient(90deg, #008000 0 3px, #80c080 3px 5px); }
.tray-icon.screen { border: 2px solid #222; height: 12px; margin-top: 1px; background: #008080; }
.tray-icon.screen::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: -4px; border-bottom: 2px solid #222; }

#panic { position: absolute; right: 14px; bottom: 14px; min-height: 0; padding: 4px 7px; border-width: 2px; font-weight: bold; color: #700; z-index: 1; }
#panic.danger { animation: panicblink .25s steps(2) infinite; }
@keyframes panicblink { 50% { background: #f00; color: #fff; } }

/* --------------------------------- Menu Iniciar -------------------------------- */
#startmenu {
  position: fixed;
  bottom: var(--task-height);
  left: 3px;
  width: 276px;
  padding: 3px 3px 3px 30px;
  max-height: calc(100vh - var(--task-height) - 4px);
  overflow: auto;
  z-index: 10001;
  font-size: 12px;
}
@supports (height: 100dvh) {
  #startmenu { max-height: calc(100dvh - var(--task-height) - 4px); }
}

.start-brand {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  background: #808080;
  color: #c0c0c0;
  width: 25px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 20px;
  font-weight: bold;
  padding: 8px 2px;
  letter-spacing: 1px;
  user-select: none;
}
.start-brand strong { color: #fff; }

#startmenu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 5px 7px;
  margin: 0;
  min-height: 32px;
}
#startmenu button svg, #startmenu button .classic-icon { width: 23px; height: 23px; flex-shrink: 0; image-rendering: pixelated; }
#startmenu button:hover,
#startmenu button:focus-visible { background: navy; color: #fff; outline: none; }
#startmenu button[aria-disabled="true"] { color: var(--silver-dark); text-shadow: 1px 1px #fff; }
#startmenu hr { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 3px 1px; }
#startmenu .start-section { font-weight: bold; padding: 4px 6px 2px; }

#programs-menu { display: none; padding: 2px 0 3px 10px; }
#programs-menu.open { display: block; }
.programs-submenu { display: none; padding: 2px 0 3px 10px; }
.programs-submenu.open { display: block; }
.programs-submenu button { min-height: 26px; padding: 2px 6px; font-size: 11px; }
.programs-submenu svg, .programs-submenu .classic-icon { width: 18px; height: 18px; }
#submenu-toggle .arrow { margin-left: auto; }

/* ------------------------------- Menu de contexto ------------------------------ */
#contextmenu {
  position: fixed;
  min-width: 190px;
  padding: 3px;
  z-index: 10005;
}
#contextmenu hr { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 3px 1px; }
.context-item {
  display: block;
  border: 0;
  background: transparent;
  box-shadow: none;
  width: 100%;
  text-align: left;
  padding: 6px 18px;
  margin: 0;
}
.context-item:hover, .context-item:focus-visible { background: navy; color: #fff; outline: none; }
.context-item[aria-disabled="true"] { color: var(--silver-dark); }
.context-item.checked::before { content: "✓ "; }

/* ------------------------------------ Avisos ----------------------------------- */
#toast {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font: 12px var(--font-ui);
  max-width: 290px;
  background: #ffffc6;
  border: 1px solid #000;
  padding: 10px;
  box-shadow: 2px 2px #0005;
  z-index: 100000;
  pointer-events: none;
}
#toast::before { content: "LAB 95"; display: block; font-weight: bold; margin-bottom: 5px; }
#toast.stack::after {
  content: "";
  position: absolute;
  inset: 3px -3px -3px 3px;
  border: 1px solid #000;
  background: #ffffc6;
  z-index: -1;
}

/* ------------------------------ Botão "NÃO APERTE" ----------------------------- */
#panic {
  position: absolute;
  right: 18px;
  bottom: 24px;
  background: var(--silver);
  color: #000;
  border: 2px solid;
  border-color: var(--bevel-out);
  padding: 7px 12px;
  font: 11px var(--font-ui);
  box-shadow: 1px 1px #000;
  z-index: 2;
}
#panic::first-line { font-weight: bold; }
#panic.danger { background: #b30000; color: #fff; animation: panicpulse .8s infinite alternate; }
@keyframes panicpulse { to { transform: scale(1.03); } }

#egg-badge {
  position: absolute;
  right: 20px;
  bottom: 78px;
  font: 10px var(--font-mono);
  color: #b5d5d5;
  pointer-events: none;
}

/* --------------------------- Efeitos de ambiente (fogo) ------------------------ */
#fire {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 9998;
  display: none;
  background: linear-gradient(0deg, #ff3500bb, transparent 60%);
}
.flame {
  position: absolute;
  bottom: -20px;
  font-size: clamp(30px, 6vw, 80px);
  animation: rise 2s linear forwards;
  user-select: none;
}
@keyframes rise { to { transform: translateY(-110vh) rotate(30deg); opacity: 0; } }

/* Tremida dele gabinete */
.shake { animation: shake .12s 9; }
@keyframes shake {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(7px, 2px); }
  75% { transform: translate(-6px, -3px); }
}

/* Papéis de parede clássicos entregues com o projeto */
body.wp-pattern #desktop {
  background-color: #008080;
  background-image: repeating-conic-gradient(#008080 0% 25%, #007474 0% 50%);
  background-size: 4px 4px;
}
body.wp-night { --teal: #000; --navy: #400040; }
body.wp-night #desktop { background-color: #000; }
body.wp-night #desktop-stamp { color: #303; text-shadow: 1px 1px #606; }
body.wp-grid #desktop {
  background-color: #008080;
  background-image:
    linear-gradient(#008d8d 1px, transparent 1px),
    linear-gradient(90deg, #008d8d 1px, transparent 1px);
  background-size: 8px 8px;
}
body.wp-sunset #desktop {
  background-image: radial-gradient(circle at 50% 120%, #ff8c42 0%, #d94f2b 25%, #7b2d5e 55%, #2b1055 100%);
  background-color: #2b1055;
}
body.wp-hills #desktop {
  background-color: #4a6fa5;
  background-image:
    radial-gradient(circle at 20% 80%, #6b8fc4 0 40%, transparent 41%),
    linear-gradient(#f6d365 0%, #fda085 60%, #4a6fa5 60%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
}

/* Tema de alto contraste opcional (Painel de Controle) */
body.contrast { --silver: #d4d4d4; }
body.contrast .window.active .titlebar { background: #400040; }

/* Responsivo: telas pequenas */
@media (max-width: 650px) {
  #icons { grid-template-rows: repeat(auto-fill, 70px); grid-auto-columns: 68px; grid-auto-rows: 70px; gap: 2px 0; padding: 5px; }
  .desktop-icon { width: 66px; height: 68px; }
  .desktop-icon svg { width: 30px; height: 30px; }
  .desktop-icon span { font-size: 10px; line-height: 12px; }
  #desktop-stamp { top: 14px; right: 12px; }
  #desktop-stamp strong { font-size: 28px; }
  #desktop-stamp small { font-size: 8px; }
  #panic { right: 10px; bottom: 17px; padding: 5px; font-size: 10px; }
  #tray { padding: 0 1px; }
  #clock { padding: 2px; }
  #taskitems button { width: 90px; flex-basis: 90px; }
  #taskitems button span { display: none; }
  #taskitems svg { margin: auto; }
  #startmenu { width: 245px; }
  #egg-badge { right: 10px; bottom: 67px; }
}