* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Safe-area insety (notch, home indicator, zaoblené rohy) — index.html má
   `viewport-fit=cover`, takže layout jde až pod ně a musíme si je odsadit sami.

   Schválně přes proměnnou, ne `env()` napřímo, ze dvou důvodů:
   (a) fallback (`0px`) je napsaný na JEDNOM místě — v pravidlech pak stačí
       `var(--sai-top)` a nikde se nezapomene;
   (b) `env()` NEJDE ničím přebít, ale proměnnou ano — a to je jediný způsob,
       jak layout s notchem ověřit jinde než na reálném iPhonu:
         document.documentElement.style.setProperty('--sai-top', '47px');
         document.documentElement.style.setProperty('--sai-bottom', '34px');
       (inline styl na :root přebije tenhle blok, takže se dá simulovat
       i landscape přes --sai-left / --sai-right).

   Pravidlo, kam inset patří: prvku, který se REÁLNĚ dotýká hrany viewportu.
   Prvek uvnitř kontejneru, jehož hranu už někdo odsadil, inset mít nesmí —
   byl by to dvojitý odstup. */
:root {
  --sai-top: env(safe-area-inset-top, 0px);
  --sai-right: env(safe-area-inset-right, 0px);
  --sai-bottom: env(safe-area-inset-bottom, 0px);
  --sai-left: env(safe-area-inset-left, 0px);
  /* Kolik px odspoda ukusuje mobilni klavesnice (pise mobile.js). Default 0
     drzi desktop i mobil bez klavesnice na dnesnim chovani i bez JS. */
  --kb-inset: 0px;
}
/* S vytazenou klavesnici je home indicator pod ni — spodni safe-area inset
   by jen delal mrtvou plochu nad klavesnici (tabstrip, doky). Specificita
   `html.kb-open` (0,1,1) prebiji `:root` (0,1,0). */
html.kb-open { --sai-bottom: 0px; }
html, body {
  margin: 0; padding: 0;
  /* --app-h sleduje skutecnou viditelnou plochu (visualViewport.height) —
     na mobile pri vyrolovani klavesnice se zmensi a UI se prizpusobi. */
  height: var(--app-h, 100vh);
  /* iOS Safari pull-to-refresh zere swipe-down v horni casti viewportu
     — pri swipe gestu na xterm to ukousne kazdy gest a scroll v
     historii TUI je pak fragmentovany. Globalne off. */
  overscroll-behavior-y: none;
  /* touch-action: manipulation potlaci double-tap-to-zoom a 300ms
     tap delay, ale ponecha pinch-zoom (accessibility). */
  touch-action: manipulation;
}
body {
  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0c0c0c;
  color: #c8c8c8;
  font-size: 13px;
}

/* Sidebar jde plnou výškou vlevo (oba řádky); úzká lišta #topbar je jen nad
   obsahem v pravém sloupci. */
#app {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  height: var(--app-h, 100vh);
  overflow: hidden;
}
#sidebar { grid-area: sidebar; }
#topbar { grid-area: topbar; }
#app > main { grid-area: main; min-height: 0; }

/* ─── Sidebar ─── */
#sidebar {
  background: #151515;
  border-right: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Tečka spojení. Musí zůstat GLOBÁLNÍ: ws-events.js jí přepisuje celý
   `className` (`el.className = cls`), což by scoped hash od Svelte smazalo a
   styl by přestal platit. Sedí jako razítko v rohu pečeti „K" ve značce
   sidebaru (Sidebar.svelte), takže je stav serveru vidět i ve sbaleném railu. */
#status-dot {
  position: absolute;
  left: 17px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #151515;
  background: #555;
}
#status-dot.connected { background: #22c55e; }
#status-dot.disconnected { background: #ef4444; }


/* ─── Globální horní lišta (přes celou šířku) + „search everywhere" ─── */
/* Topbar je nejvyšší prvek shellu → nese horní safe-area inset. Výška roste
   o inset a stejná hodnota jde do padding-top, takže obsah zůstává vycentrovaný
   v původních 44 px POD notchem (box-sizing: border-box platí globálně). */
#topbar {
  flex: none;
  height: calc(44px + var(--sai-top));
  display: grid;
  grid-template-columns: 1fr auto;   /* search (centrovaný) | účet + presence vpravo */
  align-items: center;
  gap: 12px;
  padding: var(--sai-top) max(14px, var(--sai-right)) 0 max(14px, var(--sai-left));
  background: #121212;
  border-bottom: 1px solid #2a2a2a;
  position: relative;
  z-index: 60;          /* nad #app, ať dropdown překryje terminál i panely */
}
/* .global-search + dropdown (.gs-*) migrovány do GlobalSearch.svelte (scoped). */
/* Pravý cluster topbaru — presence avatary + účet (jméno, odhlásit). */
.topbar-right {
  grid-column: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* .presence-rail + klikací avatary migrovány do PresenceRail.svelte / PresenceAvatars.svelte (scoped). */
.account-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.account-chip[hidden] { display: none; }
.account-chip .account-user {
  font-size: 12px;
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.account-logout {
  flex: none;
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #c8c8c8;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.account-logout:hover { background: #1f1f1f; border-color: #3a3a3a; }
/* Dropdown výsledků (.global-search-results, .gs-*) migrován do GlobalSearch.svelte. */

/* Deep-link flash — podsvícení nalezeného místa v otevřené wiki / souboru úkolu.
   mark.gs-flash injektuje highlight.js do otevřeného dokumentu → zůstává globální. */
mark.gs-flash {
  background: #b8944066;
  color: inherit;
  border-radius: 3px;
  box-shadow: 0 0 0 3px #b8944066;
  transition: background .9s ease, box-shadow .9s ease;
}
mark.gs-flash.gs-flash-out {
  background: transparent;
  box-shadow: 0 0 0 3px transparent;
}

.sidebar-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.sidebar-search-icon {
  position: absolute;
  left: 8px;
  width: 13px;
  height: 13px;
  color: #666;
  pointer-events: none;
  transition: color .12s;
}
.sidebar-search {
  width: 100%;
  box-sizing: border-box;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  color: #c8c8c8;
  padding: 5px 8px 5px 27px;
  font-size: 12px;
  border-radius: 6px;
}
.sidebar-search:focus {
  outline: none;
  border-color: #b89440;
}
.sidebar-search-wrap:focus-within .sidebar-search-icon { color: #b89440; }
.sidebar-search::placeholder { color: #666; }
/* „Zobrazit vše" jako ikonové toggle: přeškrtnuté oko = funkce skryté
   (default), otevřené zlaté oko = vše vidět. Checkbox je vizuálně skrytý. */

.loading {
  padding: 20px;
  color: #666;
  font-style: italic;
}
/* ─── Presence avatary (kdo kde je) ─── */
/* Samotné kolečko (.presence-avatar) migrováno do PresenceAvatars.svelte
   (scoped) — kreslí ho jediný renderer. Tady zůstává jen OBAL, který si vanilla
   hosty vyrábějí samy (řádek tabulky / položka sidebaru). */
td .row-presence { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; }

/* ─── Kostra top-level pohledů ──────────────────────────────────────
   Každý pohled je `<main data-view="…">` v index.html a všechny mají stejný
   tvar: hlavička v prvním řádku, tělo ve druhém, scroll si řeší tělo samo.
   Tohle pravidlo je jediný zdroj té kostry — dřív měl každý pohled vlastní
   kopii týchž tří řádků (#main, #dashboard, #settings-view, #repos-view,
   #tasks-overview, #sessions-overview, #history-view, #wiki-view, #graph-view,
   #agent-docs-view, #help-view, #users-view, #presence-debug-view,
   #autoclose-debug-view) a na dva nové pohledy (#presets-view,
   #project-view) se zapomnělo úplně. Stejná past jako u seznamů pohledů,
   které nahradil `showOnlyView()` v dom.js: přidat pohled = přidat `<main>`.

   ⚠ Sloupec MUSÍ být `minmax(0, 1fr)`, ne implicitní `auto`. `auto` se sizuje
   podle obsahu, takže dlouhý hint v `ViewHeader` (nebo široká tabulka) vynutí
   track širší než displej — naměřeno 1124 px v 390px viewportu — a `overflow:
   hidden` níž ten přesah natvrdo uřízne: text mizí za pravým okrajem a nedá se
   k němu doscrollovat. `min-width: 0` na dítěti to NESPRAVÍ, protože problém je
   šířka tracku, ne to, co se do něj vejde. Diagnostika: `scrollWidth` na
   `<main>` je větší než jeho `getBoundingClientRect().width`, zatímco
   `documentElement.scrollWidth` zůstává v pořádku — na dokumentu se to nepozná.

   Pohledy, které potřebují víc sloupců (workspace s navigátorem), si je
   přepisují níž vlastním, specifičtějším pravidlem. */
main[data-view] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;   /* header | tělo */
  overflow: hidden;
}

/* Navigator host — dokud není workspace otevřený, nezabírá místo. Umístění
   (grid-area / overlay) řeší media-scoped pravidla níž (desktop sloupec vs
   mobilní overlay). */
#navigator-host { display: none; }

/* Starý horizontální session-bar nahradil navigátor — natrvalo skrytý. */

/* ── Navigátor: desktop = 2-sloupcový grid #main + sbalený sidebar rail ──
   Workspace otevřený (body.ws-active), ne detached. Vlevo navigátor (task
   picker sloupec), vpravo mid-panel. Header spanuje. Levý sidebar se sbalí na
   úzký rail (hover → rozbalí přes obsah).

   `and (pointer: fine)` je nutná druhá půlka podmínky: tohle je negace
   mobilního `(max-width: 768px), (pointer: coarse)`, a bez ní platí obě větve
   naráz na dotykových zařízeních širších než 768 px (telefon na šířku, tablet)
   → shell se namačká do 60px railu. Nemazat. */
@media (min-width: 769px) and (pointer: fine) {
  body.ws-active:not(.detached) #main {
    grid-template-columns: var(--nav-w, 288px) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header header"
      "nav    mid";
  }
  body.ws-active:not(.detached) #workspace-header { grid-area: header; }
  body.ws-active:not(.detached) #navigator-host {
    grid-area: nav; display: flex; min-width: 0; min-height: 0; overflow: hidden;
  }
  body.ws-active:not(.detached) #navigator-host > * { flex: 1; min-width: 0; }
  body.ws-active:not(.detached) #mid-panel { grid-area: mid; }

  /* Sbalený sidebar rail: obsah zůstane v přirozené šíři, jen se ořízne na
     rail. Ikony/začátky řádků koukají z levého okraje; hover rozbalí na overlay.

     Řídí to `body.sidebar-rail`, kterou nastavuje Sidebar.svelte podle toho,
     jestli je VIDĚT `#main`. Schválně ne `body.ws-active` jako sousední
     pravidla: ta třída se jen přidává a nikdy neodebírá, takže po prvním
     otevření pracoviště by sidebar zůstal sbalený i na dashboardu, kde je
     místa dost. Co je uvnitř neviditelné (visibility, ne display — aby se při
     rozbalení nic nepřeskládalo), si řeší komponenta ve svých scoped stylech. */
  body.sidebar-rail #app { grid-template-columns: 60px 1fr; }
  body.sidebar-rail #sidebar {
    width: 60px; min-width: 0; justify-self: start; overflow: hidden;
    transition: width .15s ease; z-index: 5;
  }
  body.sidebar-rail #sidebar > * { width: 260px; }
  body.sidebar-rail #sidebar:hover {
    width: 260px; z-index: 960; box-shadow: 6px 0 24px rgba(0, 0, 0, .55);
  }
}

#workspace-header {
  padding: 12px 20px;
  border-bottom: 1px solid #2a2a2a;
  background: #0f0f0f;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#workspace-header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #e5e5e5;
}
#workspace-header p {
  margin: 2px 0 0;
  font-size: 11px;
  color: #888;
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: #2a2a2a;
  font-size: 10px;
  color: #888;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge.working { background: #3a2e15; color: #b89440; }
.badge.idle { background: #1a2e1a; color: #4ade80; }
.badge.stopped { background: #2e1a1a; color: #f87171; }

#workspace-header button {
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  color: #c8c8c8;
  padding: 4px 10px;
  margin-left: 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
#workspace-header button:hover { background: #3a3a3a; }

/* ─── Lišta nad main/úpravou (co je to za session) ───
   Obdoba #task-header-bar, ale bez akčních tlačítek — nad session oknem drží
   titulek („Hlavní session" / „Main (Jméno)" / „Úprava pracoviště"), ať je vždy
   zřejmé, na co se člověk dívá. Titulek + přepnutí session-view řídí
   session-window.js (updateSessionHeader) z jednoho místa. Přímé dítě #mid-panelu
   (MidPanel ho neadoptuje). Desktop: full-width řádek nad splitem (#mid-panel je
   flex-column). Mobil: první řádek gridu + viditelné ← (viz @media níž). */
#session-header {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;          /* nesmí roztáhnout kontejner (grid blowout na mobilu) */
  overflow: hidden;      /* pojistka: dlouhý titulek nikdy nerozšíří stránku */
  /* Lišta jde přes celou šířku → v landscape s notchem drží boční insety. */
  padding: 7px max(12px, var(--sai-right)) 7px max(12px, var(--sai-left));
  background: #151515;
  border-bottom: 1px solid #2a2a2a;
}
body.session-view:not(.task-open) #session-header { display: flex; }
#session-header #session-header-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* Jantar (jako „main" akcent) — vizuálně odliší session lištu od task lišty
     (ta má pergamenový #d8d2c0), takže „session vs. úkol" je zřejmé na první pohled. */
  font-size: 13px; font-weight: 600; color: #b89440;
}
/* ← zpět: jen na mobilu (desktop má navigátor stále vedle → zbytečné). */
#session-header-back { display: none; }

/* ─── Task hlavička nad oběma panely (název úkolu + akce) ───
   Přímé dítě #mid-panelu (MidPanel ho neadoptuje), zobrazuje se jen v task-mode.
   Desktop: full-width řádek nad splitem (#mid-panel je flex-column). Mobil:
   první řádek gridu (viz @media). */
#task-header-bar {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;          /* nesmí roztáhnout kontejner (grid blowout na mobilu) */
  overflow: hidden;      /* pojistka: dlouhý název nikdy nerozšíří stránku */
  /* Lišta jde přes celou šířku → v landscape s notchem drží boční insety. */
  padding: 7px max(12px, var(--sai-right)) 7px max(12px, var(--sai-left));
  background: #151515;
  border-bottom: 1px solid #2a2a2a;
}
body.task-open #task-header-bar { display: flex; }
#task-header-bar #task-detail-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: #d8d2c0;
}
#task-header-bar .header-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* ← zpět: jen na mobilu (desktop má navigátor stále vedle → zbytečné). */
#task-header-back { display: none; }


/* ─── Mid panel: kompozice z MidPanel.svelte ───
   Desktop: vnitřní split [ terminál | sidebar(panel + svislý tab strip) ].
   Mobil:   #mid-panel je grid (viz @media níž) a .mp-* wrappery se přes
            display:contents zploští → terminál/right-column/tab-strip se stanou
            přímými gridovými položkami (existující mobilní rozložení beze změny). */
#mid-panel {
  display: flex;               /* sloupec: [task hlavička (task-mode)] + [split] */
  flex-direction: column;
  background: #0c0c0c;
  overflow: hidden;
  min-height: 0;
  position: relative;
}
.mp-inner { flex: 1 1 0; min-height: 0; }
.mp-split { display: flex; height: 100%; min-width: 0; min-height: 0; }
.mp-pane { display: flex; min-width: 0; min-height: 0; overflow: hidden; }
/* min-width drží session okno viditelné i na úzkém desktopu — bez něj fixní
   flex-basis sidebaru rozdrtila terminál na šířku 0 (okno „zmizelo"). */
.mp-term { flex: 1 1 0; min-width: 240px; background: #0c0c0c; }
.mp-term > #terminal-wrap { flex: 1 1 auto; min-width: 0; min-height: 0; }
.mp-sidebar {
  /* flex-shrink 1: když je okno úzké, ustoupí sidebar (po svoji min-width),
     ne terminál. Šířku jinak řídí tažítko, viz layout.svelte.js. */
  flex: 0 1 var(--sidebar-w, 516px);
  min-width: 236px;                     /* panel ~200px + svislý tab strip 36px */
  border-left: 1px solid #2a2a2a;
  transition: flex-basis 0.15s;
}
/* Během tažení vypni animaci flex-basis, ať panel jde přesně za kurzorem. */
.mp-sidebar.resizing { transition: none; }
/* Tažítko mezi terminálem a sidebarem. Úzký prvek s širší neviditelnou
   hit-zónou (::before) pro snadné chycení; při hoveru/tažení se rozsvítí. */
.mp-resizer {
  flex: 0 0 3px;
  position: relative;
  cursor: col-resize;
  background: #2a2a2a;
  transition: background 0.12s;
}
.mp-resizer::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -4px; right: -4px;   /* rozšíří chytací plochu */
}
.mp-resizer:hover { background: #3d6fb5; }
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing .mp-resizer { background: #3d6fb5; }
.mp-panel-host { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; }
.mp-panel-host > #right-column { flex: 1 1 auto; min-width: 0; }
/* Collapse: sidebar se zúží na samotný svislý tab strip (ten zůstává — klik na
   tab ho zase rozbalí). min-width: 0 přebíjí min-width rozbaleného sidebaru,
   jinak by ho na 236px držela i po collapse. */
.mp-sidebar.collapsed { flex-basis: 36px; min-width: 0; }
.mp-sidebar.collapsed .mp-panel-host { display: none; }
/* Detached okno (desktop popup): terminál se skryje, panel zabere vše. */
body.detached .mp-term { display: none; }
body.detached .mp-sidebar { flex: 1 1 auto; border-left: none; }
body.detached .mp-resizer { display: none; }   /* v detached sidebar zabírá vše */

#terminal-wrap {
  background: #0c0c0c;
  overflow: hidden;
  position: relative;
}
#terminal {
  width: 100%;
  height: 100%;
}

/* Resume overlay: překryv nad terminálem během closed-loop doručení resume
   promptu (session-overlay.js). Zakrývá vizuálně + vstup je v terminal.js zakázán,
   aby se uživatelovo psaní nepomíchalo s injektovaným „probudil tě…" promptem.
   Mizí po prvním UserPromptSubmit (potvrzení doručení) nebo fallbacku ze serveru. */
#resume-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 12, 12, 0.82);
  backdrop-filter: blur(2px);
  cursor: progress;
}
#resume-overlay[hidden] { display: none; }
.resume-overlay-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 80%;
  text-align: center;
  color: #d8c79a;
  font-size: 14px;
  line-height: 1.4;
}
.resume-overlay-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(184, 148, 64, 0.25);
  border-top-color: #b89440;
  border-radius: 50%;
  animation: resume-overlay-spin 0.8s linear infinite;
}
@keyframes resume-overlay-spin { to { transform: rotate(360deg); } }

/* Pozn.: .session-window / .empty-hint / .transcript-* styly žijí ve scoped
   <style> v SessionWindow.svelte (sdílené třídy tam jako :global). */

/* Obal živého terminálu (Terminal.svelte): vyplní session okno a je positioned,
   aby se do jeho pravého horního rohu dal napozicovat #terminal-fabs
   (Stop/Reset/Owner). Mobilní FABy vpravo dole už tu nekotví — bydlí ve
   FabDocku na <body>, aby se nepraly s OSC52 launcherem. */
.terminal-shell {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Host pro xterm (container, který dostane registry.create → instance.term.open).
   Vyplní obal; non-owner mód si na něj dává .term-fixed (níže). */
.term-host {
  width: 100%;
  height: 100%;
}

/* Non-owner ve sdíleném terminálu: PTY má pevnou (ownerovu) geometrii.
   Necháme xterm vyrůst do své přirozené velikosti a přetečení scrollujeme,
   místo abychom přepisovali velikost (to dělá jen owner). term-fixed dává
   terminal.js na container = .term-host. */
.term-host.term-fixed {
  overflow: auto;
}
.term-host.term-fixed .xterm {
  width: max-content;
  height: max-content;
}

/* FAB tlačítka v pravém horním rohu terminálu (Reset session + Převzít velikost).
   Pinned v rohu wrapu (mimo scrollovaný #terminal), takže nezmizí při scrollu
   non-ownera. Flex řádek → tlačítka se vedle sebe poskládají a nezávisle skrývají. */
#terminal-fabs {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 11;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* "Převzít / ovládáš velikost" — sdílený terminál. */
#owner-fab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 6px;
  background: rgba(184, 148, 64, 0.92);
  color: #0c0c0c;
  border: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  opacity: 0.88;
  transition: opacity .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
#owner-fab:hover { opacity: 1; }
#owner-fab[hidden] { display: none; }

/* "↻ Reset session" / "■ Stop session" — akce nad běžící session. Vedle
   „Převzít velikost", ale tmavé/neutrální (akce, ne primární amber claim). */
#reset-fab, #stop-fab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 6px;
  background: rgba(22, 22, 22, 0.92);
  color: #d9b75c;
  border: 1px solid #3a3a3a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  opacity: 0.85;
  transition: opacity .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
#reset-fab:hover { opacity: 1; background: rgba(36, 28, 12, 0.95); }
#reset-fab[hidden] { display: none; }

/* Stop je destruktivnější (ukončí běh) → ztlumená červená místo amber. */
#stop-fab { color: #d98a7c; }
#stop-fab:hover { opacity: 1; background: rgba(40, 18, 14, 0.95); }
#stop-fab[hidden] { display: none; }

.terminal-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}
/* Pozn.: .empty-hint (+ code) a .session-close-reason žijí ve scoped <style>
   v SessionWindow.svelte (.empty-hint a .empty-hint code tam jako :global,
   protože je sdílí i statický placeholder v index.html). */

/* xterm — TUI fullscreen mode draws on alt-screen, no need for viewport scrollbar */
.xterm { padding: 8px; height: 100%; }
.xterm .xterm-viewport {
  background-color: #0c0c0c !important;
  scrollbar-width: none;
}
.xterm .xterm-viewport::-webkit-scrollbar { display: none; }

/* Touch devices: vsechen scroll uvnitr xterm sami prevadime na SGR
   wheel events (viz terminal.js installSwipeToWheel). Vypneme nativni
   touch handling at iOS nepretahuje pull-to-refresh ani vlastni scroll
   bounce. */
@media (pointer: coarse) {
  .xterm .xterm-viewport,
  .xterm .xterm-screen {
    touch-action: none;
    overscroll-behavior: none;
  }
}

/* ─── Right column (tab content area) ─── */
#right-column {
  background: #0f0f0f;
  overflow: hidden;
  min-height: 0;
  display: grid;
}
.tab-pane {
  display: none;
  overflow: hidden;
  min-height: 0;
  grid-row: 1;
  grid-column: 1;
}
.tab-pane.active { display: grid; min-height: 0; }
/* Files pane: stejný poměr jako task detail — strom max 30 % výšky,
   při menším obsahu shrinkne a zbytek dostane preview. */
.tab-pane[data-pane="files"].active {
  display: flex;
  flex-direction: column;
}
/* Host pro WorkspaceFiles.svelte (strom + náhled „pod sebe"). Vyplní celý
   files tab; vlastní rozdělení řeší Split uvnitř komponenty. */
.files-pane-host { flex: 1; min-height: 0; display: flex; }
.tab-pane[data-pane="files"] > .assets-tree-pane {
  flex: 0 0 auto; max-height: 30%;   /* shrink 0 → dlouhý náhled ho nestlačí */
}
.tab-pane[data-pane="files"] > .assets-preview-pane {
  flex: 1 1 0; min-height: 0;        /* basis 0 → obsah nediktuje rozdělení */
}
.tab-pane[data-pane="inbox"],
.tab-pane[data-pane="history"] {
  grid-template-rows: auto 1fr;
}
.tab-pane[data-pane="tasks"] {
  grid-template-rows: 1fr;
}

/* Detached placeholder shown inside a tab pane when its content lives
 * in a separate window. Hides all siblings and centers the message. */
.detached-placeholder { display: none; }
.tab-pane.detached-here {
  grid-template-rows: 1fr !important;
}
.tab-pane.detached-here > *:not(.detached-placeholder) {
  display: none !important;
}
.tab-pane.detached-here > .detached-placeholder {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  color: #888;
  font-size: 13px;
  padding: 30px;
  text-align: center;
}
.tab-pane.detached-here > .detached-placeholder p { margin: 0; }

.assets-tree-pane, .assets-preview-pane,
.tasks-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.tasks-screen { height: 100%; }
.assets-preview-pane { border-top: 1px solid #2a2a2a; }
#task-detail-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* „▶ Začni pracovat" je MOBILE-ONLY: na desktopu ho nahrazuje idle nabídka
   (Resume / Nová) v okně session, kterou otevře focusTaskSession() při openDetail.
   Na mobilu je idle okno schované pod panelem s detailem, takže explicitní
   tlačítko v hlavičce zůstává jediná cesta, jak task rozjet. [hidden]
   (globální !important) dál řeší stav „není otevřený reálný task". */
#task-work-btn {
  display: none;
  padding: 2px 9px !important;
  font-size: 12px;
  line-height: 1.3;
}

/* Download odkaz / copy tlačítko nad náhledem souboru (files tab i task detail) */
.dl-btn {
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  color: #b89440;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.dl-btn:hover { background: #3a3a3a; }
/* Sdílená file-viewer komponenta (files tab i task detail) */
.file-viewer { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.fv-bar {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px;
  background: #161616; border-bottom: 1px solid #2a2a2a; flex: 0 0 auto;
}
.fv-name {
  flex: 1; min-width: 0; font-family: 'SF Mono', monospace; font-size: 11px;
  color: #aaa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* min-width:0 = flex item se smí zmenšit pod šířku nezalomitelného názvu
     (jinak roztáhne lištu). direction:rtl posune ellipsis na začátek →
     dlouhý název se oříznul zleva, viditelný zůstane konec (jméno souboru). */
  direction: rtl; text-align: left;
}
.fv-toggles { display: flex; gap: 4px; }
.fv-toggles button {
  background: transparent; border: 1px solid #3a3a3a; color: #888;
  padding: 2px 8px; border-radius: 4px; font-size: 10px; cursor: pointer;
}
.fv-toggles button.active { background: #2a2419; border-color: #b89440; color: #b89440; }
.fv-content {
  flex: 1 1 0; overflow: auto; padding: 12px 16px;
  font-size: 12px; line-height: 1.5; color: #c8c8c8; min-height: 0;
}

.assets-header {
  padding: 6px 12px;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: #b89440;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.assets-header button {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 3px;
}
.assets-header button:hover { background: #2a2a2a; color: #ccc; }
.header-actions { display: flex; gap: 4px; align-items: center; }
/* Asset tree */
#assets-tree {
  overflow-y: auto;
  padding: 6px 4px;
  font-size: 12px;
  font-family: 'SF Mono', monospace;
  flex: 1;
}
/* Strom souborů (.tree-node/.tree-node-row/.twig/.label/.diff-stats/…) —
   přesunuto do scoped <style> FileTree.svelte (řádky kreslí child TreeNode,
   proto :global). #assets-tree výše je hostitelský obal (layout panelu), ten
   zůstává. Mrtvá .collapsed/.indent pravidla (výstup odstraněného vanilla
   renderTree) zahozena. */

/* Preview */
.preview-empty { display: flex; align-items: center; justify-content: center; color: #555; }
/* Rendered markdown (.preview-markdown h1/code/pre/a/table/… + .code-block /
   .code-copy-btn + .kancl-ref / embedy) — přesunuto do scoped <style>
   MarkdownView.svelte, jediného vlastníka .preview-markdown (files/task náhled,
   wiki i vanilla agent-docs/help mountují tuhle komponentu). */
.preview-raw { font-family: 'SF Mono', monospace; font-size: 11px; white-space: pre-wrap; word-break: break-word; color: #c8c8c8; }
/* .preview-image → ImageView · .preview-video → VideoView · .preview-pdf → PdfView
   · .preview-csv → CsvView — přesunuto do scoped <style> těch komponent. */

/* Rozbalovaci obarveny strom — sdileny JSON + YAML (Tree.svelte). Kazdy uzel
   je radek, odsazeny podle hloubky pres --d. Obarveni listu podle typu. */
.preview-tree {
  font-family: 'SF Mono', monospace; font-size: 11.5px; line-height: 1.55;
  color: #c8c8c8; overflow-x: auto;
}
/* Uzly (.tree-*) → přesunuty do scoped <style> Tree.svelte (renderuje je
   rekurzivně). Wrapper .preview-tree výše (font/layout) zůstává globální,
   protože ho poskytují JsonView + YamlView kolem <Tree>. */

/* Shell skripty (ShView.svelte) — styly přesunuty do scoped <style> komponenty. */

/* Git diff (unified) — styly (.preview-diff / .diff-* / .diff-header / .diff-sha)
   přesunuty do scoped <style> DiffView.svelte, která diff renderuje (agent-docs
   ji mountuje, FileHistory ji používá pro patche). FileHistory má navíc vlastní
   scoped .diff-sha pro hlavičku záznamu. */

/* File history (mód „Diff") — styly (.file-history, .fh-*, .diff-sha) ve scoped
   <style> FileHistory.svelte; patch každého záznamu kreslí <DiffView>. */

/* Pozn.: starý seznam úkolů pracoviště (#tasks-pane-list + .tasks-*-filter*)
   i jeho CSS byly odstraněny — seznam žije v navigátoru (Navigator.svelte se
   scoped styly). Zůstává jen detail úkolu (níž). */

/* Host pro Svelte komponentu TaskDetail (Split: anotace nahoře + strom/náhled
   dole). Vyplní zbytek detail screenu pod hlavičkou tabu. */
.task-detail-host {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.task-detail-body {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.task-tree-pane {
  flex: 0 0 auto; max-height: 30%;   /* shrink 0 → dlouhý náhled ho nestlačí */
  overflow: auto; padding: 6px 4px;
  border-bottom: 1px solid #2a2a2a;
  font-family: 'SF Mono', monospace; font-size: 12px;
}
.task-preview-pane {
  flex: 1 1 0; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.md-frontmatter {
  display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px;
  margin: 0 0 14px; padding: 8px 10px; background: #141414;
  border: 1px solid #242424; border-radius: 4px; font-size: 11px;
}
.md-frontmatter dt { color: #888; }
.md-frontmatter dd { margin: 0; color: #b89440; }

/* Task-detail meta/relace (.task-meta, .meta-*, .task-rel-*, .task-history,
   .task-annotation, .run-detail, .task-meta-derived*) → scoped <style>
   TaskDetail.svelte (:global, protože je renderuje i child TaskHeader). */

/* .task-blocked-badge zůstává tady: kromě TaskDetail/TaskHeader ho vykresluje
   i vanilla js/tasks-overview.js (statický HTML string v tabulce), takže ho
   nejde přesunout do scoped stylu jedné komponenty. */
.task-blocked-badge { flex: 0 0 auto; color: #f87171; font-size: 10px; font-weight: 600; }

/* Stav úkolu — ze stejného důvodu globálně: vykresluje ho komponenta
   <TaskStatus> i statusHtml() ve vanilla pohledech (dashboard, tabulka úkolů,
   task-refy v markdownu). Barvu a zvýraznění dodává inline styl z
   js/task-status.js, tady zůstává jen tvar. */
.task-status { color: var(--task-status-color, #9aa); }
.task-status.is-pill {
  font-size: 0.82em;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--task-status-color, #9aa) 16%, #1c1c1c);
}

/* Priorita a termín — stejný důvod pro globální třídu jako u .task-status:
   vykreslují je komponenty <TaskPriority>/<TaskDue> i *Html() ve vanilla
   pohledech. Barvu priority nese inline --task-meta-color z js/task-meta.js. */
.task-priority { color: var(--task-meta-color, inherit); }
.task-due.is-overdue { color: #ef4444; font-weight: 600; }


button.primary {
  background: #b89440 !important; color: #0c0c0c !important; font-weight: 600 !important;
  padding: 4px 12px !important; border-radius: 3px !important;
}
button.primary:hover { background: #c9a352 !important; }
button.primary:disabled { background: #555 !important; cursor: not-allowed; }


/* ─── Vertical tab strip ─── */
#tab-strip {
  background: #151515;
  border-left: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  gap: 2px;
}
.vtab {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 8px 0;
  margin: 0 4px;
  font-size: 18px;
  text-align: center;
  border-radius: 3px;
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vtab:hover { background: #1f1f1f; color: #c8c8c8; }
.vtab.active { background: #2a2419; color: #b89440; }
.vtab .badge-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #b89440;
  color: #0c0c0c;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
  display: none;
}
.vtab .badge-count.has-items { display: inline-block; }
.vtab-spacer { flex: 1; }

/* Detached tab indicator — when the tab content is in a separate window */
.vtab.detached {
  opacity: 0.5;
  position: relative;
}
.vtab.detached::after {
  content: '⤢';
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 9px;
  color: #b89440;
  background: #0c0c0c;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  line-height: 12px;
  text-align: center;
}

.vtab-floating {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  width: 30px;
  height: 30px;
  z-index: 10;
}

/* ─── Global tasks overview (alternative view) ─── */
/* Header + filtry (ViewHeader + `below` slot) žijí v TasksOverviewShell.svelte;
   tělo + tabulka níž zůstávají globální (ID-based / JS-injected řádky). */
#tasks-overview-body {
  overflow: auto;
  padding: 0 24px 24px;
}
#tasks-overview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#tasks-overview-table th {
  text-align: left;
  font-weight: 600;
  color: #888;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 6px;
  border-bottom: 1px solid #2a2a2a;
  position: sticky;
  top: 0;
  background: #0c0c0c;
}
#tasks-overview-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #1a1a1a;
  color: #c8c8c8;
}
#tasks-overview-table tr:hover td { background: #151515; }
#tasks-overview-table tr.task-row-clickable { cursor: pointer; }
/* Název úkolu je skutečný <a href> — <tr> odkaz být nemůže, takže ctrl+klik
   (nový tab) i „otevřít v nové kartě" visí na něm. Vyplní buňku, ať je cíl co
   největší, a nevypadá jako odkaz — řádek už klikací je. */
#tasks-overview-table .task-row-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
#tasks-overview-table .col-assignee { color: #b89440; }

/* ── Přepínače záložek (sdílené primitivum) ───────────────────────── */
/* .tab-switch i .view-switch používají session/history/tasks pohledy v `below`
   slotu hlavičky — proto zůstávají globální. Vlastní obsah History view
   (tabulka cron runs / funkcí) je scoped v HistoryPage.svelte. */
.tab-switch { display: flex; gap: 0; }
/* Záložky jsou buď <button> (přepínají jen lokální stav), nebo <a href> tam,
   kde má záložka vlastní routu — pak ctrl+klik otevře nový tab. Vizuálně stejné.
   Anchor varianta se adresuje přes `.tab-switch.is-links a`, ne přes
   `.tab-switch a` — ten selektor by (přes !important) přebil i `.view-switch a`,
   což je jiný, větší přepínač celých pohledů, který .tab-switch sdílí jako třídu. */
.tab-switch button,
.tab-switch.is-links a {
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  color: #888 !important;
  padding: 4px 14px !important;
  border-radius: 0 !important;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
}
.tab-switch button:first-child,
.tab-switch.is-links a:first-child { border-radius: 3px 0 0 3px !important; }
.tab-switch button:last-child,
.tab-switch.is-links a:last-child { border-radius: 0 3px 3px 0 !important; border-left: 0 !important; }
.tab-switch button.active,
.tab-switch.is-links a.active {
  background: #2a3a5a !important;
  color: #c8d8f0 !important;
  border-color: #3a4a6a !important;
}

/* View-switch = anchor-based tab strip přepínající celé pohledy (Historie ↔
   Sessions). Žije v hlavičce nad .filters. */
.view-switch { margin: 0 24px 14px; }
.view-switch a {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1a1a1a; border: 1px solid #2a2a2a; color: #999;
  padding: 6px 16px; font-size: 12px; text-decoration: none;
}
.view-switch a:first-child { border-radius: 4px 0 0 4px; }
.view-switch a:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
.view-switch a:hover { color: #ccc; background: #222; }
.view-switch a.active {
  background: #2a3a5a; color: #c8d8f0; border-color: #3a4a6a;
}
.view-switch .badge-count { margin-left: 2px; }

/* Odkaz na graf v hlavičce wiki (.wiki-graph-link + .wiki-header .overview-top
   override) — přesunuto do scoped <style> WikiBrowser.svelte, ta teď renderuje
   celou hlavičku wiki view. */

/* Tabulka History view (#history-body / #history-table / .history-row) odešla
   do scoped stylů HistoryPage.svelte. .mode-badge zůstává globální — badge módu
   kreslí i vanilla history-tab.js v per-workspace historii. */
.mode-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10px;
  background: #2a2a2a; color: #aaa; border: 1px solid #3a3a3a;
}
.mode-badge.mode-fresh { background: #2a3a2a; color: #8ec88e; border-color: #3a5a3a; }
.mode-badge.mode-live { background: #2a2f3a; color: #8eb0c8; border-color: #3a4a5a; }
.mode-badge.mode-script { background: #2a2a3a; color: #b09acc; border-color: #3a3a5a; }

/* ── Per-workspace history tab ─────────────────────────────────────── */
/* Tab-switch uvnitř .assets-header musí splývat s ostatními tab headery
   (inbox/files) — žádný border ani extra padding, jen subtle background
   pro active. Override globálního .tab-switch button stylu (ten je
   nastavený pro velký #history-header v overview view). */
.assets-header .tab-switch {
  display: inline-flex;
  gap: 2px;
}
.assets-header .tab-switch button {
  padding: 0 6px !important;
  font-size: 11px !important;
  line-height: 18px !important;
  height: 18px;
  border: 0 !important;
  background: transparent !important;
  color: #666 !important;
  border-radius: 3px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.assets-header .tab-switch button:hover { color: #aaa !important; background: #2a2a2a !important; }
.assets-header .tab-switch button.active {
  background: #2a3a5a !important;
  color: #c8d8f0 !important;
}
/* Output expand (stdout/stderr) — per-workspace tab + global view */
.output-toggle {
  padding: 2px 6px; font-size: 10px; border-radius: 3px; cursor: pointer;
  font-family: inherit; border: 1px solid #2a2a2a;
  background: #1a1a1a; color: #888;
}
.output-toggle:hover { background: #252525; color: #ccc; }
.output-block { padding: 6px 8px; background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 3px; margin-top: 6px; }
.output-block .output-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  color: #666; margin: 4px 0 2px;
}
.output-block pre {
  margin: 0 0 6px 0;
  padding: 6px 8px;
  background: #050505;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  font-family: 'SF Mono', monospace;
  font-size: 11px;
  line-height: 1.4;
  color: #c8c8c8;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.output-block .output-stderr pre { color: #e8a3a3; }
.output-row td { background: #0a0a0a !important; padding: 0 !important; }
.output-row .output-block { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }

.session-state-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.session-state-badge.state-working { background: #1c2a1c; color: #4ade80; }
.session-state-badge.state-idle    { background: #2a2419; color: #d99a3a; }
.session-state-badge.state-stopped { background: #2a1818; color: #f87171; }
.badge-count {
  display: none;
  margin-left: 4px;
  background: #2a2a2a;
  color: #c8c8c8;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 600;
}
.badge-count.has-items { display: inline-block; background: #b89440; color: #0c0c0c; }

.hint { color: #666; font-size: 11px; }

/* ── Dashboard (vstupní stránka kanclu, #/) ─────────────────────────── */
/* Celý dashboard (hlavička, karty, seznamy i řádky) žije v DashboardPage.svelte
   včetně svého CSS — globálně tu po něm nezůstalo nic. */

#brand-logo { user-select: none; }
/* Logo je <a href="#/"> (ctrl+klik → dashboard v novém tabu), vizuálně beze změny. */
#brand-logo a { color: inherit; text-decoration: none; cursor: pointer; }
#brand-logo:hover a { color: #d4a754; }

/* Mobilní layout dashboardu (grid pod sebe + scroll celého těla) přesunut do
   DashboardPage.svelte scoped @media. */

/* ─── Detached mode (in a separate window) ───
 * .detached       — present in both modes
 * .detached-panel — whole right column (with tab strip)
 * .detached-tab   — single tab only, strip is hidden
 */
body.detached #topbar { display: none; }
body.detached #sidebar { display: none; }
body.detached #app {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "main";
}
body.detached #workspace-header,
body.detached #terminal-wrap { display: none; }
body.detached #btn-collapse-right,
body.detached #btn-detach-panel,
body.detached .detach-tab-btn { display: none; }
body.detached #right-column { display: grid !important; }
body.detached #tasks-overview { display: none; }
body.detached #dashboard { display: none; }
body.detached #main { grid-template-rows: 1fr; }

body.detached-panel #mid-panel { grid-template-columns: 1fr 36px; }
body.detached-panel #tab-strip { display: flex !important; }

body.detached-tab #mid-panel { grid-template-columns: 1fr; }
body.detached-tab #tab-strip { display: none; }

/* Safe area v detached okně. #topbar ani #workspace-header tu nejsou, takže
   horní hranu viewportu drží #mid-panel (uvnitř buď #task-header-bar, nebo
   rovnou #right-column) — inset patří jemu, ne jeho obsahu. */
body.detached #mid-panel { padding-top: var(--sai-top); }
/* detached-tab navíc schovává i #tab-strip (ten inset jinak nese sám), takže
   spodní hranu drží zase #mid-panel. V detached-panel režimu strip zůstává. */
body.detached-tab #mid-panel { padding-bottom: var(--sai-bottom); }

/* ─── Hamburger (mobile only) ─── */
.hamburger {
  display: none;
  width: 34px;
  height: 34px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 7px 7px;
  background: transparent;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #c8c8c8;
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Sidebar drawer overlay (mobile only) ─── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 900;
}
.sidebar-overlay.open { display: block; }

/* Mobile-only tab — desktop ho schovává */
.vtab-mobile-only { display: none; }

/* Keys-bar defaultně skrytý (i na desktopu, kde nemá smysl). Na mobile
   se zobrazí když je body.keys-bar-open. Tu třídu NEDRŽÍ nikdo ručně — je
   to odvozený efekt storu (MidPanel.svelte × keys-bar.js): přání uživatele
   ∧ „session je vidět". Odskok na panel/navigátor bar schová, návrat vrátí. */
#keys-bar { display: none; }

/* ─── Responsive: tablet + mobile ─── */
@media (max-width: 768px), (pointer: coarse) {
  /* Ukotvení shellu — dokument sám nesmí mít kam scrollovat. Bez toho iOS Safari
     při fokusu do pole odscrolluje layout viewport, aby dostal caret nad
     klávesnici; `--app-h` se ale zmenší až o frame později, takže se prostor po
     klávesnici odečte dvakrát (raz scrollem, raz zmenšením shellu) — hlavička
     vyleze nad horní hranu, pod composerem zůstane prázdná plocha a scroll se
     sám nikdy nevrátí. Samotné `overflow: hidden` na body WebKit ignoruje,
     poslechne až `position: fixed`.

     ZÁMĚRNĚ bez `transform` na body: ten by z něj udělal containing block pro
     `position: fixed` potomky a odlepil od viewportu drawer (#sidebar),
     overlaye, Dialog i MediaLightbox. */
  html, body { overflow: hidden; }
  body {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--app-h, 100vh);
  }

  /* App grid → jeden sloupec: lišta nad obsahem (sidebar je drawer overlay). */
  #app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }

  /* Mobil: #workspace-header (název pracoviště + hamburger) zůstává nahoře VŽDY —
     v pickeru, task i main pohledu (jeden zdroj názvu). Navigátor NENÍ fullscreen
     overlay přes header, ale sedí v „mid" gridové oblasti POD hlavičkou (overlapuje
     jen mid-panel, ne header). Host je gridová položka jen když je picker otevřený. */
  body.ws-active #main {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header" "mid";
  }
  body.ws-active #workspace-header { grid-area: header; }
  body.ws-active #mid-panel { grid-area: mid; }
  body.ws-active #navigator-host { display: none; }
  /* min-height:0 zláme grid min-height:auto (jinak se host roztáhne na výšku
     obsahu a vnitřní .nav-scroll nescrolluje); overflow:hidden ho drží ve stopě. */
  /* Navigátor (picker) překrývá celou „mid" oblast VČETNĚ tab-stripu (z-index
     40 > 10), takže se v nav-open dotýká spodní i bočních hran viewportu sám —
     inset tedy patří jemu, ne stripu pod ním. */
  body.ws-active.nav-open #navigator-host {
    display: block; grid-area: mid; z-index: 40; min-height: 0; overflow: hidden;
    padding: 0 var(--sai-right) var(--sai-bottom) var(--sai-left);
  }

  /* Sidebar drawer — plná výška overlay (přes lištu i obsah). Je fixed přes
     všechny hrany kromě pravé → drží horní, spodní i levý inset sám. */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: var(--sai-top) 0 var(--sai-bottom) var(--sai-left);
    width: 280px;
    max-width: 85vw;
    z-index: 950;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  }
  #sidebar.open { transform: translateX(0); }

  /* Search box na úzké liště přes celou šířku → v GlobalSearch.svelte (scoped). */
  /* Účet šetří místo — jméno schované, zůstává jen odhlásit + presence avatary. */
  #topbar { gap: 8px; }
  .topbar-right { gap: 8px; }
  .account-chip .account-user { display: none; }

  /* Hamburger viditelný */
  .hamburger { display: flex; }

  /* Workspace header kompaktnější */
  #workspace-header {
    padding: 5px max(12px, var(--sai-right)) 5px max(12px, var(--sai-left));
    gap: 8px;
  }
  #workspace-header .ws-title-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  #workspace-header h2 {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #workspace-header p { display: none; }
  #workspace-header #btn-kill { padding: 4px 8px; font-size: 10px; }

  /* „▶ Začni pracovat" na mobilu nechceme — task se rozjede přes Session tab
     (idle nabídka Resume/Nová v terminálu). Zůstává skryté (base #task-work-btn). */

  /* Mid-panel: terminál nahoře, volitelný keys-bar uprostřed, bottom
     tab bar dole. Right-column se overlayuje přes terminál když je
     vybraný non-terminal tab. */
  /* Výška spodní lišty s taby. Je na :root (ne na #mid-panelu, kde bydlela),
     protože ji potřebuje i FabDock — ten se mountuje na <body>, kam by z
     #mid-panelu nedotekla a musel by si fallback držet zvlášť.
     Spodní safe-area inset je součástí té výšky: strip je nejspodnější prvek
     mobilního shellu, takže o inset roste ON a všechny kotvy na něj
     (#right-column bottom, grid rows, FabDock) se posunou samy. */
  :root { --tab-strip-h: calc(38px + var(--sai-bottom)); }

  #mid-panel {
    display: grid;                 /* desktop má block; na mobilu zpět grid */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto var(--tab-strip-h);
    gap: 0;
    position: relative;
    transition: none;
  }
  /* Zploští MidPanel wrappery, ať #mid-panel grid vidí listy (terminal-wrap,
     right-column, tab-strip) jako svoje položky a uplatní na ně mobilní
     grid-row/overlay pravidla beze změny. Vlastní .mp-* třídy → nezasáhne
     Splity uvnitř panelů. */
  .mp-inner, .mp-split, .mp-pane, .mp-sidebar, .mp-panel-host { display: contents; }
  .mp-resizer { display: none; }   /* tažítko jen na desktopu */
  #mid-panel.collapsed { grid-template-columns: 1fr; }
  #mid-panel.collapsed #right-column { display: none; }

  #terminal-wrap {
    grid-row: 1;
    grid-column: 1;
    min-height: 0;
    /* Hlavní obsahová plocha jde od hrany k hraně → v landscape s notchem by
       xterm psal pod zaoblení. Podklad zůstává full-bleed, uhne jen obsah
       (FitAddon si přeměří přes ResizeObserver sám). */
    padding-left: var(--sai-left);
    padding-right: var(--sai-right);
  }

  /* Mobile keys bar: zobrazi se pres body.keys-bar-open. Sedi mezi
     terminalem a bottom tab strip — tlaci terminal nahoru.
     Pozor: pri otevrene OS klavesnici uz je viewport male, takze
     keys bar musi byt **kompaktni** — jinak prekryje klavesnici
     nebo nas vystrci terminal mimo viditelnou oblast. */
  #keys-bar {
    grid-row: 2;
    grid-column: 1;
    display: none;
    flex-wrap: wrap;
    gap: 3px;
    /* Sedí nad tab-stripem → spodní inset nemá (nese ho strip), boční ano. */
    padding: 4px max(4px, var(--sai-right)) 4px max(4px, var(--sai-left));
    background: #131313;
    border-top: 1px solid #2a2a2a;
    z-index: 8;
  }
  body.keys-bar-open #keys-bar { display: flex; }
  .key-btn {
    flex: 1 0 calc(16.6667% - 3px);
    min-height: 30px;
    padding: 3px 2px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #c8c8c8;
    font-family: 'SF Mono', 'JetBrains Mono', Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .key-btn:active {
    background: #2a2419;
    border-color: #b89440;
    color: #b89440;
  }

  /* Right column jako overlay nad terminálem (a nad keys-barem, ktery
     se zobrazi mezi terminalem a tab-stripem). Bottom = --tab-strip-h
     + ev. keys-bar height; pri keys-bar-open zvedneme spodek. */
  #right-column {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--tab-strip-h);
    z-index: 5;
    display: none;
    background: #0f0f0f;
    /* Spodní hranu drží tab-strip (viz `bottom` výš), boční hrany ale panel
       sám → boční insety patří sem. */
    padding-left: var(--sai-left);
    padding-right: var(--sai-right);
  }
  body.mobile-show-panel #right-column { display: grid !important; }
  body.keys-bar-open #right-column { bottom: calc(var(--tab-strip-h) + var(--keys-bar-h, 96px)); }

  /* Když je přes terminál překrytý panel (Konverzace/Soubory), schovej FABy
     Stop/Reset/Owner — patří k Session pohledu, ne nad panel. Jsou
     position:absolute s vyšším z-indexem, takže by jinak prosvítaly.
     (Klávesnice/upload/keys bydlí ve FabDocku a schovají se s ním.) */
  body.mobile-show-panel #terminal-fabs { display: none !important; }

  /* Ze stejného důvodu schovej resume overlay („Probouzím session…"). Žije
     uvnitř #terminal-wrap (session-overlay.js) s z-index 30, takže by přebil
     #right-column (z-index 5) a hláška by se vykreslila přes soubory úkolu
     i konverzaci. Skrýváme JEN vizuál — blokace vstupu do PTY (setInputBlocked
     v session-overlay.js) běží dál, dokud injektovaný prompt neprojde.
     Pozn.: `isolation: isolate` na #terminal-wrap by to řešilo systémověji, ale
     zavřelo by do stacking contextu i PromptComposer (position: fixed,
     z-index 10001, renderuje se uvnitř .terminal-shell) — ten by pak propadl
     pod FabDock. Navigátor tohle pravidlo nepotřebuje: #navigator-host má
     z-index 40, takže overlay překryje sám. */
  body.mobile-show-panel #resume-overlay { display: none; }

  /* Mobil task-mode (otevřený úkol): task hlavička (#task-header-bar) je první
     řádek gridu (nad plochou), stejně jako #session-header pro main/úpravu.
     Terminál/keys/tab-strip se posunou dolů; panel overlay začíná pod hlavičkou.
     Díky vyčleněné hlavičce je Session tab jen terminál (žádný sliver z panelu). */
  body.task-open #mid-panel {
    grid-template-rows: auto 1fr auto var(--tab-strip-h);
  }
  body.task-open #task-header-bar { grid-row: 1; grid-column: 1; z-index: 12; }
  /* ← zpět na task picker (navigátor overlay) — na mobilu viditelné. */
  #task-header-back {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 30px; height: 30px; padding: 0; margin: 0;
    background: #232323; border: 1px solid #333; border-radius: 6px;
    color: #ccc; font-size: 17px; line-height: 1; cursor: pointer;
  }
  #task-header-back:active { background: #2a2419; border-color: #b89440; color: #b89440; }
  body.task-open #terminal-wrap { grid-row: 2; }
  body.task-open #keys-bar { grid-row: 3; }
  body.task-open #tab-strip { grid-row: 4; }
  /* Session tab (panel „zavřený") → jen terminál pod hlavičkou, detail skrytý. */
  body.task-open:not(.mobile-show-panel) #right-column { display: none; }
  /* Konverzace/Soubory → panel overlay pod task hlavičkou. */
  body.task-open.mobile-show-panel #right-column {
    display: grid !important; top: var(--task-hdr-h, 42px);
  }

  /* Mobilní lišta main/úpravy (#session-header): ← + titulek nad plochou. Když je
     aktivní main/úprava (body.session-view), přidá se do #mid-panel gridu jako
     první řádek a posune terminál/keys/tab-strip dolů; panel overlay začíná pod ní. */
  #session-header {
    grid-row: 1; grid-column: 1;
    display: none; align-items: center; gap: 8px;
    height: 40px; padding: 0 max(8px, var(--sai-right)) 0 max(8px, var(--sai-left));
    background: #1a1a1a; border-bottom: 1px solid #2a2a2a; z-index: 12;
  }
  body.session-view:not(.task-open) #session-header { display: flex; }
  #session-header #session-header-back {
    display: flex; align-items: center; justify-content: center;   /* base ho skrývá → na mobilu zpět */
    flex: 0 0 auto; width: 30px; height: 30px; padding: 0; margin: 0;
    background: #232323; border: 1px solid #333; border-radius: 6px;
    color: #ccc; font-size: 17px; line-height: 1; cursor: pointer;
  }
  #session-header #session-header-back:active { background: #2a2419; border-color: #b89440; color: #b89440; }
  #session-header #session-header-title {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; font-weight: 600; color: #b89440;
  }
  body.session-view:not(.task-open) #mid-panel {
    grid-template-rows: 40px 1fr auto var(--tab-strip-h);
  }
  body.session-view:not(.task-open) #terminal-wrap { grid-row: 2; }
  body.session-view:not(.task-open) #keys-bar { grid-row: 3; }
  body.session-view:not(.task-open) #tab-strip { grid-row: 4; }
  body.session-view:not(.task-open) #right-column { top: 40px; }

  /* Tab strip → horizontal bottom bar (row 3, pod keys-barem). Je nejspodnější
     prvek shellu: `--tab-strip-h` už spodní inset obsahuje, takže ho tady jen
     přidáme do padding-bottom (3px + inset) — obsah tak zůstane ve stejných
     31 px jako dřív a ikony nesedí na home indicatoru. */
  #tab-strip {
    grid-row: 3;
    grid-column: 1;
    flex-direction: row;
    border-left: none;
    border-top: 1px solid #2a2a2a;
    padding: 3px max(4px, var(--sai-right)) calc(3px + var(--sai-bottom)) max(4px, var(--sai-left));
    gap: 2px;
    background: #131313;
    z-index: 10;
    height: var(--tab-strip-h);
  }
  .vtab {
    flex: 1;
    height: 100%;
    margin: 0;
    font-size: 17px;
    padding: 2px 0;
  }
  .vtab-spacer { display: none; }
  .vtab-mobile-only { display: flex; }
  /* Skrýt desktop-only ovladače v bottom baru, ať tabs zaberou plnou šíři */
  #btn-detach-panel, #btn-reattach-panel, #btn-collapse-right { display: none; }
  /* Pozn.: task-mode trojice (Session/Konverzace/Soubory) má styly ve scoped
     <style> v TabStrip.svelte; skrytí vnitřního tabstripu detailu v TaskDetail.svelte. */

  .vtab .badge-count {
    top: 0;
    right: 10%;
    font-size: 10px;
    padding: 1px 5px;
  }

  /* Když je viditelný terminál (panel skrytý), zvýrazni Terminál tab.
     Když je viditelný panel, "Terminál" tab se zhasne. */
  body:not(.mobile-show-panel) .vtab[data-tab="terminal"] {
    background: #2a2419;
    color: #b89440;
  }

  /* Files: dej náhledu víc místa */
  .tab-pane[data-pane="files"] > .assets-tree-pane { max-height: 38%; }

  /* Pozn.: „jeden souvislý scroll" detailu úkolu (metadata + strom + náhled
     scrollují společně) býval mobilní specialita a bydlel tady. Dnes je to
     chování i na desktopu a řídí ho .td-scroll.flat ve scoped <style>
     TaskDetail.svelte — včetně výjimky pro záložku Konverzace (chat: bounded
     layout, compose box zůstává dole). */

  /* Overview pages — header column, tabulky horizontálně scrollovat.
     .overview-top drží hamburger + title na jednom řádku, filters jdou pod tím. */
  #tasks-overview-header,
  #sessions-overview-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .overview-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .overview-top > div {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .overview-top > div .hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #tasks-overview-header h2,
  #sessions-overview-header h2 { font-size: 14px; }
  #tasks-overview-header .filters,
  #sessions-overview-header .filters {
    flex-wrap: wrap;
    gap: 8px;
  }
  #tasks-overview-header .filters label,
  #sessions-overview-header .filters label { font-size: 11px; }

  #tasks-overview-body,
  #sessions-overview-body {
    padding: 0 14px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #tasks-overview-table,
  #sessions-overview-table {
    min-width: 720px;
  }

  /* Detached-mode okno na mobile: vyklopený panel je hlavní obsah —
     vrať ho do gridu místo overlay-nad-terminálem, schovej hamburger. */
  body.detached .hamburger { display: none; }
  body.detached #sidebar-overlay { display: none !important; }
  body.detached #right-column {
    position: static;
    display: grid !important;
    bottom: auto;
    z-index: auto;
    grid-row: 1;
    grid-column: 1;
  }
  body.detached #mid-panel {
    grid-template-rows: 1fr;
  }
  body.detached-panel #mid-panel {
    grid-template-rows: 1fr var(--tab-strip-h);
  }
}

/* ─── Telefon nebo úzký landscape ─── */
@media (max-width: 480px) {
  #workspace-header { padding: 4px max(10px, var(--sai-right)) 4px max(10px, var(--sai-left)); gap: 8px; }
  #workspace-header h2 { font-size: 12px; }
  #workspace-header #ws-actions { gap: 4px; }
  #workspace-header #ws-actions .badge {
    padding: 2px 6px;
    font-size: 9px;
  }

  #sidebar { width: 260px; }
  .vtab { font-size: 22px; }

  #tasks-overview-body,
  #sessions-overview-body { padding: 0 10px 10px; }
  #tasks-overview-header,
  #sessions-overview-header { padding: 10px; }
}

/* Touch screens: iOS Safari při fokusu auto-zoomne stránku na každé pole, které
   má font-size < 16px — a ze zoomu se sám nevrátí (rozhodí i sync `--app-h`
   s visualViewportem v mobile.js, takže se doky pak nezvednou nad klávesnici).
   16px na dotykových zařízeních to vypíná.

   `!important` je tu schválně: pravidlo je jednoduchý element selektor a KAŽDÝ
   scoped `.neco textarea { font-size: 13px }` (i `font: inherit`) v komponentě
   ho přebije specificitou — přesně to se dělo a zoom se vracel s každým novým
   polem. Tohle je jediné místo, kde se pravidlo drží; komponenty svoje desktopové
   velikosti psát můžou, na doteku je přemaže tenhle blok.

   `pointer: coarse` (ne max-width) — zoomuje i iPad v šířce desktop layoutu.
   Netextová pole vyjmuta: u checkboxu/radia/rangu/color se od font-size odvozuje
   velikost widgetu, a zoom u nich stejně nenastává. */
@media (pointer: coarse) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']),
  select,
  textarea { font-size: 16px !important; }
}


/* ─── Wiki view ───
   Celý obsah (header + breadcrumb + strom/náhled/meta layout) renderuje
   WikiBrowser.svelte a i CSS (#wiki-header, .wiki-breadcrumb, #wiki-body,
   .wiki-graph-link, #wiki-tree-pane, #wiki-viewer-pane, #wiki-meta-pane
   a jejich media-query varianty) je scoped v ní. */

/* Kancl-refy ([[ws:…]]/[[task:…]] pill), ![[obrázek]] embedy i inline SVG
   embedy uvnitř .preview-markdown — přesunuto do scoped <style>
   MarkdownView.svelte (viz výše, jediný vlastník .preview-markdown). */

/* #wiki-meta (obsah meta-panelu: meta-section/-row/-key/-val, meta-links,
   ext-link, link-count + jeho .wiki-link varianta) → scoped v MetaPanel.svelte. */

/* ─── Účet + invite (auth) ─── */
/* Účtový řádek (jméno + odhlásit) žije v #topbaru — jeho layout je v sekci
   „Globální horní lišta" výše (.account-chip). Presence rail vedle něj si nese
   styl vlastní komponenta (PresenceRail.svelte). */

/* Chrome okna (scrim, panel, hlavička, ✕) žije v components/ui/Dialog.svelte
   (scoped). Tady zůstává jen styl OBSAHU dialogů — formuláře, hinty, seznamy. */
.invite-hint { color: #8a8a8a; font-size: 12px; margin: 0 0 16px; line-height: 1.5; }
.invite-form { display: flex; flex-direction: column; gap: 8px; }
.invite-form input,
.invite-form select,
.invite-link-out {
  background: #0e0e0e;
  border: 1px solid #2a2a2a;
  color: #d8d8d8;
  padding: 9px 11px;
  border-radius: 5px;
  font-size: 13px;
  width: 100%;
}
.invite-form input:focus,
.invite-form select:focus { outline: none; border-color: #b89440; }
.primary {
  background: #b89440;
  border: 0;
  color: #15140f;
  font-weight: 600;
  cursor: pointer;
}
.primary:hover { background: #c9a44e; }
.invite-result {
  display: flex;
  gap: 6px;
  margin: 14px 0 6px;
}
.invite-link-out { flex: 1; font-family: monospace; font-size: 12px; }
.invite-copy {
  background: #1f1f1f;
  border: 1px solid #3a3a3a;
  color: #d8d8d8;
  border-radius: 5px;
  padding: 0 12px;
  cursor: pointer;
  white-space: nowrap;
}
.invite-list { list-style: none; margin: 14px 0 0; padding: 0; }
.invite-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-top: 1px solid #222;
  font-size: 12px;
}
.invite-item-label { flex: 1; color: #c8c8c8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-item-status { color: #7a7a7a; font-size: 11px; }
.invite-used .invite-item-label,
.invite-expired .invite-item-label { color: #6a6a6a; }
.invite-revoke {
  background: transparent;
  border: 1px solid #5a2a2a;
  color: #c87070;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}
.invite-revoke:hover { background: #2a1515; }
.invite-revoked .invite-item-label { color: #6a6a6a; }

/* ─── Task edit modal (ruční úprava úkolu) ──────────────────────── */
/* Spouštěč ✎ v hlavičce detailu úkolu. */
.task-edit-btn {
  background: #1f1f1f;
  border: 1px solid #3a3a3a;
  color: #d8d8d8;
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 13px;
  cursor: pointer;
}
.task-edit-btn:hover { background: #2a2a2a; border-color: #4a4a4a; }
/* Pole jako řádky „popisek vlevo, ovládací prvek vpravo". */
.task-edit-field {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 10px;
}
.task-edit-field > span { color: #9a9a9a; font-size: 12px; }
.task-edit-error { color: #d88; font-size: 12px; margin: 12px 0 0; }
.task-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.task-edit-actions button {
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}
.task-edit-actions .te-cancel {
  background: #1f1f1f;
  border: 1px solid #3a3a3a;
  color: #d8d8d8;
}
.task-edit-actions .te-cancel:hover { background: #2a2a2a; }
.task-edit-actions .te-save { border: 0; padding: 8px 18px; }

/* ─── Settings view (Nastavení) ─────────────────────────────────── */
/* Obsah Nastavení i Repos (header + karty) žije v SettingsPage.svelte /
   ReposPage.svelte (ViewHeader + Panel), kostru pohledu drží `main[data-view]`
   výš. `.mirror-*` odešlo do ReposPage.svelte spolu s celou mirror sekcí.
   Globálně tu zůstávají `.settings-repo*` — tutéž kostru karty kreslí
   ReposPage.svelte i BlueprintsPanel.svelte (dvě nezávislá místa), takže je to
   sdílené primitivum, ne dluh jedné komponenty. */
/* per-session kontext v přehledu sessions */
.usage-ctx { font-variant-numeric: tabular-nums; color: #cfcfcf; }
.usage-ctx.pred-warn { color: #d29922; }
.usage-ctx.pred-over { color: #f85149; }

.settings-repo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #1c1c1c;
}
.settings-repo:last-child { border-bottom: none; }
.settings-repo-main { min-width: 0; flex: 1; }
.settings-repo-title { font-size: 13px; color: #e5e5e5; font-weight: 600; margin-bottom: 4px; }
.settings-repo-status { font-size: 12px; color: #aaa; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.settings-repo-status code {
  background: #1d1d1d; border: 1px solid #2a2a2a; border-radius: 3px;
  padding: 1px 5px; font-size: 11px; color: #c8c8c8;
}
.settings-subject { margin-top: 4px; font-size: 11px; }
.settings-repo-path { margin-top: 4px; font-size: 11px; word-break: break-all; }
.settings-pull-result { margin-top: 6px; font-size: 12px; word-break: break-word; }
.settings-repo-actions { flex-shrink: 0; }
.settings-pull-btn {
  background: #2563eb; border: 1px solid #2563eb; color: #fff;
  padding: 5px 16px; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.settings-pull-btn:hover:not(:disabled) { background: #1d4ed8; }
.settings-pull-btn:disabled { opacity: 0.5; cursor: default; }

.settings-ok      { color: #4ade80; }
.settings-warn    { color: #f0a830; }
.settings-behind  { color: #60a5fa; }

/* Mirror repos (výběr + hromadný pull) jsou scoped v ReposPage.svelte. */

/* .settings-link zanikl — rozcestníkové odkazy jsou dlaždice v SettingsNav.svelte. */

/* ─── Mermaid diagramy (vykreslené z ```mermaid bloků) ─── */
.mermaid-figure {
  margin: 18px 0;
  padding: 16px;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  text-align: center;
  overflow-x: auto;
}
.mermaid-figure svg { max-width: 100%; height: auto; }
.mermaid-error {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #5a2a2a;
  border-radius: 6px;
  background: #1c1212;
  color: #d99;
}

/* ── Cena session: klikatelná buňka + modal s detailem nákladů ─────────── */
.usage-cost.clickable { cursor: pointer; }
.usage-cost.clickable:hover { text-decoration: underline; }
.usage-cost.pred-warn { color: #d29922; }
.usage-cost.pred-over { color: #f85149; }

/* ───────────────────────── Vkládání obrázku do session ─────────────────────
   Drop-hint nad terminálem + anotační editor (imageAnnotator.js). */

.terminal-shell { position: relative; }

.term-drop-hint {
  position: absolute; inset: 0; z-index: 40;
  display: none; align-items: center; justify-content: center; gap: 10px;
  background: rgba(12, 12, 12, 0.78);
  border: 2px dashed var(--c-accent);
  border-radius: 8px;
  color: var(--c-accent-hi); font-size: 16px; font-weight: 600;
  pointer-events: none;
}
.terminal-shell.term-dragover .term-drop-hint { display: flex; }
.term-drop-hint .material-symbols-rounded { font-size: 28px; }

/* Editor anotací */
/* `bottom` musi stat ZA `inset`, aby ho prebilo: s vytazenou klavesnici se
   centrovaci plocha zmensi na zbytek nad ni, takze spodni `.imgann-footer`
   zustane videt. Bez klavesnice je --kb-inset 0px = dnesni `inset: 0`. */
.imgann-root { position: fixed; inset: 0; bottom: var(--kb-inset, 0px); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.imgann-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.imgann-modal {
  position: relative; display: flex; flex-direction: column;
  /* 94 % z vysky .imgann-root (ta je definovana top/bottom, takze procento
     je resolvovatelne), ne 94vh — `vh` je large viewport a klavesnici se
     nezmensi. Bez klavesnice vychazi obojí stejne. */
  max-width: 96vw; max-height: 94%;
  background: var(--c-surface); border: 1px solid var(--c-border-2);
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); overflow: hidden;
}

.imgann-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 8px 12px; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border);
}
.imgann-group { display: flex; align-items: center; gap: 4px; }
.imgann-group + .imgann-group { padding-left: 14px; border-left: 1px solid var(--c-border); }

.imgann-tool, .imgann-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: var(--c-text); cursor: pointer;
}
.imgann-tool:hover, .imgann-act:hover { background: var(--c-surface-hi); color: var(--c-text-strong); }
.imgann-tool.active { background: var(--c-accent-bg); border-color: var(--c-accent); color: var(--c-accent-hi); }
.imgann-tool .material-symbols-rounded, .imgann-act .material-symbols-rounded { font-size: 20px; }

.imgann-color {
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  background: var(--sw); border: 2px solid var(--c-border-2); cursor: pointer;
}
.imgann-color.active { border-color: var(--c-accent-hi); box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent); }

.imgann-width {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.imgann-width:hover { background: var(--c-surface-hi); }
.imgann-width.active { background: var(--c-accent-bg); border-color: var(--c-accent); }
.imgann-width span { display: block; width: 18px; background: var(--c-text-strong); border-radius: 2px; }

.imgann-stage {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 14px; overflow: auto; background: var(--c-bg);
}
.imgann-stage .canvas-container { box-shadow: 0 0 0 1px var(--c-border-2); }

.imgann-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--c-surface-2); border-top: 1px solid var(--c-border);
}
.imgann-label {
  font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
  background: var(--c-accent-bg); border: 1px solid var(--c-accent); color: var(--c-accent-hi);
  white-space: nowrap;
}
.imgann-status { color: var(--c-text-dim); font-size: 13px; }
.imgann-status kbd {
  font: inherit; font-size: 11px; padding: 1px 5px; border-radius: 4px;
  background: var(--c-surface-hi); border: 1px solid var(--c-border-2); color: var(--c-text);
}
.imgann-spacer { flex: 1; }
.imgann-btn {
  padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer;
  background: var(--c-surface-3); border: 1px solid var(--c-border-2); color: var(--c-text);
}
.imgann-btn:hover { background: var(--c-surface-hi); color: var(--c-text-strong); }
.imgann-primary { background: var(--c-accent); border-color: var(--c-accent); color: #1a1408; font-weight: 600; }
.imgann-primary:hover { background: var(--c-accent-hi); color: #1a1408; }
.imgann-primary:disabled { opacity: 0.5; cursor: default; }

/* Notifikace (zvonek + dropdown) → přesunuto do scoped stylů
   components/notifications/NotificationBell.svelte */