/* nyx-hlavicka.css — společná lištička všech aplikací Nyxia.
   Schválně nemá vlastní paletu: pozadí je průhledné a text dědí barvu
   stránky, takže sedne do tmavé i světlé aplikace, aniž by každá z nich
   musela o hlavičce vědět. Linka je neutrální šedá, která funguje na obojím. */

/* !important je tu kvůli explorer.css: ten má pravidlo na holý `header`
   (`body:not(.exp-shell) header`), které je specifičtější než třída a mimo
   jiné roztahuje obsah přes `justify-content: space-between` — název nástroje
   by odletěl na druhý konec lišty. */
.nyx-hl {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  min-height: 44px !important;
  height: 44px;
  padding: 0 14px !important;
  border-bottom: 1px solid rgba(128, 128, 128, .26);
  font: 400 13.5px/1 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: inherit;
  flex: 0 0 auto;
  max-width: none !important;
  margin: 0 !important;
}

.nyx-hl-znacka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  margin-left: -8px;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: background-color .12s;
}
.nyx-hl-znacka:hover { background: rgba(128, 128, 128, .16); }
.nyx-hl-znacka img { display: block; width: 20px; height: 20px; }
.nyx-hl-znacka b { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }

/* Na úzkém displeji se „Nyxium“ lámalo na dva řádky a na název aplikace pak
   nezbylo místo — „Image Edit“ se ořízl na „Imag…“. Pod 360 px proto text
   značky ustoupí logu; to zůstává, takže se pozná, kde člověk je. */
@media (max-width: 359px) {
  .nyx-hl-znacka b { display: none; }
}

.nyx-hl-del {
  width: 1px;
  height: 16px;
  background: rgba(128, 128, 128, .36);
}

.nyx-hl-tool {
  opacity: .62;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spouštěč stojí hned vedle názvu aplikace, ne na druhém konci. Míří se na
   `id`, protože launcher.js si při připojení přepíše `className` na
   `nyx-app-launcher` a jakákoli vlastní třída by se tím smazala. */
.nyx-hl #nyxAppsMount { display: flex; align-items: center; margin-left: 3px; }

/* Spouštěč je sám o sobě 44 px vysoký a do 44px lištičky se nevejde.
   Zmenšoval ho explorer.css, jenže aplikace, které ten skin nenačítají
   (Wordle), ho měly přes celou výšku a přetékal dolů. Velikost patří
   k lištičce, ne ke skinu. */
.nyx-hl .nyx-launch-btn {
  width: 34px;
  height: 34px;
  border-color: transparent;
  background: transparent;
}

/* Ikona běžící aplikace. Barvy si nese launcher.css (`.nyx-logo-*`); když
   stránka launcher.css nemá, platí tahle neutrální náhrada, aby z ikony
   nezbyl prázdný čtverec. */
.nyx-hl-ik {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 22px;
  margin-left: 1px;
}
.nyx-hl-ik svg, .nyx-hl-ik img { display: block; width: 20px; height: 20px; }
.nyx-hl-ik svg :where(*) { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* ── aplikace, které si vozí vlastní značku ──────────────────────────
   Dvě „Nyxium" nad sebou nedávají smysl, tak se ta aplikační skryje.
   Zbytek její lišty (ovládání, spouštěč) zůstává. */

html[data-nyxapp="music"] .hlava .znacka,
html[data-nyxapp="zvuk"]  .zv-znacka,
html[data-nyxapp="docs"]  .nd-logo,
html[data-nyxapp="smart"] header .logo { display: none !important; }

/* Nástroje (Convert, Compress, QR, Hesla, Barvy, Kalkulačka, Image Edit,
   Tabule, Minecraft) mají všechny stejnou stavbu: `<header>` se značkou
   „NYXIUM NÁSTROJ" vlevo a přepínačem tématu vpravo. Značka jde pryč,
   přepínač zůstává — a tím pádem se zarovná doprava. */
html[data-nyxapp="imageedit"]  body > header > .brand,
html[data-nyxapp="whiteboard"] body > header > .brand,
html[data-nyxapp="kalkulacka"] body > header > .brand,
html[data-nyxapp="qr"]         body > header > .brand,
html[data-nyxapp="password"]   body > header > .brand,
html[data-nyxapp="barvy"]      body > header > .brand,
html[data-nyxapp="convert"]    body > header > .brand,
html[data-nyxapp="compress"]   body > header > .brand { display: none !important; }

html[data-nyxapp="imageedit"]  body > header:not(.nyx-hl),
html[data-nyxapp="whiteboard"] body > header:not(.nyx-hl),
html[data-nyxapp="kalkulacka"] body > header:not(.nyx-hl),
html[data-nyxapp="qr"]         body > header:not(.nyx-hl),
html[data-nyxapp="password"]   body > header:not(.nyx-hl),
html[data-nyxapp="barvy"]      body > header:not(.nyx-hl),
html[data-nyxapp="convert"]    body > header:not(.nyx-hl),
html[data-nyxapp="compress"]   body > header:not(.nyx-hl) { justify-content: flex-end !important; }

/* Cloud a Docs jsou celoobrazovkové schránky (`position:fixed; inset:0`),
   takže by lištičku překryly. Odsadí se o její výšku — a `height` se musí
   přepsat spolu s `top`, jinak schránka přeteče dolů o těch 44 px a schová
   se spodní stavový řádek. */
html[data-nyxapp="cloud"] body.w11 #app,
html[data-nyxapp="cloud"] body #authScreen,
html[data-nyxapp="docs"]  body #app {
  top: 44px !important;
  height: calc(100% - 44px) !important;
  /* Cloud ma v sobe `#app { min-height: 100vh }`, a min-height prebije height. */
  min-height: calc(100% - 44px) !important;
}

/* Satisfying kreslí na celou plochu a svůj pruh s režimy má taky na `top: 0`,
   takže ho lištička překryla — přepnout efekt pak nešlo vůbec, záložky byly
   pod ní. Plátno zůstává přes celou plochu schválně, odsadí se jen ovládání. */
html[data-nyxapp="satisfying"] .ui.top { top: 44px !important; }
html[data-nyxapp="satisfying"] .ui.top .brand { display: none !important; }

/* Průzkumnický vzhled Cloudu schovává všechny `header` (`body.w11 header`),
   aby se starý chrome nepletl do mřížky. Tenhle jeden zůstat musí, a radši
   mimo mřížku — `position: fixed` se jí nedotkne. */
html[data-nyxapp="cloud"] body.w11 .nyx-hl {
  display: flex !important;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  background: var(--w11-bg, #191919);
}

@media (max-width: 520px) {
  .nyx-hl { height: 42px; padding: 0 11px; gap: 8px; font-size: 13px; }
  html[data-nyxapp="cloud"] body.w11 #app,
  html[data-nyxapp="cloud"] body #authScreen,
  html[data-nyxapp="docs"]  body #app {
    top: 42px !important;
    height: calc(100% - 42px) !important;
    min-height: calc(100% - 42px) !important;
  }
}

/* Image Edit si nikdy nesrovnal výchozí `body { margin: 8px }`, takže by
   lištička stála osm pixelů od kraje. Jediná appka, která to má. */
html[data-nyxapp="imageedit"] .nyx-hl {
  margin: -8px -8px 0 !important;
  /* Body je flex, takze zaporny okraj sam o sobe listicku neroztahne. */
  width: calc(100% + 16px) !important;
}

@media print { .nyx-hl { display: none !important; } }

/* ── pravá strana lišty: barva a účet ────────────────────────────────── */

.nyx-hl-prava {
  margin-left: auto !important;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

/* Tlačítko výběru barvy. Nulová váha schválně: devět stránek si ho stylovalo
   dávno před lištičkou a jejich vzhled má přednost. */
:where(.nyx-hl .theme-btn) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: none; color: inherit; cursor: pointer;
  transition: background-color .12s;
}
:where(.nyx-hl .theme-btn):hover { background: rgba(128, 128, 128, .16); }
:where(.nyx-hl .theme-btn) svg { width: 17px; height: 17px; }

/* Nabídka barev visí pod tlačítkem, ne nad ním — v liště je nahoře. */
.nyx-hl .theme-pop { top: calc(100% + 8px) !important; bottom: auto !important; right: 0 !important; }

/* Prvek účtu se sem přestěhoval ze spodního rohu, takže se mu musí sebrat
   `position: fixed` a nabídka otočit dolů. nyx-ucet.js si styl vkládá sám do
   hlavičky dokumentu, proto `!important`. */
.nyx-hl .nyx-ucet {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  display: flex;
  align-items: center;
}
.nyx-hl .nyx-ucet-chip {
  height: 32px !important;
  padding: 0 10px 0 5px !important;
  box-shadow: none !important;
  background: none !important;
  border-color: transparent !important;
}
.nyx-hl .nyx-ucet-chip:hover { background: rgba(128, 128, 128, .16) !important; }
.nyx-hl .nyx-ucet-av { width: 22px !important; height: 22px !important; flex-basis: 22px !important; }
.nyx-hl .nyx-ucet-pop {
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  right: 0 !important;
}

@media (max-width: 560px) {
  .nyx-hl .nyx-ucet-jm { display: none; }
}

/* Zvednutí jen na dobu, co je rozbalená nabídka — viz hlidejOtevrene().
   Nad 1200 kvůli rozbalovacím seznamům (`.nyxsel-list`), pod přepravníky
   typu zaneprázdněného závoje, které mají přednost oprávněně. */
.nyx-hl.nyx-hl-nad { z-index: 1500 !important; }