/* ==========================================================
   TASKBAR — szary pasek na dole
   Zasada zwijania:
   1. MENU i zegar zawsze na krańcach, karty okien w środku się kurczą
   2. przy węższym ekranie karty pokazują tylko ikonki
   3. gdy już nic się nie mieści — znika zegar, MENU zostaje
   ========================================================== */

.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--taskbar-h) + env(safe-area-inset-bottom, 0px));
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--face);
  box-shadow: inset 0 1px var(--light-2), inset 0 2px var(--light);
  display: flex;
  align-items: stretch;
  gap: 4px;
  z-index: 10000;
}

/* ---------- MENU ---------- */
.taskbar__menu {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 6px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.taskbar__menu img { width: 20px; height: auto; }

/* ---------- Karty okien ---------- */
.taskbar__tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 3px;
  overflow: hidden;
}

.taskbar__tab {
  flex: 0 1 170px;
  min-width: 34px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  text-align: left;
  overflow: hidden;
}
.taskbar__tab img { flex: 0 0 auto; width: 16px; height: 16px; image-rendering: pixelated; }
.taskbar__tab span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.taskbar__tab.is-active {
  box-shadow: var(--bevel-in);
  font-weight: 700;
  background-color: #e8e8e8;
  background-image:
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%);
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
}

/* ---------- Zegar ---------- */
.taskbar__clock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  box-shadow: var(--bevel-thin-in);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
}
.taskbar__time { font-weight: 700; }

/* Wąsko: karty jako same ikonki */
@media (max-width: 560px) {
  .taskbar__tab { flex: 0 1 40px; min-width: 22px; justify-content: center; padding: 2px; }
  .taskbar__tab span { display: none; }
}

/* Bardzo wąsko: zegar znika, zostaje MENU */
@media (max-width: 185px) {
  .taskbar__clock { display: none; }
}