/* =================================================================
   DON FUEGO — Personal AI Operating System for Raul del Fuego
   HUD aesthetic: DR purple + fire orange + matrix green
   (prototyp verbatim + LIVE WIRING ADDITIONS na konci)
   ================================================================= */

/* Fonty self-hosted (PERF mobil 15.10.2026): predtym render-blocking @import Google Fonts (CSS + 2 cudzie
   originy pred prvym vykreslenim). woff2 v /assets/fonts (immutable), latin + latin-ext, swap. */
/* Cinzel latin-ext */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/cinzel-400-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Cinzel latin */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/cinzel-400-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Inter latin-ext */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/inter-300-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Inter latin */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/inter-300-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* JetBrains Mono latin-ext */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/jetbrains-mono-300-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* JetBrains Mono latin */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/fonts/jetbrains-mono-300-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  background: #050309;
  color: #F5F0FF;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  overflow: hidden;
}

/* MOBIL / WebView (Capacitor): ziadny pull-to-refresh / scroll bounce (rusil by chat scroll)
   + ziadny sedy tap-flash na dotyk. Na desktope bez efektu (overflow:hidden / mys). */
html {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body { overscroll-behavior: none; }

:root {
  --df-void:        #050309;
  --df-bg:          #0D0618;
  --df-bg-1:        #14082A;
  --df-bg-2:        #1B0C36;
  --df-bg-3:        #240F47;
  --df-purple:      #753BBD;
  --df-purple-deep: #512D6D;
  --df-purple-mid:  #7C4FA6;
  --df-purple-soft: #C1A7E2;
  --df-lilac:       #C084FC;
  --df-fire:        #FF6B35;
  --df-ember:       #FFB627;
  --df-fire-soft:   rgba(255,107,53,0.18);
  --df-ember-soft:  rgba(255,182,39,0.18);
  --df-mx-green:    #00FF41;
  --df-mx-dim:      rgba(0,255,65,0.45);
  --df-red:         #FF3355;
  --df-cyan:        #6FE7FF;
  --df-text:        #F5F0FF;
  --df-text-mid:    rgba(245,240,255,0.62);
  --df-text-dim:    rgba(245,240,255,0.38);
  --df-text-faint:  rgba(245,240,255,0.18);
  --df-line:        rgba(193, 167, 226, 0.16);
  --df-line-strong: rgba(193, 167, 226, 0.32);
  --df-glow-purple: rgba(117, 59, 189, 0.4);
  --df-glow-fire:   rgba(255, 107, 53, 0.4);
  --f-display:  'Cinzel', serif;
  --f-mono:     'JetBrains Mono', ui-monospace, monospace;
  --f-sans:     'Inter', system-ui, sans-serif;
}

.df-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(117,59,189,0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 80%, rgba(255,107,53,0.10), transparent 60%),
    linear-gradient(180deg, #0D0618 0%, #050309 100%);
  overflow: hidden;
}
.df-stage::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(193,167,226,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193,167,226,0.03) 1px, transparent 1px);
  background-size: 40px 40px; pointer-events: none; z-index: 0;
}
.df-stage::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 50%, transparent 0%, transparent 60%, rgba(5,3,9,0.6) 100%),
    radial-gradient(circle at 80% 50%, transparent 0%, transparent 60%, rgba(5,3,9,0.6) 100%);
  pointer-events: none; z-index: 1;
}

.df-binary-rain {
  position: absolute; top: 0; bottom: 0; width: 60px;
  font-family: var(--f-mono); font-size: 10px; line-height: 1.4;
  color: rgba(0, 255, 65, 0.16); pointer-events: none; overflow: hidden;
  z-index: 2; user-select: none; text-align: center;
}
.df-binary-rain.left  { left: 0; }
.df-binary-rain.right { right: 0; }

.df-app {
  position: relative; z-index: 5; display: grid;
  grid-template-columns: 270px 1fr 320px;
  grid-template-rows: 50px 84px minmax(0, 1fr) 26px;
  grid-template-areas:
    "topbar topbar topbar"
    "strip  strip  strip"
    "left   center right"
    "status status status";
  height: 100vh; max-height: 100vh; gap: 0; padding: 0 12px; overflow: hidden;
}
.df-app > * { min-height: 0; min-width: 0; }

.df-topbar {
  grid-area: topbar; display: grid; grid-template-columns: 280px 1fr 320px;
  align-items: center; padding: 0 16px; height: 50px; overflow: hidden;
  border-bottom: 1px solid var(--df-line);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--df-text-mid);
  background: linear-gradient(180deg, rgba(117,59,189,0.08), transparent);
}
.df-topbar-left { display: flex; align-items: center; gap: 14px; }
.df-topbar-tag { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.24em; color: var(--df-text-dim); }
.df-topbar-status-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px;
  border: 1px solid var(--df-mx-dim); color: var(--df-mx-green);
  font-size: 10px; letter-spacing: 0.18em;
}
.df-topbar-status-pill .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--df-mx-green);
  box-shadow: 0 0 6px var(--df-mx-green); animation: live-pulse 1.8s infinite;
}
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.df-topbar-center { display: flex; align-items: center; justify-content: center; gap: 18px; }
.df-wordmark {
  font-family: var(--f-display); font-size: 22px; font-weight: 700; letter-spacing: 0.36em;
  color: var(--df-text); text-shadow: 0 0 12px rgba(255,107,53,0.55), 0 0 32px rgba(117,59,189,0.45);
}
.df-wordmark .fuego { color: var(--df-fire); }
.df-wordmark-sep { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--df-purple-soft), transparent); }
.df-topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-family: var(--f-mono); font-size: 10px; min-width: 0; }
/* pocasie: dlhe mesto ("Vranov nad Toplou...") nesmie rozbit topbar — orez s elipsou, detail v title */
.df-topbar-right #weather { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-topbar-tc {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.18em; color: var(--df-ember);
  font-weight: 600; border: 1px solid rgba(255,182,39,0.32); padding: 4px 10px; background: rgba(255,182,39,0.05);
}

.df-panel { position: relative; background: rgba(20, 8, 42, 0.55); border: 1px solid var(--df-line); backdrop-filter: blur(4px); }
.df-panel::before, .df-panel::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--df-purple-soft); pointer-events: none; }
.df-panel::before { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.df-panel::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.df-panel-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--df-line);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--df-text-mid);
}
.df-panel-head .slash { color: var(--df-fire); font-weight: 700; }
.df-panel-head .right { margin-left: auto; font-size: 9px; color: var(--df-text-dim); letter-spacing: 0.14em; }
.df-panel-body { padding: 10px 14px; font-size: 12px; }

.df-left { grid-area: left; display: flex; flex-direction: column; gap: 8px; padding: 8px 0; overflow: hidden; }
.df-markets { display: flex; flex-direction: column; gap: 1px; }
.df-market-row {
  display: grid; grid-template-columns: 70px 1fr auto; align-items: center; padding: 6px 14px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em;
  border-bottom: 1px dashed rgba(193,167,226,0.10); cursor: pointer;
}
.df-market-row:hover { background: rgba(117,59,189,0.1); }
.df-market-row .sym { color: var(--df-text-dim); font-size: 9px; letter-spacing: 0.16em; }
.df-market-row .val { color: var(--df-text); text-align: right; font-weight: 600; }
.df-market-row .delta { font-size: 10px; padding-left: 8px; font-weight: 600; }
.df-market-row .delta.up   { color: var(--df-mx-green); }
.df-market-row .delta.down { color: var(--df-red); }
/* TÍM panel (nahradil MARKETS) — capnuty, nech nezerie miesto mailom/konverzaciam */
.df-team { display: flex; flex-direction: column; gap: 1px; overflow: auto; max-height: 196px; }
.df-team-all { font-size: 9px !important; letter-spacing: 0.12em; color: var(--df-purple-l); }
.df-team-all:hover { color: var(--df-orange); }
.df-team-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; padding: 6px 14px; cursor: pointer; border-bottom: 1px dashed rgba(193,167,226,0.10); }
.df-team-row:hover { background: rgba(117,59,189,0.12); }
.df-team-av { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 8px; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.df-team-nm { font-family: var(--f-sans); font-size: 12px; color: var(--df-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-team-rl { font-family: var(--f-mono); font-size: 9px; color: var(--df-text-dim); letter-spacing: 0.06em; white-space: nowrap; }
.df-team-empty { padding: 14px; color: var(--df-text-dim); font-family: var(--f-mono); font-size: 11px; }

.df-stream { flex: 1; overflow: auto; font-family: var(--f-mono); font-size: 10px; line-height: 1.5; padding: 6px 14px; color: var(--df-text-dim); }
.df-stream-line { margin-bottom: 6px; padding-left: 14px; border-left: 1px solid var(--df-line); position: relative; }
.df-stream-line::before { content: ""; position: absolute; left: -2px; top: 6px; width: 3px; height: 3px; background: var(--df-fire); }
.df-stream-line .t { color: var(--df-text-faint); font-size: 9px; letter-spacing: 0.1em; display: block; }
.df-stream-line .a { color: var(--df-ember); text-transform: uppercase; font-size: 9px; letter-spacing: 0.12em; margin-right: 4px; }
.df-stream-line .x { color: var(--df-text-mid); font-size: 10px; }

.df-plast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--df-purple-soft); border-top: 1px dashed rgba(193,167,226,0.12); }
.df-plast-glyph { width: 18px; height: 22px; background: var(--df-purple-deep); clip-path: polygon(20% 0%, 80% 0%, 100% 30%, 100% 100%, 0% 100%, 0% 30%); position: relative; flex-shrink: 0; }
.df-plast-glyph::after { content: ""; position: absolute; inset: 1px; background: var(--df-purple); clip-path: inherit; }

/* grid-template-columns minmax(0,1fr) je KLUCOVE: implicitny 'auto' stlpec sa sizuje podla
   max-content deti -> dlhy nowrap #voice-transcript (diktovanie) roztiahol chat-panel za
   hranice centra a orb (centrovany v stage-center) odplaval doprava. minmax(0,1fr) dovoli
   stlpcu shrink pod content; ellipsis na transcripte potom text klipne (analogia 36961ff). */
/* stage-center (orb) ma GARANTOVANE minimum — predtym minmax(0,1fr): agent karty + chat
   (auto riadky) zozrali celu vysku a orb sa na nizsich oknach zrutil na ~18px (flags kopa). */
/* KOKPIT hierarchia: konverzacia je hlavna interakcia -> orb arena o nieco mensia
   (min 240), chat dostava viac (command-stack clamp nizsie). */
.df-center { grid-area: center; display: grid; grid-template-rows: minmax(240px, 1fr) auto; grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 8px; position: relative; min-height: 0; overflow: hidden; }
.df-center > * { min-height: 0; min-width: 0; }
/* Kokpit v2: AGENTI karty v pravom raile — 2 stlpce, meno + domena + stavova metrika.
   Trieda .df-agent-card + data-agent MUSI ostat (orb satelity + setCardCount na nu klucuju). */
.df-agents { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; overflow-y: auto; min-height: 0; }
/* Agent KARTA v2: LED · (meno + domena) · hodnota vpravo. */
.df-agent-card { position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 8px; background: rgba(20, 8, 42, 0.6); border: 1px solid var(--df-line); cursor: pointer; text-align: left; font-family: var(--f-mono); transition: all 0.18s; min-width: 0; }
.df-agent-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 6px; height: 6px; border-top: 1px solid var(--df-purple-soft); border-left: 1px solid var(--df-purple-soft); }
.df-agent-card::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 6px; height: 6px; border-bottom: 1px solid var(--df-purple-soft); border-right: 1px solid var(--df-purple-soft); }
.df-agent-card:hover { border-color: var(--df-fire); background: rgba(255,107,53,0.06); }
.df-agent-card.active { border-color: var(--df-fire); background: rgba(255,107,53,0.10); box-shadow: 0 0 12px rgba(255,107,53,0.25), inset 0 0 8px rgba(255,107,53,0.10); }
.df-agent-card.active::before, .df-agent-card.active::after { border-color: var(--df-fire); }
.df-agent-card .nm-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.df-agent-card .name { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; color: var(--df-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-agent-card.active .name { color: var(--df-fire); }
/* v2: domena (rola) viditelna pod menom — druhy riadok karty */
.df-agent-card .role { display: block; font-size: 8.5px; color: var(--df-text-dim); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-agent-card .agent-on { display: none; }
/* stat: len HODNOTA vpravo — label text sa skryje cez font-size:0 (kontext v tooltipe) */
.df-agent-card .stat-line { margin-left: auto; font-size: 0; letter-spacing: 0.03em; color: var(--df-text-faint); white-space: nowrap; flex: 0 0 auto; }
.df-agent-card .stat-line .v { color: var(--df-ember); font-weight: 700; font-size: 10px; }
/* v2: semanticky stav karty (warn/crit) — LED + hodnota preberaju farbu */
.df-agent-card.warn .status-led { background: var(--df-amber, #F5B800); box-shadow: 0 0 6px var(--df-amber, #F5B800); }
.df-agent-card.warn .stat-line .v { color: var(--df-amber, #F5B800); }
.df-agent-card.crit .status-led { background: var(--df-red); box-shadow: 0 0 6px var(--df-red); animation: led-pulse 1.2s infinite; }
.df-agent-card.crit .stat-line .v { color: var(--df-red); }
.df-agent-card .status-led { position: static; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--df-mx-green); box-shadow: 0 0 6px var(--df-mx-green); }
.df-agent-card.idle .status-led { background: var(--df-text-faint); box-shadow: none; }
.df-agent-card.thinking .status-led { background: var(--df-ember); box-shadow: 0 0 6px var(--df-ember); animation: led-pulse 0.8s infinite; }
@keyframes led-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
/* online / offline stav agenta */
.df-agent-card.online .status-led { background: var(--df-mx-green); box-shadow: 0 0 6px var(--df-mx-green); }
.df-agent-card.offline .status-led { background: var(--df-text-faint); box-shadow: none; }
.df-agent-card .agent-on { font-size: 8px; letter-spacing: 0.16em; font-weight: 700; color: var(--df-mx-green); margin-bottom: 5px; }
.df-agent-card .agent-on.off { color: var(--df-text-faint); }
.df-agent-card.offline { opacity: 0.74; cursor: default; }
.df-agent-card.offline:hover { border-color: var(--df-line); background: rgba(20,8,42,0.6); }

/* EMAILY — co cakaju na riesenie (lavy panel, data z CARTERO).
   flex:1 + min-height:0 + overflow-y:auto je KLUCOVE: bez toho maily pretekali
   VON z panela a kreslili sa cez TIM/KONVERZACIE hlavicky pod nim. */
.df-mail-list { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.df-mail-row { display: flex; flex-direction: column; gap: 2px; padding: 7px 4px; text-decoration: none; border-bottom: 1px dashed rgba(193,167,226,0.10); }
.df-mail-row:hover { background: rgba(124,79,166,0.10); }
.df-mail-row .m-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.df-mail-row .m-from { font-family: var(--f-mono); font-size: 10px; font-weight: 700; color: var(--df-text); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-mail-row .m-date { font-family: var(--f-mono); font-size: 8px; color: var(--df-text-dim); flex-shrink: 0; letter-spacing: 0.06em; }
.df-mail-row .m-subj { font-size: 10px; color: var(--df-text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-mail-row.unread .m-from { color: var(--df-fire); }
.df-mail-row.important .m-from::before { content: "\2605 "; color: var(--df-ember); }
.df-mail-empty { font-family: var(--f-mono); font-size: 10px; color: var(--df-text-dim); padding: 10px 4px; line-height: 1.5; }

/* Stage-center: FLEX STLPEC (top pas / orb arena / bottom pas) namiesto absolute
   overlay kopy — labely, flagy a stats uz NIKDY nelezia cez orb ani cez seba.
   Orb zije v .df-orb-area a skaluje sa podla dostupnej vysky (min(100%,380px)). */
.df-stage-center { position: relative; display: flex; flex-direction: column; padding: 8px 12px 10px; gap: 4px; border: 1px solid var(--df-line); background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(117,59,189,0.08), transparent 70%); overflow: hidden; }
.df-stage-row { flex: 0 0 auto; position: relative; z-index: 6; }
.df-stage-row.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.df-stage-row.top > .df-orb-flag:first-child { justify-self: start; }
.df-stage-row.top > .df-orb-flag:last-child { justify-self: end; }
/* stats + PRIPRAVENY v JEDNOM riadku (Raul 5.7.), dlazdice sa zalomia pod nich */
.df-stage-row.bottom { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 16px; }
.df-stage-row.bottom .df-orb-tiles { flex-basis: 100%; margin-top: 4px; }
.df-orb-area { position: relative; flex: 1 1 auto; min-height: 0; }
.df-stage-center::before { content: ""; position: absolute; top: -1px; left: -1px; width: 18px; height: 18px; border-top: 1px solid var(--df-fire); border-left: 1px solid var(--df-fire); }
.df-stage-center::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 18px; height: 18px; border-bottom: 1px solid var(--df-fire); border-right: 1px solid var(--df-fire); }
/* labely su STATICKE riadky v stage-row pasoch (nie absolute overlay) */
.df-orb-label-top, .df-orb-label-bot { font-family: var(--f-mono); letter-spacing: 0.32em; text-transform: uppercase; color: var(--df-text-mid); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.df-orb-label-bot { color: var(--df-ember); font-size: 10px; }
/* PRIPRAVENY zije VNUTRI stats pasu (jeden riadok, Raul 5.7.) */
.df-orb-stats-strip { flex-wrap: nowrap; gap: 12px; max-width: 100%; }
.df-orb-stats-strip .df-orb-label-bot { letter-spacing: 0.12em; font-size: 9.5px; border-left: 1px solid var(--df-line); padding-left: 12px; }
.df-orb-side-label { position: absolute; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.3em; color: var(--df-text-faint); text-transform: uppercase; writing-mode: vertical-rl; z-index: 1; }
.df-orb-side-label.left  { left: 2px; top: 50%; transform: translateY(-50%) rotate(180deg); }
.df-orb-side-label.right { right: 2px; top: 50%; transform: translateY(-50%); }
/* Absolutne vycentrovany v orb-area (nezavisle od flow) — 3D graf canvas inak
   obcas posunul orb doprava cez flex centrovanie. Garantovany stred.
   RESPONSIVE: vyska = min(dostupna arena, 380px), sirka drzi stvorec cez aspect-ratio
   — orb sa uz NIKDY nepretlaci cez susedne pasy pri nizkom okne. */
.df-orb-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: min(100%, 380px); aspect-ratio: 1 / 1; }
/* mäkký fialový halo za celým orbom */
.df-orb-wrap::before {
  content: ""; position: absolute; inset: -6%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(117,59,189,0.30) 0%, rgba(117,59,189,0.12) 44%, transparent 70%);
  filter: blur(10px);
}
.df-orb-rings { position: absolute; inset: 0; z-index: 2; animation: orb-rotate 24s linear infinite; }
@keyframes orb-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.df-orb-rings.reverse { animation: orb-rotate-rev 36s linear infinite; }
@keyframes orb-rotate-rev { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
/* obiehajuci cyan obluk (agentska draha) + zlaty bod */
.df-orb-rings::before {
  content: ""; position: absolute; inset: 3%; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--df-cyan);
  filter: drop-shadow(0 0 6px rgba(111,231,255,0.55)); pointer-events: none;
}
.df-orb-rings::after {
  content: ""; position: absolute; top: 3%; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--df-ember);
  box-shadow: 0 0 8px var(--df-ember), 0 0 18px rgba(255,182,39,0.5);
}
.df-orb-rings.reverse::before {
  inset: 9%; border-top-color: transparent; border-bottom-color: var(--df-fire);
  filter: drop-shadow(0 0 6px rgba(255,107,53,0.5));
}
.df-orb-rings.reverse::after { top: auto; bottom: 9%; }

/* ── IRON MAN HOLOGRAM (orb-holo.js) — WebGL vrstva: holo-gula, gimbal ringy, scanner ── */
.df-orb-holo { position: absolute; inset: -13%; width: 126%; height: 126%; z-index: 4; opacity: 0; transition: opacity 0.9s ease; }
.df-orb-wrap.holo .df-orb-holo { opacity: 1; }
/* holo aktivny -> stare 2D obiehajuce drahy prec (nahradene 3D gimbalmi) */
.df-orb-wrap.holo .df-orb-rings { display: none; }
/* BOOT stav (orb-holo.js ho nastavi HNED pri evale, kym sa THREE nahrava z CDN):
   stary CSS orb sa NEukaze v plnej siles — jadro je male tmave "semienko", hologram
   sa potom zmaterializuje cez fade. Ak THREE nepride (timeout), trieda sa da dole
   a CSS orb sa vrati v plnej podobe. */
.df-orb-wrap.holo-boot .df-orb-core { transform: scale(0.42); opacity: 0.35; filter: brightness(0.55) saturate(0.6); }
.df-orb-wrap .df-orb-core { transition: transform 0.8s ease, opacity 0.8s ease, filter 0.8s ease; }
.df-orb-wrap.holo-boot .df-orb-rings { opacity: 0; }
.df-orb-wrap.holo-boot .df-orb-face { opacity: 0.08; }
.df-orb-wrap .df-orb-face { transition: opacity 0.8s ease; }
/* DEDO hologram aktivny (orb-dedo.js) -> SVG symbol prec, tvar deda ho nahradza.
   Jadro sa STLMI: aditivny point-cloud na ziarivom fialovom jadre je neviditelny
   (zisteny zivo 4.7. — hologram potrebuje tmave platno). Synapsy uhnu tiez. */
.df-orb-wrap.dedo .df-orb-face { opacity: 0 !important; }
.df-orb-wrap.dedo .df-orb-core { filter: brightness(0.30) saturate(0.75); animation: none; }
.df-orb-wrap.dedo .df-orb-graph { opacity: 0.18; }
/* DEDO-ONLY rezim (df-orb-style='dedo', default): CELY orb prec — len hlava deda na tme.
   Orb sa NEmaze (JS ho stavia dalej, len skryty) — localStorage df-orb-style='full' vrati vsetko. */
.df-orb-wrap.dedo-only .df-orb-core,
.df-orb-wrap.dedo-only .df-orb-rings,
.df-orb-wrap.dedo-only .df-orb-hud,
.df-orb-wrap.dedo-only .df-orb-graph,
.df-orb-wrap.dedo-only .df-orb-ticks,
.df-orb-wrap.dedo-only .df-orb-ring,
.df-orb-wrap.dedo-only .df-orb-face,
.df-orb-wrap.dedo-only .df-orb-scanlines { display: none !important; }
.df-orb-wrap.holo-boot .df-orb-graph { opacity: 0.2; }
.df-orb-wrap .df-orb-graph { transition: opacity 0.8s ease; }
/* hologramove scanlines (jemne vodorovne linky + pomaly drift) cez celu gulu */
.df-orb-scanlines {
  position: absolute; inset: -4%; z-index: 5; pointer-events: none; border-radius: 50%;
  background: repeating-linear-gradient(180deg, rgba(193,167,226,0.05) 0px, rgba(193,167,226,0.05) 1px, transparent 1px, transparent 4px);
  opacity: 0.22; mix-blend-mode: screen; animation: holo-scan-drift 9s linear infinite;
}
@keyframes holo-scan-drift { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } }
@media (prefers-reduced-motion: reduce) { .df-orb-scanlines { animation: none; } }

/* ── JARVIS HUD (orb-hud.js) — vrstveny SVG: ticky, arc segmenty, sweep, brackety ──
   Rotacie su CSS transformacie na <g> (GPU). Rychlost/farba reaguje na [data-mode]. */
.df-orb-hud { position: absolute; inset: -3%; z-index: 2; pointer-events: none; }
.df-orb-hud-svg { width: 100%; height: 100%; }
.df-orb-hud-svg g { transform-origin: 200px 200px; transform-box: view-box; }
.df-orb-hud-svg .hud-deg { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.1em; fill: rgba(193,167,226,0.45); }
.df-orb-hud-svg .hud-rot-a { animation: orb-rotate 46s linear infinite; }
.df-orb-hud-svg .hud-rot-b { animation: orb-rotate-rev 64s linear infinite; }
.df-orb-hud-svg .hud-rot-b.slow { animation-duration: 90s; }
.df-orb-hud-svg .hud-rot-c { animation: orb-rotate 22s linear infinite; }
.df-orb-hud-svg .hud-rot-d { animation: orb-rotate-rev 30s linear infinite; }
.df-orb-hud-svg .hud-sweep { animation: orb-rotate 7s linear infinite; opacity: 0.8; }
/* mode reaktivita: MYSLI = HUD zrychli, HOVORI = sweep do fire, POCUVA = sweep matrix green */
.df-app[data-mode="thinking"] .hud-rot-a { animation-duration: 12s; }
.df-app[data-mode="thinking"] .hud-rot-c { animation-duration: 6s; }
.df-app[data-mode="thinking"] .hud-sweep { animation-duration: 2.4s; }
.df-app[data-mode="speaking"] .hud-sweep path { fill: url(#hud-sweep-grad); filter: hue-rotate(75deg) saturate(1.6); }
.df-app[data-mode="listening"] .hud-sweep path { filter: hue-rotate(190deg); }
.df-app[data-mode="sleep"] .df-orb-hud { opacity: 0.25; filter: saturate(0.3); transition: opacity 0.8s ease; }
@media (prefers-reduced-motion: reduce) { .df-orb-hud-svg g, .df-orb-hud-svg .hud-sweep { animation: none; } }
.df-orb-core {
  position: absolute; inset: 26%; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 38% 32%, #C084FC 0%, #753BBD 30%, #512D6D 60%, #240F47 100%);
  box-shadow: inset 0 -18px 34px rgba(0,0,0,0.7), inset 0 8px 22px rgba(193,167,226,0.4), 0 0 70px rgba(117,59,189,0.6), 0 0 140px rgba(117,59,189,0.3);
  animation: orb-breathe 4s ease-in-out infinite;
}
@keyframes orb-breathe {
  0%,100% { box-shadow: inset 0 -18px 34px rgba(0,0,0,0.7), inset 0 8px 22px rgba(193,167,226,0.4), 0 0 70px rgba(117,59,189,0.55), 0 0 140px rgba(117,59,189,0.28); }
  50% { box-shadow: inset 0 -18px 34px rgba(0,0,0,0.7), inset 0 8px 22px rgba(193,167,226,0.55), 0 0 90px rgba(117,59,189,0.75), 0 0 180px rgba(255,107,53,0.2); }
}
.df-orb-core::before { content: ""; position: absolute; top: 12%; left: 22%; width: 30%; height: 18%; background: radial-gradient(ellipse, rgba(255,255,255,0.55), transparent 60%); filter: blur(2px); }
/* 3D synapsova mapa vnutri sfery — synapsie nad fialovym jadrom (orb-graph.js).
   Bez mix-blend/mask (zradne s filtrami rodica) — graf je nad jadrom, okraje stmavi inset shadow. */
.df-orb-graph {
  position: absolute !important; inset: 24%; border-radius: 50%; overflow: hidden; z-index: 3;
  pointer-events: none; opacity: 0.95;
  contain: layout size paint; /* izoluj 3D canvas — nesmie tlacit/menit layout orbu */
  box-shadow: inset 0 0 24px 10px rgba(36,15,71,0.55); /* jemne stopenie okrajov do sfery */
}
.df-orb-graph canvas { width: 100% !important; height: 100% !important; display: block; }
/* koncentricke orbitalne prstence */
.df-orb-ring { position: absolute; inset: 0; border-radius: 50%; z-index: 1; border: 1px dotted rgba(193,167,226,0.30); }
.df-orb-ring.r2 { inset: 9%; border-style: dashed; border-color: rgba(193,167,226,0.22); }
.df-orb-ring.r3 { inset: 17%; border-style: solid; border-color: rgba(255,107,53,0.22); }
.df-orb-ticks { position: absolute; inset: 0; z-index: 1; }
.df-orb-ticks svg { width: 100%; height: 100%; }
.df-orb-flag { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--df-text-mid); padding: 3px 6px; background: rgba(20,8,42,0.85); border: 1px solid var(--df-line); white-space: nowrap; }
.df-orb-flag.tr, #orb-sync { color: var(--df-fire); border-color: rgba(255,107,53,0.32); }
.df-orb-flag b { color: var(--df-text); margin-right: 4px; }
/* Orb navigacia (MOZOG/WIKI/DENNIK/IMPORT/DOKUMENT/TLMOCNIK): flex stlpec v rohoch
   orb areny — stack sa sam uklada, NIKDY sa neprekryje bez ohladu na vysku orbu. */
.df-orb-nav { position: absolute; left: 8px; bottom: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; z-index: 6; }
.df-orb-nav.right { left: auto; right: 8px; align-items: flex-end; }
.df-orb-nav .df-orb-flag { text-decoration: none; letter-spacing: 0.18em; cursor: pointer; }
.df-orb-nav .df-orb-flag:hover { border-color: var(--df-fire); color: var(--df-fire); }
/* Navigacne DLAZDICE pod PRIPRAVENY (5.7. — nahradili rohove df-orb-nav stacky).
   JEDEN riadok (Raul 5.7.): nowrap + kompaktne dlazdice, pri uzkom module sa
   skratia ellipsou namiesto zalomenia. Mobile wrap v breakpointe nizsie. */
.df-orb-tiles { display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px; margin-top: 10px; min-width: 0; }
.df-orb-tiles .df-orb-flag { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; letter-spacing: 0.08em; cursor: pointer; font-size: 9px; padding: 5px 7px; }
@media (max-width: 768px) { .df-orb-tiles { flex-wrap: wrap; } }
.df-orb-tiles .df-orb-flag:hover { border-color: var(--df-fire); color: var(--df-fire) !important; }
/* stats pas je STATICKY riadok pod orbom (df-stage-row.bottom) — nie overlay cez prstene */
.df-orb-stats-strip { display: flex; gap: 12px; flex-wrap: nowrap; align-items: center; max-width: 100%; justify-content: center; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--df-text-dim); background: rgba(13, 6, 24, 0.7); padding: 4px 12px; border: 1px solid var(--df-line); }
.df-orb-stats-strip span b { color: var(--df-ember); font-size: 12px; font-weight: 600; }

/* chat = hlavna interakcia -> vacsi stack + citatelnejsie pismo (12px) */
.df-command-stack { display: flex; flex-direction: column; gap: 4px; font-family: var(--f-mono); font-size: 12px; line-height: 1.55; padding: 8px 14px 6px 14px; overflow-y: auto; max-height: clamp(150px, 24vh, 300px); }
/* mdLite formatovanie odpovedi (df-text.js): **bold** a `code` sa uz nezobrazuju ako surove hviezdicky */
.df-cmd-line .text b { color: var(--df-ember); font-weight: 600; }
.df-cmd-line .text code { font-family: var(--f-mono); font-size: 10.5px; color: var(--df-cyan); background: rgba(111,231,255,0.08); padding: 0 4px; }
.df-cmd-line { display: flex; gap: 8px; line-height: 1.5; }
.df-cmd-line .prompt { color: var(--df-fire); font-weight: 700; flex-shrink: 0; }
.df-cmd-line .who-don { color: var(--df-purple-soft); font-weight: 600; }
.df-cmd-line .who-raul { color: var(--df-ember); font-weight: 600; }
.df-cmd-line .who-agent { color: var(--df-mx-green); font-weight: 600; }
.df-cmd-line .text { color: var(--df-text); white-space: pre-wrap; word-break: break-word; }
.df-cmd-line .text .acc { color: var(--df-fire); font-weight: 600; }
.df-cmd-input-row { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px 14px; }
.df-cmd-input-row .label { font-family: var(--f-mono); font-size: 11px; color: var(--df-fire); font-weight: 700; letter-spacing: 0.08em; }
/* width:0 (nie len min-width:0!): INPUT ma intrinsic sirku zo size atributu (~180px) ktora
   sa propaguje do min-content celeho chat panela -> na Fold (340px) tlacila KAZDU band
   stranku +67px do boku. width:0 + flex:1 = input aj tak vyplni riadok (audit 4.7.). */
.df-cmd-input { flex: 1; width: 0; min-width: 0; background: rgba(5,3,9,0.6); border: 1px solid var(--df-line-strong); color: var(--df-text); font-family: var(--f-mono); font-size: 12px; padding: 8px 12px; letter-spacing: 0.02em; outline: none; }
.df-cmd-input:focus { border-color: var(--df-fire); box-shadow: 0 0 0 1px rgba(255,107,53,0.2), 0 0 12px rgba(255,107,53,0.18); }
.df-cmd-input::placeholder { color: var(--df-text-faint); }
.df-cmd-actions { display: flex; gap: 6px; }
.df-cmd-btn { background: transparent; border: 1px solid var(--df-line-strong); color: var(--df-text-mid); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; cursor: pointer; }
.df-cmd-btn:hover { border-color: var(--df-fire); color: var(--df-fire); }
.df-cmd-btn.primary { background: var(--df-fire); color: #0D0618; border-color: var(--df-fire); font-weight: 700; }
.df-cmd-btn.primary:hover { background: var(--df-ember); border-color: var(--df-ember); color: #0D0618; }

.df-right { grid-area: right; display: flex; flex-direction: column; gap: 8px; padding: 8px 0; overflow: hidden; }
/* Pravy rail: kazdy panel ma SVOJ flex podiel + vnutorny scroll — predtym jeden dlhy
   scroll stlpec, BRIEF zozral vsetko a ACTIVITY/NOW PLAYING boli odseknute pod okrajom. */
.df-right-scroll { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow: hidden; padding-right: 0; }
.df-right-scroll > .df-panel { display: flex; flex-direction: column; min-height: 0; }
.df-right-scroll > .df-panel:nth-child(1) { flex: 0 1 auto; min-height: 120px; } /* AGENTI (Kokpit v2) */
.df-right-scroll > .df-panel:nth-child(2) { flex: 5 1 0; min-height: 140px; }    /* DAILY BRIEF */
.df-right-scroll > .df-panel:nth-child(3) { flex: 4 1 0; min-height: 104px; }    /* AGENT ACTIVITY */
#briefing { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.df-brief-item { padding: 8px 14px; border-bottom: 1px dashed rgba(193,167,226,0.10); font-size: 11px; line-height: 1.5; display: flex; gap: 10px; }
.df-brief-item:last-child { border-bottom: 0; }
.df-brief-item .icon-glyph { font-family: var(--f-mono); color: var(--df-fire); font-weight: 700; font-size: 13px; flex-shrink: 0; width: 14px; text-align: center; }
.df-brief-item .label { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--df-text-dim); text-transform: uppercase; display: block; }
/* min-width:0 + flex:1 na wrapperi: dlhy REALNY brief text (mail summary...) sa inak
   z flexu vylial von z panela namiesto zalamovania. Clamp 4 riadky = citatelny digest. */
.df-brief-item > div { min-width: 0; flex: 1; }
.df-brief-item .body { color: var(--df-text); font-size: 11px; font-family: var(--f-mono); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.df-brief-item .body b { color: var(--df-ember); }
.df-music { padding: 10px 14px; }

/* ===== KOKPIT V2: VYZADUJE AKCIU — zjednoteny inbox (mail + task + alert) ===== */
.df-act-filters { display: flex; gap: 4px; padding: 0 8px 6px; flex-wrap: wrap; }
.df-act-chip { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; padding: 3px 8px; background: transparent; border: 1px solid var(--df-line); color: var(--df-text-mid); cursor: pointer; text-transform: uppercase; }
.df-act-chip:hover { border-color: var(--df-fire); color: var(--df-fire); }
.df-act-chip.on { background: rgba(255,107,53,0.14); border-color: var(--df-fire); color: var(--df-fire); }
.df-actions { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.df-act-row { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 6px 13px; border-bottom: 1px solid var(--df-line); cursor: pointer; }
.df-act-row::before { content: ""; position: absolute; left: 4px; top: 7px; bottom: 7px; width: 3px; background: var(--df-text-faint); }
.df-act-row.p1::before { background: var(--df-red); box-shadow: 0 0 6px rgba(255,51,85,0.5); }
.df-act-row.p2::before { background: var(--df-amber, #F5B800); }
.df-act-row:hover { background: rgba(255,107,53,0.05); }
.df-act-top { display: flex; gap: 6px; align-items: center; font-family: var(--f-mono); min-width: 0; }
.df-act-badge { font-size: 8px; font-weight: 700; letter-spacing: 0.08em; padding: 1px 5px; text-transform: uppercase; flex: 0 0 auto; }
.df-act-badge.mail  { background: rgba(124,79,166,0.25); color: var(--df-purple-light, #C1A7E2); }
.df-act-badge.task  { background: rgba(245,184,0,0.15); color: var(--df-amber, #F5B800); }
.df-act-badge.alert { background: rgba(255,51,85,0.15); color: var(--df-red); }
.df-act-agent { font-size: 8px; color: var(--df-text-faint); letter-spacing: 0.08em; white-space: nowrap; }
.df-act-when { margin-left: auto; font-size: 8.5px; color: var(--df-text-faint); white-space: nowrap; flex: 0 0 auto; }
.df-act-t { font-family: var(--f-mono); font-size: 11px; color: var(--df-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-act-s { font-family: var(--f-mono); font-size: 9.5px; color: var(--df-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-act-btns { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.df-act-btn { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.08em; padding: 2px 7px; background: transparent; border: 1px solid var(--df-line); color: var(--df-text-mid); cursor: pointer; }
.df-act-btn:hover { border-color: var(--df-fire); color: var(--df-fire); }
.df-act-btn.pri { border-color: rgba(255,107,53,0.5); color: var(--df-fire); background: rgba(255,107,53,0.08); }
/* RSVP na kalendarovej pozvanke rovno z riadku */
.df-act-btn.yes { border-color: rgba(0,255,65,0.5); color: var(--df-mx-green); background: rgba(0,255,65,0.06); }
.df-act-btn.yes:hover { border-color: var(--df-mx-green); color: var(--df-mx-green); }
.df-act-btn.no { border-color: rgba(255,107,53,0.5); color: var(--df-fire); }
.df-act-btn:disabled { opacity: 0.45; cursor: default; }
.df-act-empty { font-family: var(--f-mono); font-size: 10px; color: var(--df-text-dim); padding: 10px 8px; }
[data-theme="light"] .df-act-row:hover { background: rgba(229,85,30,0.05); }

/* ===== KOKPIT V2: NOW PLAYING mini player v status bare ===== */
.df-music-mini { display: flex; align-items: center; gap: 6px; margin-left: auto; font-family: var(--f-mono); min-width: 0; padding: 0; }
.df-music-mini button { background: transparent; border: 1px solid var(--df-line); color: var(--df-text-mid); font-size: 9px; width: 20px; height: 18px; line-height: 1; cursor: pointer; padding: 0; }
.df-music-mini button:hover { border-color: var(--df-fire); color: var(--df-fire); }
.df-music-mini .track { font-size: 9px; color: var(--df-text-mid); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.df-music-now { font-family: var(--f-mono); font-size: 11px; color: var(--df-text); margin-bottom: 6px; }
.df-music-now .label { font-size: 9px; letter-spacing: 0.16em; color: var(--df-text-dim); text-transform: uppercase; display: block; }
.df-music-controls { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.df-music-controls button { background: transparent; border: 1px solid var(--df-line-strong); color: var(--df-text-mid); width: 28px; height: 28px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.df-music-controls button.play { background: var(--df-fire); color: #0D0618; border-color: var(--df-fire); }
.df-music-progress { height: 4px; background: rgba(193,167,226,0.14); margin: 8px 0 4px 0; position: relative; }
.df-music-progress div { position: absolute; top: 0; left: 0; bottom: 0; width: 38%; background: linear-gradient(90deg, var(--df-purple), var(--df-fire)); }
.df-music-time { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--df-text-dim); }
.df-activity { padding: 6px 14px; font-family: var(--f-mono); font-size: 10px; line-height: 1.6; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.df-activity-row { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px dashed rgba(193,167,226,0.08); }
.df-activity-row:last-child { border-bottom: 0; }
.df-activity-row .t { color: var(--df-text-faint); font-size: 9px; min-width: 38px; }
.df-activity-row .a { color: var(--df-ember); font-weight: 600; min-width: 64px; }
.df-activity-row .x { color: var(--df-text-mid); }
.df-decision { padding: 6px 14px; }
.df-decision-row { padding: 8px 0; border-bottom: 1px dashed rgba(193,167,226,0.10); font-family: var(--f-mono); }
.df-decision-row:last-child { border-bottom: 0; }
.df-decision-row .q { font-size: 11px; color: var(--df-text); margin-bottom: 4px; line-height: 1.4; }
.df-decision-row .options { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.df-decision-row .opt { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 6px; border: 1px solid var(--df-line-strong); color: var(--df-text-mid); cursor: pointer; }
.df-decision-row .opt:hover { border-color: var(--df-fire); color: var(--df-fire); }
.df-decision-row .opt.recommended { border-color: var(--df-fire); color: var(--df-fire); background: rgba(255,107,53,0.06); }
.df-decision-row .meta { font-size: 9px; letter-spacing: 0.12em; color: var(--df-text-faint); text-transform: uppercase; margin-top: 4px; }

/* 4 REALNE biznis KPI (GET /dash) — predtym 7 mock boxov z data.js */
.df-kpi-strip { grid-area: strip; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 6px 8px; overflow: hidden; }
.df-kpi { position: relative; padding: 8px 10px; background: rgba(20, 8, 42, 0.55); border: 1px solid var(--df-line); font-family: var(--f-mono); cursor: pointer; overflow: hidden; }
.df-kpi:hover { border-color: var(--df-purple-soft); }
.df-kpi::before { content: ""; position: absolute; top: -1px; left: -1px; width: 6px; height: 6px; border-top: 1px solid var(--df-fire); border-left: 1px solid var(--df-fire); }
.df-kpi .label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--df-text-dim); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-kpi .val { font-size: 18px; font-weight: 700; color: var(--df-text); letter-spacing: 0.02em; }
.df-kpi .val .u { font-size: 11px; color: var(--df-text-mid); font-weight: 400; margin-left: 2px; }
.df-kpi .delta { font-size: 10px; margin-top: 2px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-kpi .delta.up { color: var(--df-mx-green); }
.df-kpi .delta.down { color: var(--df-red); }
.df-kpi .delta.flat { color: var(--df-text-mid); }
/* Kokpit v2: stavy dlazdice + sparkline trend (SVG vpravo hore) */
.df-kpi.crit { border-color: rgba(255, 51, 85, 0.45); }
.df-kpi.crit .val { color: var(--df-red); }
.df-kpi.off .val { color: var(--df-text-faint); }
.df-kpi-spark { position: absolute; right: 8px; top: 8px; opacity: 0.85; pointer-events: none; }
.df-kpi-spark polyline { fill: none; stroke: var(--df-text-faint); stroke-width: 1.5; }
.df-kpi.crit .df-kpi-spark polyline { stroke: var(--df-red); }
.df-kpi.ok .df-kpi-spark polyline { stroke: var(--df-mx-green); }

.df-status-bar { grid-area: status; display: flex; align-items: center; gap: 18px; padding: 0 16px; height: 26px; overflow: hidden; white-space: nowrap; border-top: 1px solid var(--df-line); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--df-text-dim); background: rgba(13, 6, 24, 0.6); }
.df-status-bar .item { display: flex; align-items: center; gap: 6px; }
.df-status-bar .item.ok { color: var(--df-mx-green); }
.df-status-bar .item .lbl { color: var(--df-text-faint); }
.df-status-bar .right { margin-left: auto; color: var(--df-text-mid); }

.df-portfolio-list { font-family: var(--f-mono); padding: 6px 14px; font-size: 11px; }
.df-portfolio-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(193,167,226,0.10); }
.df-portfolio-row:last-child { border-bottom: 0; }
.df-portfolio-row .nm { color: var(--df-text); font-weight: 600; }
.df-portfolio-row .nm small { display: block; color: var(--df-text-dim); font-size: 9px; letter-spacing: 0.12em; font-weight: 400; }
.df-portfolio-row .st { font-size: 9px; padding: 2px 6px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--df-line-strong); color: var(--df-text-mid); }
.df-portfolio-row .st.live { color: var(--df-mx-green); border-color: var(--df-mx-dim); }
.df-portfolio-row .st.dev  { color: var(--df-ember); border-color: rgba(255,182,39,0.32); }
.df-portfolio-row .st.warn { color: var(--df-fire); border-color: rgba(255,107,53,0.4); }
.df-portfolio-row .ix { font-size: 9px; color: var(--df-text-faint); letter-spacing: 0.12em; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--df-line-strong); }
::-webkit-scrollbar-track { background: transparent; }

.df-app[data-mode="listening"] .df-orb-core { animation: orb-listen 1.4s ease-in-out infinite; }
@keyframes orb-listen { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.df-app[data-mode="thinking"] .df-orb-rings { animation-duration: 4s; }
.df-app[data-mode="thinking"] .df-orb-core,
.df-app[data-mode="speaking"] .df-orb-core { box-shadow: inset 0 -22px 40px rgba(0,0,0,0.7), inset 0 10px 28px rgba(255,182,39,0.5), 0 0 80px rgba(255,107,53,0.6), 0 0 160px rgba(255,107,53,0.3); }

.df-boot { position: fixed; inset: 0; background: #050309; z-index: 999; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); color: var(--df-text); flex-direction: column; gap: 16px; }
.df-boot .word { font-family: var(--f-display); font-size: 36px; letter-spacing: 0.36em; color: var(--df-fire); text-shadow: 0 0 24px rgba(255,107,53,0.6); }
.df-boot .lines { font-size: 11px; color: var(--df-text-mid); text-align: center; letter-spacing: 0.18em; line-height: 1.8; }

/* ============================================================
   LIVE WIRING ADDITIONS (login overlay, conn states, mode error)
   ============================================================ */
.hidden { display: none !important; }

/* prihlaseny (df-token, flag z theme-init pred paintom): login sa vobec neukaze — ziadny
   flash formulara ani Chrome password-manager dropdown v lavom hornom rohu */
html[data-df-authed="1"] .df-login { display: none !important; }
.df-login { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  /* safe-area: na notch/gesture-bar telefonoch (viewport-fit=cover) nesmie karta pod vyrez */
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(ellipse 80% 60% at 50% 35%, rgba(117,59,189,0.18), transparent 60%), linear-gradient(180deg, #0D0618, #050309); }
.df-login-card { position: relative; border: 1px solid var(--df-line); background: rgba(20,8,42,0.6); backdrop-filter: blur(6px); padding: 48px 40px; width: 380px; text-align: center; }
.df-login-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; border-top: 1px solid var(--df-fire); border-left: 1px solid var(--df-fire); }
.df-login-card::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px; border-bottom: 1px solid var(--df-fire); border-right: 1px solid var(--df-fire); }
.df-login form { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.df-login input { background: rgba(5,3,9,0.6); border: 1px solid var(--df-line-strong); color: var(--df-text); font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.1em; padding: 12px 14px; outline: none; }
.df-login input:focus { border-color: var(--df-fire); box-shadow: 0 0 0 1px rgba(255,107,53,0.25); }
.df-login button { background: var(--df-fire); color: #0D0618; border: none; font-family: var(--f-mono); font-weight: 700; letter-spacing: 0.16em; padding: 12px; cursor: pointer; }
.df-login button:hover { background: var(--df-ember); }
/* 2FA backup kod (audit 24.9.): nenapadny link pod polom, viditelny len ked je 2FA pole zobrazene */
.df-login button.df-totp-alt { background: none; color: var(--df-text-dim, #C1A7E2); font-weight: 400; font-size: 10px; letter-spacing: 0.12em; padding: 2px; text-decoration: underline; align-self: center; }
.df-login button.df-totp-alt:hover { background: none; color: var(--df-text); }
.df-login #totp.hidden + .df-totp-alt { display: none; }
/* mobil-audit-3 iter 3: MAM BACKUP KOD je prepinac (2. tap = spat na cislicovu klavesnicu + auto-submit
   6. cislice). Popis sa odvodzuje od inputmode pola -> sedi aj po resetTwoFa() v app.js. */
.df-login .df-totp-alt .df-alt-to-app { display: none; }
.df-login #totp[inputmode="text"] + .df-totp-alt .df-alt-to-backup { display: none; }
.df-login #totp[inputmode="text"] + .df-totp-alt .df-alt-to-app { display: inline; }
.df-login button:disabled { opacity: 0.5; cursor: not-allowed; }
.df-login .sub { font-size: 9px; letter-spacing: 0.4em; color: var(--df-text-dim); margin-top: 8px; }
.df-login .msg { font-size: 11px; color: var(--df-ember); min-height: 16px; letter-spacing: 0.04em; margin-top: 4px; }
.df-login .msg.error { color: var(--df-red); }

.df-topbar-status-pill.off { border-color: rgba(255,51,85,0.5); color: var(--df-red); }
.df-topbar-status-pill.off .dot { background: var(--df-red); box-shadow: 0 0 6px var(--df-red); animation: none; }
.df-topbar-status-pill.connecting { border-color: rgba(255,182,39,0.5); color: var(--df-ember); }
.df-topbar-status-pill.connecting .dot { background: var(--df-ember); box-shadow: 0 0 6px var(--df-ember); }

.df-app[data-mode="error"] .df-orb-core { box-shadow: inset 0 -22px 40px rgba(0,0,0,0.7), 0 0 70px rgba(255,51,85,0.7); }

/* Voice rail */
.df-voice-rail {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0;
  padding: 6px 14px; border-top: 1px dashed rgba(193,167,226,0.14);
  font-family: var(--f-mono); font-size: 10px;
}
.df-voice-state {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--df-text-dim); white-space: nowrap;
  /* flex-basis:0 je KLUCOVE: dlhy status (napr. "DIKTAFON BEZI — ...") inak zalomil
     flex-wrap rail na 2 riadky -> chat-panel narastol -> stage-center sa zmensil ->
     orb (centrovany) skocil. flex-wrap lame podla flex-basis (obsahu) PRED shrinkom,
     takze 'flex:0 1 auto'+ellipsis nestacilo (basis=obsah=dlhy -> wrap). 'flex:1 1 0'
     da basis 0 -> nikdy netriggeruje wrap, len zoberie zvysok riadku a klipne. */
  flex: 1 1 0; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.df-voice-state.listening { color: var(--df-mx-green); }
.df-voice-state.thinking { color: var(--df-ember); }
.df-voice-state.speaking { color: var(--df-fire); }
.df-voice-state.sleep { color: var(--df-text-dim); }
/* SPANOK: orb stmavne (wake-word gating — Don pocuva len "hej Fuego" / "zobud sa") */
.df-app[data-mode="sleep"] .df-orb-core { filter: saturate(0.25) brightness(0.45); transition: filter 0.8s ease; }
.df-mic-meter {
  flex: 0 0 90px; height: 6px; background: rgba(193,167,226,0.12); position: relative; overflow: hidden;
}
.df-mic-meter > div {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--df-mx-green), var(--df-fire));
  transition: width 0.06s linear;
}
.df-voice-transcript {
  flex: 1; min-width: 0; color: var(--df-text-mid); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic;
}
#voice-btn.on { border-color: var(--df-mx-green); color: var(--df-mx-green); }
/* SPANOK: jednoznacne odlisenie ze Don spi a nepocuva (klik = zobudi). Amber, nie zelena. */
#voice-btn.on.asleep { border-color: var(--df-amber, #F5B800); color: var(--df-amber, #F5B800); opacity: 0.75; }

/* ===== BRAND SYMBOL LAYER (design handoff update) ===== */

/* topbar brand: symbol + DON FUEGO / del fuego OS */
.df-topbar-brand { display: inline-flex; align-items: center; gap: 14px; }
.df-topbar-brand img { width: 44px; height: 44px; flex-shrink: 0; }
.df-topbar-brand-text {
  font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: 0.22em;
  color: var(--df-text); line-height: 1.15; display: flex; flex-direction: column;
}
.df-topbar-brand-text span {
  font-style: italic; font-weight: 400; color: var(--df-text-mid); letter-spacing: 0.16em; font-size: 9px;
}

/* symbol vo vnutri orbu */
.df-orb-face {
  position: absolute; inset: 38%; width: 24%; height: 24%; z-index: 4; opacity: 0.62;
  filter: drop-shadow(0 0 12px rgba(193,167,226,0.7)) drop-shadow(0 0 26px rgba(117,59,189,0.5));
  animation: orb-face-breathe 4s ease-in-out infinite; pointer-events: none;
}
@keyframes orb-face-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.74; transform: scale(1.03); }
}

/* symbol pri PLAST indikatore */
.df-plast-symbol { width: 24px; height: 24px; color: var(--df-purple-soft); opacity: 0.85; flex-shrink: 0; }

/* blikajuci ohnivy kurzor v command line */
.df-cmd-cursor {
  display: inline-block; width: 7px; height: 12px; background: var(--df-fire);
  animation: cursor-blink 1.1s steps(2) infinite; vertical-align: middle;
}
@keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* rohove markery na stage paneli */
.df-panel-corners-full { position: relative; }
.df-panel-corners-full::before, .df-panel-corners-full::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1px solid rgba(193,167,226,0.4); pointer-events: none;
}
.df-panel-corners-full::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.df-panel-corners-full::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* boot screen symbol */
.df-boot-symbol {
  width: 96px; height: 96px; color: var(--df-purple-soft);
  filter: drop-shadow(0 0 24px rgba(193,167,226,0.5)); animation: boot-pulse 2.4s ease-in-out infinite;
}
@keyframes boot-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
.df-boot-by {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.32em; color: var(--df-text-dim); margin-top: -8px;
}

/* ── per-turn toggles (internet / myslenie / poradca) + token usage readout ── */
.df-opts-rail { display: flex; align-items: center; gap: 8px; padding: 6px 0 2px; flex-wrap: wrap; }
.df-opt-toggle { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; padding: 4px 9px; background: transparent; color: #8A78A8; border: 1px solid #2A1B40; cursor: pointer; }
.df-opt-toggle:hover { color: #C1A7E2; border-color: #7C4FA6; }
.df-opt-toggle.on { color: #0F0A18; background: #FF6B35; border-color: #FF6B35; font-weight: 700; }
.df-usage { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: #F5B800; white-space: nowrap; padding: 3px 8px; border: 1px solid #2A1B40; }

/* ── Konverzacie: rychly zoznam (sidebar) + plny modal ──
   flex:1 + min-height:0 namiesto fixneho max-height — zoznam vyplni panel a scrolluje
   VNUTRI neho (predtym: fixnych 160px pretekalo cez PLAST/okraj panela). */
.df-conv-quick { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.df-cmd-btn.close { border-color: rgba(255,51,85,0.4); color: rgba(255,51,85,0.85); }
.df-cmd-btn.close:hover { background: rgba(255,51,85,0.12); border-color: rgba(255,51,85,0.7); color: #FF3355; }

.df-conv-item {
  display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer;
  border-left: 2px solid transparent; font-family: var(--f-mono); transition: background 0.12s, border-color 0.12s;
}
.df-conv-item .cmeta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.df-conv-item:hover { background: rgba(124,79,166,0.10); border-left-color: var(--df-purple-mid); }
.df-conv-item.active { background: rgba(255,107,53,0.10); border-left-color: var(--df-fire); }
.df-conv-item .ct { font-size: 11px; color: var(--df-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-conv-item .cm { font-size: 9px; color: var(--df-text-dim); letter-spacing: 0.08em; }
/* rename (ceruzka) — na hover/aktivny zvyrazni; na touch zariadeni vzdy viditelna */
.df-conv-item .cr {
  flex: 0 0 auto; background: transparent; border: none; color: var(--df-text-dim);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 4px; opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.df-conv-item:hover .cr, .df-conv-item.active .cr { opacity: 0.7; }
.df-conv-item .cr:hover { color: var(--df-fire); opacity: 1; }
@media (hover: none) { .df-conv-item .cr { opacity: 0.6; } }

/* NIZKE desktop okno (notebook / polovicne okno): namiesto tlacenia modulov na seba
   povol scroll stranky — orb drzi minimum cez .df-center minmax(280px,1fr).
   Min 520 (predtym 600): orb je uz responsivny (min(100%,380px)), takze bezne notebooky
   (napr. 1568x727) sa zmestia BEZ scrollu — 50+520..565+86+26 = presne viewport. */
@media (min-width: 1025px) and (max-height: 840px) {
  html, body { overflow-y: auto; height: auto; }
  .df-stage { height: auto; min-height: 100vh; overflow: visible; }
  /* stredny riadok CAPNUTY na viewport (nie 1fr!) — inak by ho natiahol najvyssi stlpec
     (pravy panel s dlhym briefom) a orb by skoncil o stovky px nizsie mimo obrazovky */
  .df-app { height: auto; max-height: none; min-height: 100vh; grid-template-rows: 50px 84px minmax(520px, calc(100dvh - 160px)) 26px; }
  .df-left, .df-right { max-height: calc(100dvh - 162px); min-height: 520px; }
  .df-command-stack { max-height: 140px; }
}

/* ── VIAC menu (details/summary, bez JS): sekundarne chat akcie schovane za jedno tlacidlo ── */
.df-more { position: relative; display: inline-block; }
.df-more summary { list-style: none; display: inline-block; user-select: none; }
.df-more summary::-webkit-details-marker { display: none; }
.df-more[open] summary { border-color: var(--df-fire); color: var(--df-fire); }
.df-more-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 4px; min-width: 176px;
  background: #14082A; border: 1px solid var(--df-line-strong); padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.df-more-menu .df-cmd-btn { width: 100%; text-align: left; }
[data-theme="light"] .df-more-menu { background: #FFFFFF; box-shadow: 0 8px 24px rgba(36,29,51,0.15); }
.df-conv-empty { font-family: var(--f-mono); font-size: 10px; color: var(--df-text-dim); padding: 8px; }

/* ===== FOCUS MOD — velke konverzacne prostredie ===== */
.df-focus {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: rgba(8,4,16,0.97); backdrop-filter: blur(5px);
}
.df-focus-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--df-line);
  background: linear-gradient(180deg, #160a2e 0%, #0c0618 100%);
}
.df-focus-headleft { display: flex; align-items: center; gap: 12px; }
.df-focus-title { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--df-text); }
.df-focus-actions { display: flex; gap: 8px; }
/* mini-orb vo focus hlavicke — reaguje na mode (data-mode na #focus-modal) + audio pulz (JS) */
.df-focus-orb { position: relative; width: 36px; height: 36px; flex: 0 0 auto; }
.df-focus-orb-core {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #C084FC 0%, #753BBD 35%, #512D6D 65%, #240F47 100%);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.6), 0 0 14px rgba(117,59,189,0.6);
  animation: orb-breathe 4s ease-in-out infinite; transition: box-shadow 0.25s;
}
.df-focus-orb-face {
  position: absolute; inset: 32%; width: 36%; height: 36%; z-index: 2; opacity: 0.6;
  pointer-events: none; filter: drop-shadow(0 0 6px rgba(193,167,226,0.7));
}
#focus-modal[data-mode="listening"] .df-focus-orb-core { box-shadow: inset 0 -6px 12px rgba(0,0,0,0.6), 0 0 18px rgba(0,255,65,0.5); animation: orb-listen 1.4s ease-in-out infinite; }
#focus-modal[data-mode="thinking"]  .df-focus-orb-core { box-shadow: inset 0 -6px 12px rgba(0,0,0,0.6), 0 0 20px rgba(245,184,0,0.55); }
#focus-modal[data-mode="speaking"]  .df-focus-orb-core { box-shadow: inset 0 -6px 12px rgba(0,0,0,0.6), 0 0 26px rgba(255,107,53,0.75); }
.df-focus-body { flex: 1; display: flex; min-height: 0; }
.df-focus-side {
  flex: 0 0 260px; width: 260px; border-right: 1px solid var(--df-line);
  display: flex; flex-direction: column; min-height: 0;
}
.df-focus-side-head {
  padding: 10px 14px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--df-text-dim); border-bottom: 1px dashed var(--df-line);
}
.df-focus-side #focus-conv-list { flex: 1; max-height: none; overflow-y: auto; padding: 6px; }
.df-focus-center { flex: 1; min-width: 0; display: flex; padding: 14px 18px; }
/* chat panel presunuty do focusu = roztiahnuty na cely priestor, vacsi text */
.df-focus-center > .df-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; border: none; background: transparent; }
.df-focus-center > .df-panel::before, .df-focus-center > .df-panel::after { display: none; }
.df-focus-center .df-command-stack { flex: 1; max-height: none; font-size: 13px; line-height: 1.65; padding: 8px 6px; }
.df-focus-center .df-cmd-input { font-size: 14px; padding: 11px 14px; }
.df-focus-center .df-cmd-line { line-height: 1.65; }

@media (max-width: 1024px) {
  .df-focus-side { display: none; }                 /* na mobile len chat; konverzacie cez tlacidlo */
  .df-focus-center { padding: 8px 10px; }
  .df-focus-head { padding: 8px 10px; flex-wrap: wrap; }
}

.df-conv-modal {
  position: fixed; inset: 0; z-index: 400; background: rgba(4,2,9,0.72);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.df-conv-modal-box {
  width: min(640px, 92vw); max-height: 80vh; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #0E0820 0%, #0A0518 100%);
  border: 1px solid var(--df-line-strong); padding: 18px; position: relative;
}
.df-conv-modal-box::before, .df-conv-modal-box::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 1px solid var(--df-purple-soft); pointer-events: none;
}
.df-conv-modal-box::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.df-conv-modal-box::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.df-conv-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--df-text-mid);
}
.df-conv-modal-head .slash { color: var(--df-fire); font-weight: 700; }
.df-conv-modal-actions { display: flex; gap: 6px; }
.df-conv-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; }
.df-conv-list .df-conv-item .ct { font-size: 12px; }
.df-conv-list .df-conv-item { padding: 9px 10px; }
/* MOBIL loop 5: hladanie v KONVERZACIACH zdiela .df-cmd-input (flex:1; width:0 = fix pre riadok
   composeru). V stlpcovom flexe modalu width:0 prebilo stretch -> pole 26px, placeholder neviditelny.
   flex:0 0 auto = ani nerastie do vysky na ukor zoznamu. */
.df-conv-modal-box > .df-cmd-input { width: 100%; flex: 0 0 auto; }

/* Mikrofon ikona v hlasovych tlacidlach (SVG = vykresli sa vsade rovnako, nie monochrome emoji) */
.df-mic-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 2px; }
#dictate-btn.on { background: var(--df-fire); border-color: var(--df-fire); color: #0D0618; font-weight: 700; }
#dictate-btn.on .df-mic-ico { stroke: #0D0618; }

/* ============================================================
   MOBILE / TABLET (<=860px) — desktop grid sa rozpada do stacku
   Velitelska kabina -> jeden stlpec, scroll, zmenseny orb.
   Poradie: topbar -> CORE+chat -> right panely -> left panely -> KPI -> status
   ============================================================ */
/* 1024px (nie 860): Chrome Android "Desktop site" mod predstiera sirku 980px a ignoruje
   width=device-width -> breakpoint musi byt NAD 980 nech mobilny layout naskoci aj tam.
   (cisto sirka, ziadny pointer:coarse — nech sa dotykovy desktop/notebook neflipne do mobilu) */
@media (max-width: 1024px) {
  /* povol vertikalny scroll (desktop ma overflow:hidden + 100vh lock).
     KRITICKE (4.7.2026, Android appka "posun jednym prstom nejde"): body NESMIE byt
     scroll container (overflow-y:auto)! Body s overflow-y:auto nema co scrollovat
     (obsah = jeho vyska) a overscroll-behavior:none na nom ZAKAZE chaining gesta
     vyssie na html -> dotykove gesto umrie v body a html scroller sa NIKDY nepohne
     (touchmove chodi, prevented nie, scrollTop 0 — diagnostika SDBG). Band mode
     podstranky maju body overflow:visible a scroll funguje — rovnaky vzor aj tu.
     Scrolluje HTML (root), body je priehladny flow element. */
  html { overflow-y: auto; overflow-x: hidden; height: auto; }
  body { overflow: visible; height: auto; }

  .df-stage { height: auto; min-height: 100vh; overflow: visible; }
  .df-stage::after { display: none; }            /* bocne vignety = na mobile orezavaju */
  .df-binary-rain { display: none; }              /* binarny dazd zere bocny priestor */

  /* grid -> flex column; rozbijeme fixne 270/1fr/320 stlpce */
  .df-app {
    display: flex; flex-direction: column;
    grid-template-columns: none; grid-template-rows: none; grid-template-areas: none;
    height: auto; max-height: none; min-height: 100vh; overflow: visible;
    /* safe-area (viewport-fit=cover): obsah nesmie pod gesture bar / zaoblene rohy */
    padding: 0 max(8px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  /* poradie sekcii (chat/orb hore, lebo to je hlavna interakcia) */
  .df-topbar     { order: 1; }
  .df-center     { order: 2; }
  .df-right      { order: 3; }
  .df-left       { order: 4; }
  .df-kpi-strip  { order: 5; }
  .df-status-bar { order: 6; }

  /* TOPBAR — z 3-stlpcoveho gridu na jeden riadok, sticky hore */
  .df-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    grid-template-columns: none; height: auto; min-height: 48px;
    /* safe-area top: sticky bar na notch telefone (edge-to-edge WebView) nesmie pod status bar */
    padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
    background: linear-gradient(180deg, #160a2e 0%, #0c0618 100%);
    border-bottom: 1px solid var(--df-line);
  }
  .df-topbar-center { display: none; }            /* velky DON FUEGO wordmark — redundantny vedla brandu */
  .df-topbar-left { gap: 8px; min-width: 0; flex: 1; }
  .df-topbar-brand img { width: 30px; height: 30px; }
  .df-topbar-brand-text { font-size: 11px; letter-spacing: 0.16em; }
  .df-topbar-right { gap: 8px; }
  .df-topbar-tc { font-size: 11px; padding: 3px 7px; }
  #google-connect { display: none !important; }   /* skry sekundarne CTA na malej obrazovke */

  /* FOLD / uzke telefony (Fold5 cover ~340px): topbar sa NEZMESTI do jedneho radu.
     DVA plne rady (ziadne poloprazdne klastre — Raul 4.7. "nepaci sa mi ako to je"):
     1) brand vlavo + ONLINE pill vpravo
     2) SVETLA · PRIPOJENIA · pocasie(ellipsis) · cas — roztiahnute na celu sirku */
  @media (max-width: 480px) {
    .df-topbar { flex-wrap: wrap; row-gap: 6px; }
    .df-topbar-left { flex: 1 1 100%; justify-content: space-between; }
    /* .df-topbar prefix = vyssia specificita nez touch-target blok nizsie (riadok ~977
       flex-end) — inak by rad2 ostal prilepeny vpravo s prazdnym lavym rohom */
    .df-topbar .df-topbar-right { flex: 1 1 100%; flex-wrap: wrap; justify-content: space-between; gap: 6px; min-width: 0; }
    /* pocasie sa zmrsti s ellipsis (df-dash na narrow da teplotu PRED mesto), cas nikdy */
    .df-topbar-right #weather { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .df-topbar-tc { flex-shrink: 0; }
  }

  /* LEFT / RIGHT — zrus fixnu vysku a vnutorny scroll, nech tecu v stranke */
  .df-left, .df-right { padding: 0; overflow: visible; gap: 10px; margin-top: 10px; }
  .df-right-scroll { overflow: visible; padding-right: 0; gap: 10px; }
  .df-left > .df-panel, .df-right .df-panel {
    flex: none !important;                          /* inline flex:1 by skolaboval na 0px */
  }
  /* vnutorne scrolly z desktopu -> na mobile tecu v stranke (capnute, nie nekonecne) */
  #portfolio, .df-mail-list, .df-actions { max-height: 300px; flex: none; }
  #briefing, .df-activity { flex: none; overflow: visible; }
  .df-conv-quick { flex: none; max-height: 200px; }
  .df-team { max-height: none; }
  #stream { flex: none; max-height: 220px; }        /* memory stream dostane vlastny mensi scroll */

  /* CENTER — grid riadky -> flex column, orb dostane pevnu vysku */
  .df-center { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; overflow: visible; }
  .df-stage-center { min-height: 360px; }

  /* AGENTI — horizontalny scrollovaci pas namiesto 2 stlpcov (karty v2 su sirsie).
     mandatory snap + scroll-padding: karty sa VZDY usadia zarovnane (ziadne orezane
     polky kariet na hranach — Raul 4.7.) + skryty scrollbar (spodna sedivá tyc). */
  .df-agents {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 132px;
    overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 2px 2px 4px;
    scroll-snap-type: x mandatory; scroll-padding-left: 2px; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .df-agents::-webkit-scrollbar { display: none; }
  .df-agent-card { scroll-snap-align: start; }

  /* ORB — 380px je vacsie ako telefon; zmensime + skryjeme bocny clutter */
  .df-orb-wrap { width: 230px; height: 230px; }
  .df-orb-side-label { display: none; }
  .df-stage-row.top .df-orb-flag { display: none; }  /* NEURAL/SYNC flagy = desktop detail */
  .df-orb-label-top { font-size: 8px; letter-spacing: 0.18em; }

  /* ORB CISTY (4.7. per Raul): MOZOG/WIKI/DOKUMENT/DENNIK/IMPORT/TLMOCNIK su na desktope
     absolute v rohoch orb areny — na telefone (uzka arena) viseli PRIAMO CEZ orb.
     Mobile: orb hore v toku, nav ako USPORIADANA MRIEZKA 2 stlpce pod nim (rovnake sirky,
     ziadne rozhadzane chipy) — neparny posledny (IMPORT) + TLMOCNIK na celu sirku. */
  .df-orb-area { display: flex; flex-direction: column; align-items: center; }
  /* relative (nie static): orb-wrap MUSI ostat containing block pre absolute deti
     (hud/rings/core/graph — inset:0 na cely wrap); top/left reset ruby 50% offset */
  .df-orb-wrap { position: relative; top: auto; left: auto; transform: none; margin: 6px auto 12px; }
  .df-orb-nav, .df-orb-nav.right {
    position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(320px, 94%); gap: 6px; margin: 0 auto 6px;
  }
  .df-orb-nav > .df-orb-flag:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .df-orb-nav.right { grid-template-columns: 1fr; margin-top: 0; }
  .df-orb-nav .df-orb-flag { font-size: 10px; padding: 8px 6px; text-align: center; } /* tap target + zarovnanie */
  .df-orb-label-bot { font-size: 8px; }
  .df-orb-stats-strip { gap: 10px; font-size: 9px; padding: 3px 8px; }
  .df-orb-stats-strip span b { font-size: 10px; }

  /* mic-meter je na mobile nefunkcny (mic vlastni diktovanie) — skry nech transcript ma miesto */
  .df-mic-meter { display: none; }

  /* KPI strip — horizontalny scroll namiesto 7 stlpcov */
  .df-kpi-strip {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 124px;
    overflow-x: auto; overflow-y: hidden; padding: 8px 0 4px; gap: 6px; margin-top: 10px;
  }

  /* STATUS BAR — nech sa da scrollnut, nie orezat */
  .df-status-bar { gap: 12px; overflow-x: auto; height: auto; min-height: 26px; padding: 4px 10px; }

  /* command stack o nieco vyssi na dotyk */
  .df-command-stack { max-height: 180px; }

  /* LOGIN karta nech sa zmesti */
  .df-login-card { width: min(380px, 92vw); padding: 40px 24px; }
}

/* Velmi male telefony (<=430px) — jemne dotahy */
@media (max-width: 430px) {
  .df-orb-wrap { width: 200px; height: 200px; }
  .df-stage-center { min-height: 320px; }
  .df-topbar-brand-text { font-size: 10px; }
  .df-wordmark { font-size: 18px; letter-spacing: 0.22em; }
  .df-kpi-strip { grid-auto-columns: 112px; }
  .df-voice-rail .df-cmd-btn { font-size: 9px; padding: 5px 8px; }
}

/* ============================================================
   MOBILNA ERGONOMIA (<=1024px) — touch targety, klavesnica, safe-area
   Vsetko LEN za media query — desktop vzhlad sa NEMENI.
   ============================================================ */
@media (max-width: 1024px) {
  /* 16px input = Android/iOS pri fokuse NEzoomne stranku (zoom trigger je font < 16px) */
  .df-cmd-input, .df-login input, .df-focus-center .df-cmd-input { font-size: 16px; }

  /* touch targety min 44px (Apple HIG / Android 48dp) — sirka ostava podla obsahu.
     inline-flex: min-height plati aj na <a class="df-cmd-btn"> (HUB link) + obsah v strede */
  .df-cmd-btn, .df-opt-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
  .df-cmd-btn, .df-opt-toggle, .df-music-controls button { min-height: 44px; }
  /* MOBIL loop 8 web-other i2: mini prehravac v status bare (df-dash.js) mal play 10x18 a hlasitost
     7x18 px (flex ich stlacil, width 20px) -> tap sa minal alebo trafil nazov skladby.
     Status bar na mobile scrolluje do boku, sirka navyse sa zmesti. */
  .df-music-mini button { width: auto; min-width: 44px; min-height: 44px; flex: 0 0 auto; font-size: 14px; }
  .df-music-mini .track { min-width: 0; flex: 1 1 auto; }
  .df-conv-item { min-height: 44px; }
  /* MAM BACKUP KOD (kolo 4): 16px link medzi 2FA polom a VSTUP -> vedla-tap pali pokus o 2FA.
     44px hitbox + odstup od VSTUP; hidden stav (display:none) ostava, min-height ho nerusi */
  .df-login button.df-totp-alt { min-height: 44px; padding: 10px 12px; font-size: 12px; margin-bottom: 4px; }
  .df-conv-item .cr { padding: 10px; }              /* ceruzka (rename) = icon-only, vacsi hitbox */
  .df-team-row, .df-mail-row { min-height: 44px; }
  .df-orb-nav .df-orb-flag { padding: 8px 10px; }   /* MOZOG/WIKI/... nav linky */
  .df-decision-row .opt { padding: 8px 10px; }

  /* topbar CTA (TEMA/NOTIFIKACIE/...) sa pri 44px radsej zalomia nez pretlacia sirku */
  .df-topbar-right { flex-wrap: wrap; justify-content: flex-end; }

  /* FOCUS mod + klavesnica: vyska = realny visualViewport (--df-vvh z mobile-viewport.js)
     -> input rad nikdy neskonci POD otvorenou klavesnicou. Fallback 100% bez JS. */
  .df-focus { top: 0; left: 0; right: 0; bottom: auto; height: var(--df-vvh, 100%); }
  .df-focus-head { padding-top: max(8px, env(safe-area-inset-top)); }
  /* AUDIT 24.9.: composer (input + FOTO + FUEGO) je posledny riadok focusu -> bez inset-bottom
     lezal pod Samsung 3-tlacidlovym nav barom (tap = BACK/HOME). Pri otvorenej klavesnici
     Capacitor dava inset-bottom 0 -> ziadna dvojita medzera. Musi byt ZA pravidlom vyssie. */
  .df-focus-center {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  /* loop 6: box odratava PRESNE vertikalny padding kontajnera (safe-area insety), nie pevnych
     48 px - pri 3-tlacidlovej navigacii (~32+48 px) hlavicka s ZATVOR liezla pod status bar
     a spodok zoznamu pod BACK/HOME. --df-vvh ostava, aby sa box zmensil pri klavesnici. */
  .df-conv-modal-box { max-height: calc(var(--df-vvh, 100vh) - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); }
  .df-conv-modal {
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
}

/* Narocne animacie respektuju prefers-reduced-motion (orb dychanie/rotacie = lacne CSS,
   ale na slabom telefone / setrici mod sa vypnu; scanlines a HUD uz vypnute vyssie). */
@media (prefers-reduced-motion: reduce) {
  .df-orb-rings, .df-orb-core, .df-orb-face, .df-focus-orb-core, .df-boot-symbol,
  .df-topbar-status-pill .dot, .df-agent-card .status-led { animation: none; }
}

/* =================================================================
   LIGHT THEME — data-theme="light" na <html> (default je dark).
   Tokeny presne podla design handoff don-fuego-light.css. Jeden prepinac
   (#theme-toggle) prepne shell + MOZOG; ASANERA cita asn-theme kluc.
   ================================================================= */
:root[data-theme="light"] {
  --df-void:        #ECE8E1;
  --df-bg:          #F4F1EC;
  --df-bg-1:        #FFFFFF;
  --df-bg-2:        #FFFFFF;
  --df-bg-3:        #FBFAF7;
  --df-purple:      #6E55C8;
  --df-purple-deep: #4B3A8C;
  --df-purple-mid:  #6E55C8;
  --df-purple-soft: #6E5AA8;
  --df-lilac:       #7C5CE0;
  --df-fire:        #E5551E;
  --df-ember:       #C2790F;
  --df-fire-soft:   rgba(229,85,30,0.10);
  --df-ember-soft:  rgba(194,121,15,0.12);
  --df-mx-green:    #1E9E4A;
  --df-mx-dim:      rgba(30,158,74,0.45);
  --df-red:         #E5484D;
  --df-cyan:        #1F95B0;
  --df-text:        #241D33;
  --df-text-mid:    rgba(36,29,51,0.66);
  --df-text-dim:    rgba(36,29,51,0.46);
  --df-text-faint:  rgba(36,29,51,0.28);
  --df-line:        rgba(36,29,51,0.10);
  --df-line-strong: rgba(36,29,51,0.18);
  --df-glow-purple: rgba(110,85,200,0.18);
  --df-glow-fire:   rgba(229,85,30,0.18);
  /* web-other it2: fallbacky var(--df-amber,#F5B800) / var(--df-purple-light,#C1A7E2) su dark farby -
     na svetlom pozadi ~1,6:1 (TASK/MAIL odznaky, warn hodnoty kariet). Predtym len vo wiki.css. */
  --df-amber:        #8F6500;
  --df-purple-light: #6E55C8;
}

/* base */
[data-theme="light"] body { background: #F4F1EC; color: var(--df-text); }
/* mobil-audit-3 25.9.: html ma v zaklade VLASTNE tmave pozadie (html, body #050309) a na mobile
   (<=1024px) je body len tak vysoke ako obsah -> pod kratkou podstrankou (KALENDAR, DENNIK, IMPORT)
   ostal cierny pas a Samsung gesture bar (tmave ikony podla svetleho body) v nom zmizol. */
html[data-theme="light"] { background: #F4F1EC; }

/* stage atmosphere -> soft paper */
[data-theme="light"] .df-stage {
  background:
    radial-gradient(ellipse 70% 50% at 50% 35%, rgba(110,85,200,0.05), transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 92%, rgba(229,85,30,0.04), transparent 70%),
    linear-gradient(180deg, #F7F4EF 0%, #F1EDE6 100%);
}
[data-theme="light"] .df-stage::before {
  background-image:
    linear-gradient(rgba(36,29,51,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,29,51,0.035) 1px, transparent 1px);
}
[data-theme="light"] .df-stage::after { background: none; }
[data-theme="light"] .df-binary-rain { color: rgba(36,29,51,0.045); }

/* topbar */
[data-theme="light"] .df-topbar {
  background: linear-gradient(180deg, rgba(110,85,200,0.05), transparent);
  border-bottom: 1px solid var(--df-line);
}
[data-theme="light"] .df-wordmark { text-shadow: none; }
[data-theme="light"] .df-topbar-tc {
  color: var(--df-ember); border-color: rgba(194,121,15,0.4); background: rgba(194,121,15,0.08);
}

/* panels / cards */
[data-theme="light"] .df-panel { background: #FFFFFF; box-shadow: 0 1px 3px rgba(36,29,51,0.05); }
[data-theme="light"] .df-agent-card { background: #FFFFFF; box-shadow: 0 1px 3px rgba(36,29,51,0.05); }
[data-theme="light"] .df-agent-card:hover { background: #FBFAF7; }
[data-theme="light"] .df-agent-card.active { background: rgba(229,85,30,0.05); }

/* stage center + orb chrome */
[data-theme="light"] .df-stage-center {
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(110,85,200,0.05), transparent 70%);
}
[data-theme="light"] .df-orb-flag { background: rgba(255,255,255,0.88); border-color: rgba(110,85,200,0.2); }
[data-theme="light"] .df-orb-stats-strip { background: rgba(255,255,255,0.82); }

/* inputs / buttons */
[data-theme="light"] .df-cmd-input { background: #FFFFFF; }
[data-theme="light"] .df-cmd-input:focus { box-shadow: 0 0 0 3px rgba(229,85,30,0.12); }
[data-theme="light"] .df-cmd-btn.primary,
[data-theme="light"] .df-cmd-btn.primary:hover { color: #fff; }
[data-theme="light"] .df-login input { background: #FFFFFF; color: var(--df-text); }
[data-theme="light"] .df-login button { color: #fff; }

/* kpi + status bar */
[data-theme="light"] .df-kpi { background: #FFFFFF; box-shadow: 0 1px 3px rgba(36,29,51,0.05); }
[data-theme="light"] .df-status-bar { background: #FFFFFF; border-top: 1px solid var(--df-line); }

/* boot overlay */
[data-theme="light"] .df-boot { background: #F4F1EC; }
[data-theme="light"] .df-boot-symbol { filter: drop-shadow(0 0 18px rgba(110,85,200,0.3)); }
[data-theme="light"] .df-boot .word { text-shadow: none; }

/* login card + modaly + focus (nase komponenty s hardcoded tmavym pozadim) */
/* AUDIT 25.9. (mobil wo5): login mal vo svetlej teme tmave pozadie cez celu obrazovku, ale appka
   (SYSTEM_BARS_SYNC podla body #F4F1EC) dala status baru TMAVE ikony -> hodiny/bateria/gesta zmizli */
[data-theme="light"] .df-login { background: radial-gradient(ellipse 80% 60% at 50% 35%, rgba(117,59,189,0.10), transparent 60%), #F4F1EC; }
[data-theme="light"] .df-login-card { background: rgba(255,255,255,0.92); }
[data-theme="light"] .df-conv-modal { background: rgba(40,30,55,0.32); }
[data-theme="light"] .df-conv-modal-box { background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF7 100%); }
[data-theme="light"] .df-focus { background: rgba(244,241,236,0.97); }
[data-theme="light"] .df-focus-head { background: linear-gradient(180deg, rgba(110,85,200,0.06), #FFFFFF); }
[data-theme="light"] .df-conv-item:hover { background: rgba(110,85,200,0.08); }
[data-theme="light"] .df-conv-item.active { background: rgba(229,85,30,0.07); }
[data-theme="light"] .df-agent-card.offline:hover { background: #FFFFFF; }
[data-theme="light"] .df-mail-row:hover { background: rgba(110,85,200,0.07); }

/* orb jadro: na svetlej daj sfere jemny ramik nech nesplynie s papierom */
[data-theme="light"] .df-orb-graph { box-shadow: inset 0 0 24px 10px rgba(20,10,40,0.85); }

/* ── MOBILNY HARDENING PODSTRANOK (4.7.2026, mobilny audit 412px) ──
   Podstranky zdielaju hlavickove pasy (.top / .kdu-top / .wiki-top) s tlacidlami vpravo,
   ktore sa na mobile NEZALAMOVALI -> horizontalny overflow celej stranky (den +81px,
   cartero +307px, zoro +105px...). Zalamovanie tu = jeden fix pre vsetky stranky.
   Pozn.: .df-stage-row.top je grid (flex-wrap sa nan nevztahuje), kolizia nehrozi. */
@media (max-width: 700px) {
  .top, .kdu-top { flex-wrap: wrap; row-gap: 8px; padding-left: 12px; padding-right: 12px; }
  .wiki-top { flex-wrap: wrap; row-gap: 6px; height: auto; min-height: 48px; padding: 8px 12px; }
}

/* ============ DF GRID — modularny dashboard (df-grid.js, len desktop) ============ */
/* .gridded: stare tri stlpce + strip nahradza jedna grid plocha. Mobile sa tychto
   pravidiel nikdy nedotkne — df-grid.js ma mobil gate a triedu .gridded nikdy neprida. */
.df-app.gridded {
  grid-template-columns: 1fr;
  grid-template-rows: 50px minmax(0, 1fr) 26px;
  grid-template-areas: "topbar" "grid" "status";
}
.df-app.gridded > .df-left, .df-app.gridded > .df-center, .df-app.gridded > .df-right { display: none; }
.df-grid {
  grid-area: grid; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 56px; gap: 8px; padding: 8px 0;
  overflow-y: auto; overflow-x: hidden; min-height: 0;
}
.df-mod { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.df-mod > [data-mod] { flex: 1 1 auto; min-height: 0; min-width: 0; }
/* sekcie co boli sizovane rodicovskym stlpcom musia vyplnat modul */
.df-mod > .df-panel { display: flex; flex-direction: column; }
.df-mod .df-kpi-strip { padding: 0; overflow: hidden; }
/* chat: command stack rastie, composer drzi dole (rovnaka vnutorna logika ako v .df-center) */
.df-mod[data-mod-id="chat"] #chat-panel { display: flex; flex-direction: column; }
.df-mod[data-mod-id="chat"] .df-command-stack { flex: 1 1 auto; min-height: 0; max-height: none; }

/* ── DF GRID: adaptivny obsah modulov ──
   Agent karty sa preskladaju podla SIRKY modulu (auto-fill), nie 2 natiahnute stlpce.
   KPI dlazdice to iste. TIM cap 196px v module nedava zmysel — list vyplni modul. */
/* min 112px: 13 agentov v JEDNOM rade aj pri okne ~1500px (126px ich lamalo na 2 rady) */
.df-mod .df-agents { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); align-content: start; }
.df-mod .df-kpi-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.df-mod .df-team { flex: 1 1 auto; max-height: none; min-height: 0; }

/* ── DF GRID: farebne kodovanie modulov ──
   Kazdy modul ma vlastny jemny akcent (desaturovane tony ukotvene v DR palete):
   akcia=fuego, agenti=zelena(online), brief=amber, tim=lila, konverzacie=cyan,
   activity=rose, chat=violet. KPI a ORB bez akcentu (maju vlastne farby/stavy).
   Selektory pokryvaju [data-mod] (sekcia — funguje aj na mobile stacku) aj
   .df-mod[data-mod-id] (wrapper — edit cover dedi var). */
[data-mod="actions"],       .df-mod[data-mod-id="actions"]       { --mod-accent: #FF6B35; }
[data-mod="messages"],      .df-mod[data-mod-id="messages"]      { --mod-accent: #5B9DFF; }
[data-mod="conversations"], .df-mod[data-mod-id="conversations"] { --mod-accent: #6FE7FF; }
[data-mod="chat"],          .df-mod[data-mod-id="chat"]          { --mod-accent: #A78BFA; }
[data-mod="agents"],        .df-mod[data-mod-id="agents"]        { --mod-accent: #4ADE80; }
[data-mod="biznis"],        .df-mod[data-mod-id="biznis"]        { --mod-accent: #F5B800; }
[data-mod="activity"],      .df-mod[data-mod-id="activity"]      { --mod-accent: #FF7A93; }

.df-panel[data-mod] {
  border-color: color-mix(in srgb, var(--mod-accent, var(--df-purple-soft)) 32%, var(--df-line));
  border-top: 2px solid color-mix(in srgb, var(--mod-accent, var(--df-purple-soft)) 85%, transparent);
}
.df-panel[data-mod]::before, .df-panel[data-mod]::after { border-color: var(--mod-accent, var(--df-purple-soft)); }
.df-panel[data-mod] > .df-panel-head {
  color: color-mix(in srgb, var(--mod-accent, #E9D5FF) 80%, #F5F0FF);
  background: linear-gradient(90deg, color-mix(in srgb, var(--mod-accent, transparent) 16%, transparent), transparent 72%);
  border-bottom-color: color-mix(in srgb, var(--mod-accent, var(--df-purple-soft)) 42%, transparent);
}
.df-panel[data-mod] > .df-panel-head .slash { color: var(--mod-accent, var(--df-fire)); }
.df-panel[data-mod] > .df-panel-head .right { color: color-mix(in srgb, var(--mod-accent, #C1A7E2) 60%, #8a7fa8); }
/* wash zhora — len dark tema (light si drzi vlastne povrchy) */
html[data-theme="dark"] .df-panel[data-mod] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--mod-accent, transparent) 13%, rgba(20, 8, 42, 0.55)), color-mix(in srgb, var(--mod-accent, transparent) 4%, rgba(20, 8, 42, 0.55)) 62%);
}
/* SPRAVY: zdrojove loga (Gmail/Slack) v badge riadku */
.df-act-badge .src-ico { width: 11px; height: 11px; display: inline-block; vertical-align: -2px; margin-right: 4px; }

/* Agent HLAVY (5.7. "nad matador daj tuto hlavu"): 3D holo hlava v hornej casti karty.
   Kazda karta ma slot (vertikalne roztiahnutie); bez modelu = placeholder podstavec
   (dashed kruh + glow) — modely agentov sa doplnaju postupne. */
.df-agent-head { position: relative; height: 118px; margin: -8px -9px 5px; overflow: hidden; border-bottom: 1px dashed rgba(193, 167, 226, 0.14); background: radial-gradient(ellipse 60% 45% at 50% 62%, rgba(124, 79, 166, 0.16), transparent 75%); }
.df-agent-head canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* mobil: staticky webp snapshot hlavy namiesto 3D canvasu (WebGL kontext limit telefonu) */
.df-agent-head img.head-snap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* placeholder: prazdny hologram podstavec (kruh + zaklad) kym agent nema model */
.df-agent-head.ph::before { content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; transform: translate(-50%, -58%); border: 1px dashed rgba(124, 79, 166, 0.45); border-radius: 50%; }
.df-agent-head.ph::after { content: ""; position: absolute; left: 50%; bottom: 12px; width: 46px; height: 8px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(154, 108, 240, 0.45), transparent 70%); }

/* Agent karta v4 (5.7. "karty viac na vysku, agenti vedla seba"): ZVISLA karta —
   hlava (LED vpravo hore + meno + domena) hore, 1-3 kpi riadky dole. V gridovom rade
   maju vsetky rovnaku vysku (stretch), data su pritlacene k spodku (margin-top auto).
   Ked karta dostane stats (has-stats), povodna jednoriadkova stat-line sa skryje. */
.df-agent-card { flex-direction: column; align-items: stretch; gap: 3px; padding: 8px 9px 7px; }
.df-agent-card .status-led { position: absolute; top: 8px; right: 8px; }
.df-agent-card .nm-col { flex: 0 0 auto; padding-right: 12px; }
.df-agent-card .stat-line { margin-top: auto; }
.df-agent-card .card-stats { margin-top: auto; min-width: 0; border-top: 1px dashed rgba(193, 167, 226, 0.15); padding-top: 3px; }
.df-agent-card .card-stats:empty { display: none; }
.df-agent-card.has-stats .stat-line { display: none; }
/* placeholder pri tahani karty (df-agent-order.js) */
.df-drag-ph { outline: 1px dashed rgba(255, 107, 53, 0.7); background: rgba(255, 107, 53, 0.08); box-sizing: border-box; }
.df-agent-card .cs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 9px; letter-spacing: 0.08em; padding-top: 3px; }
.df-agent-card .cs-row .cs-l { color: var(--df-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-agent-card .cs-row .cs-v { color: var(--df-ember); font-weight: 700; font-size: 11px; white-space: nowrap; }
.df-agent-card .cs-row.ok .cs-v { color: var(--df-mx-green); }
.df-agent-card .cs-row.bad .cs-v { color: var(--df-red, #FF3355); }
.df-agent-card .cs-row.warn .cs-v { color: var(--df-amber, #F5B800); }
/* AI naklady v status bare (nahradili NAKLADY dlazdicu) */
.df-status-bar #sb-cost.crit { color: var(--df-red, #FF3355); }

/* BIZNIS modul: plnenie planu (MATADOR) + vyroba/objednavky (BENITO) */
.df-biz { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; overflow-y: auto; min-height: 0; }
.df-biz-block { display: block; padding: 10px 12px; background: rgba(20, 8, 42, 0.5); border: 1px solid var(--df-line); text-decoration: none; color: var(--df-text); }
.df-biz-block:hover { border-color: var(--df-amber, #F5B800); }
.df-biz-head { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--df-text-dim); margin-bottom: 6px; }
.df-biz-flag { margin-left: auto; font-size: 9px; letter-spacing: 0.1em; padding: 1px 6px; border: 1px solid; }
.df-biz-flag.ok   { color: var(--df-mx-green); border-color: rgba(0,255,65,0.4); }
.df-biz-flag.warn { color: var(--df-amber, #F5B800); border-color: rgba(245,184,0,0.4); }
.df-biz-flag.bad  { color: var(--df-red, #FF3355); border-color: rgba(255,51,85,0.4); }
.df-biz-big { font-family: var(--f-mono); font-size: 20px; font-weight: 700; color: var(--df-ember); }
.df-biz-big .sub { font-size: 11px; font-weight: 400; color: var(--df-text-dim); }
.df-biz-bar { position: relative; height: 6px; background: rgba(193,167,226,0.12); margin: 8px 0 6px; }
.df-biz-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--df-mx-green); }
.df-biz-bar i.warn { background: var(--df-amber, #F5B800); }
.df-biz-bar i.bad { background: var(--df-fire); }
.df-biz-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--df-text); opacity: 0.8; } /* ocakavane k dnu */
.df-biz-note { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--df-text-dim); }
.df-biz-kpis { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.df-biz-kpi { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--df-text-dim); white-space: nowrap; }
.df-biz-kpi b { font-size: 16px; font-weight: 700; color: var(--df-ember); margin-right: 2px; }
.df-biz-kpi.bad b { color: var(--df-red, #FF3355); }
.df-biz-kpi.ok b { color: var(--df-mx-green); }
.df-biz-err { font-family: var(--f-mono); font-size: 10px; color: var(--df-text-dim); opacity: 0.8; }

/* edit cover preberie akcent modulu */
.df-mod .df-mod-cover { border-color: color-mix(in srgb, var(--mod-accent, #FF6B35) 60%, transparent); }
.df-mod .df-mod-title { color: var(--mod-accent, #FF6B35); }
.df-mod .df-mod-rz.se { border-right-color: var(--mod-accent, #FF6B35); border-bottom-color: var(--mod-accent, #FF6B35); }

/* ── DF GRID MOBIL (5.7. "sprav to cele pre mobil aj"): sekcie POD SEBOU v poradi
   layoutu z PC (server sync, panel dash), ▲▼ reorder v LAYOUT mode. Ziadny drag
   (bije sa so scrollom — drag-mode incident na WebView). ── */
@media (max-width: 768px), (pointer: coarse) {
  .df-app.gridded { display: flex; flex-direction: column; height: auto; max-height: none; overflow: visible; }
  .df-grid.stack { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; overflow: visible; min-height: 0; }
  .df-grid.stack .df-mod { display: flex; flex-direction: column; }
  /* zrkadlo mobilnych pravidiel co klucovali na .df-left/.df-right (sekcie su reparentnute) */
  .df-grid.stack .df-mod > .df-panel { flex: none !important; }
  .df-grid.stack .df-stage-center { min-height: 360px; }
  /* MOBIL AUDIT 24.9. kolo 4: desktop pravidlo chat modulu (max-height:none, specificita 0,3,0)
     bilo mobilny strop 180px -> #chat-log rastol na celu historiu (60-200 riadkov), composer
     + rail skoncili tisice px nizsie a scrollChat nic nerobil. Na telefone konecny strop. */
  .df-grid.stack .df-mod[data-mod-id="chat"] .df-command-stack { flex: none; max-height: 45vh; max-height: clamp(180px, 45dvh, 420px); overflow-y: auto; }
  /* ▲▼ reorder lista — len v LAYOUT mode; touch targety min 44px */
  .df-mod-mbar { display: none; align-items: center; gap: 8px; padding: 5px 10px; border: 1px dashed rgba(255, 107, 53, 0.55); background: rgba(255, 107, 53, 0.06); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: #FF6B35; }
  .df-mod-mbar .t { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .df-mod-mbar .df-cmd-btn { min-width: 48px; min-height: 36px; font-size: 12px; }
  body.df-grid-edit .df-mod-mbar { display: flex; }
}

/* ── DF GRID EDIT MOD ── */
.df-mod-cover {
  position: absolute; inset: 0; z-index: 40; display: none;
  align-items: center; justify-content: center;
  background: rgba(15,10,24,0.55); border: 1px dashed rgba(255,107,53,0.55);
  cursor: grab; user-select: none;
}
body.df-grid-edit .df-mod-cover { display: flex; }
.df-mod-title { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; color: #FF6B35; pointer-events: none; }
.df-mod-rz { position: absolute; z-index: 41; }
.df-mod-rz.e  { top: 0; right: -3px; width: 8px; height: 100%; cursor: ew-resize; }
.df-mod-rz.s  { left: 0; bottom: -3px; width: 100%; height: 8px; cursor: ns-resize; }
.df-mod-rz.se { right: -4px; bottom: -4px; width: 16px; height: 16px; cursor: nwse-resize; border-right: 2px solid #FF6B35; border-bottom: 2px solid #FF6B35; }
.df-mod.dragging { opacity: 0.92; z-index: 90; }
.df-grid-ph { border: 1px dashed rgba(255,107,53,0.8); background: rgba(255,107,53,0.10); }
body.df-grid-edit { user-select: none; }

/* =================================================================
   MOBIL UX (24.9.2026, Raul: "zle sa zapina mikrofon, nie je to intuitivne").
   html.df-mobile nastavuje inline skript v index.html (rovnaka detekcia ako IS_MOBILE
   v app.js) -> desktop ani uzke desktop okno sa NEMENIA.
   ================================================================= */

/* [hidden] MUSI vyhrat nad mobilnym display:inline-flex (touch blok vyssie) — inak MILNIK
   (#opt-rec-mark hidden kym nebezi REC) svietil na telefone stale. */
.df-cmd-btn[hidden], .df-opt-toggle[hidden] { display: none !important; }

/* MIC FAB: na Folde bol #voice-btn az pod situaciami a orbom, medzi 7 rovnakymi tlacidlami.
   FAB = to iste co #voice-btn (window.dfOrbTap). Farba + popis z FAB[data-vstate] = HLASOVY
   stav (mobileVoiceUi v app.js), nie chat turn z .df-app[data-mode] (kolo 5: pisany chat svietil PREMYSLAM). Kruh = rovnaky mini-orb ako
   #df-vw-orb na podstrankach (orb je jedina vynimka z border-radius 0). */
.df-mic-fab { display: none; }
html.df-mobile .df-mic-fab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 30;
  width: 68px; height: 68px; padding: 0; border: 2px solid #7C4FA6; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #C084FC 0%, #753BBD 32%, #512D6D 62%, #240F47 100%);
  color: #F5F0FF; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.6), 0 0 18px rgba(117,59,189,0.6), 0 6px 20px rgba(0,0,0,0.55);
  transition: box-shadow .2s, border-color .2s;
}
html.df-mobile .df-mic-fab:active { filter: brightness(1.25); }
/* MOBIL wo4 (25.9.): farba EXPLICITNE - stranky s vlastnym .lbl pravidlom (matador: color var(--muted))
   inak prefarbili stav FABu na sivu (v light teme takmer neviditelny). */
html.df-mobile .df-mic-fab .lbl { font-family: var(--f-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.12em; line-height: 1; color: #F5F0FF; }
html.df-mobile .df-mic-fab .lbl::after { content: 'HOVOR'; }
html.df-mobile .df-mic-fab[data-vstate="listening"] {
  border-color: #00FF41; animation: df-fab-listen 1.3s ease-in-out infinite;
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.6), 0 0 22px rgba(0,255,65,0.6), 0 6px 20px rgba(0,0,0,0.55);
}
html.df-mobile .df-mic-fab[data-vstate="listening"] .lbl::after { content: 'POSLI'; }
html.df-mobile .df-mic-fab[data-vstate="warming"] { border-color: #F5B800; box-shadow: inset 0 -6px 14px rgba(0,0,0,0.6), 0 0 14px rgba(245,184,0,0.4), 0 6px 20px rgba(0,0,0,0.55); }
html.df-mobile .df-mic-fab[data-vstate="warming"] .lbl::after { content: 'MOMENT'; }
html.df-mobile .df-mic-fab[data-vstate="thinking"] {
  border-color: #F5B800;
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.6), 0 0 22px rgba(245,184,0,0.6), 0 6px 20px rgba(0,0,0,0.55);
}
html.df-mobile .df-mic-fab[data-vstate="thinking"] .lbl::after { content: 'PREMYSLAM'; font-size: 7px; }
html.df-mobile .df-mic-fab[data-vstate="speaking"] {
  border-color: #FF6B35;
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.6), 0 0 26px rgba(255,107,53,0.75), 0 6px 20px rgba(0,0,0,0.55);
}
html.df-mobile .df-mic-fab[data-vstate="speaking"] .lbl::after { content: 'PRERUS'; }
html.df-mobile .df-mic-fab[data-vstate="sleep"] { border-color: #F5B800; filter: saturate(0.4); }
html.df-mobile .df-mic-fab[data-vstate="sleep"] .lbl::after { content: 'ZOBUD'; }
html.df-mobile .df-mic-fab[data-vstate="error"] {
  border-color: #FF3355;
  box-shadow: inset 0 -6px 14px rgba(0,0,0,0.6), 0 0 22px rgba(255,51,85,0.7), 0 6px 20px rgba(0,0,0,0.55);
}
html.df-mobile .df-mic-fab[data-vstate="error"] .lbl::after { content: 'ZNOVA'; }
/* loop2 i2: vycerpany Gemini limit (mobileVoiceUi key 'budget') — bez popisu FAB ostal bez textu */
html.df-mobile .df-mic-fab[data-vstate="budget"] { border-color: #FF3355; filter: saturate(0.5); box-shadow: inset 0 -6px 14px rgba(0,0,0,0.6), 0 0 14px rgba(255,51,85,0.4), 0 6px 20px rgba(0,0,0,0.55); }
html.df-mobile .df-mic-fab[data-vstate="budget"] .lbl::after { content: 'LIMIT'; }
@keyframes df-fab-listen {
  0%, 100% { box-shadow: inset 0 -6px 14px rgba(0,0,0,0.6), 0 0 14px rgba(0,255,65,0.45), 0 6px 20px rgba(0,0,0,0.55); }
  50%      { box-shadow: inset 0 -6px 14px rgba(0,0,0,0.6), 0 0 32px rgba(0,255,65,0.85), 0 6px 20px rgba(0,0,0,0.55); }
}
/* pisanie (klavesnica hore) a LAYOUT mod: FAB by prekryval composer / ▲▼ listu.
   AUDIT 24.9.: podla KLAVESNICE (html.df-kbd z mobile-viewport.js), nie podla :focus — Back
   zavrie klavesnicu, focus ostane a FAB predtym zmizol. :focus fallback len bez visualViewport. */
html.df-mobile.df-kbd .df-mic-fab,
html.df-mobile:not(.df-vv) .df-app:has(input:focus, textarea:focus) .df-mic-fab,
html.df-mobile body.df-grid-edit .df-mic-fab { display: none; }
/* koniec stranky nesmie ostat pod FAB-om */
html.df-mobile .df-app { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

/* VOICE RAIL na telefone: stav hore na vlastnom riadku (predtym 9px ellipsis medzi tlacidlami),
   hlavne tlacidlo na celu sirku, toggly 2x2 (na 340px cover screene sa inak rozsypali do 3-4 radov). */
html.df-mobile .df-app .df-voice-rail { gap: 6px; padding: 8px 10px; }
html.df-mobile .df-app .df-voice-state {
  order: -1; flex: 1 1 100%; font-size: 11px; letter-spacing: 0.12em;
  white-space: normal; overflow: visible; line-height: 1.35;
}
html.df-mobile .df-app .df-voice-rail #voice-btn { flex: 1 1 100%; min-height: 52px; font-size: 12px; font-weight: 700; }
html.df-mobile .df-app .df-voice-rail #dictate-btn,
html.df-mobile .df-app .df-voice-rail #voice-stop,
html.df-mobile .df-app .df-voice-rail #chat-expand,
html.df-mobile .df-app .df-voice-rail .df-more { flex: 1 1 auto; }
html.df-mobile .df-app .df-voice-rail .df-more summary { display: flex; width: 100%; }
html.df-mobile .df-app .df-voice-rail .df-opt-toggle { flex: 1 1 calc(50% - 6px); min-width: 0; font-size: 10px; padding: 4px 6px; }
html.df-mobile .df-app .df-voice-transcript { flex: 1 1 100%; white-space: normal; }
html.df-mobile .df-app .df-voice-transcript:empty { display: none; }
/* zelena = LEN ked realne pocuva (data-mode). voice.on na mobile ostava true cely cas, aj ked
   mic po 12s ticha vypol -> "zelene a nepocuva". */
html.df-mobile .df-app:not([data-mode="listening"]) #voice-btn.on:not(.asleep) { border-color: var(--df-line-strong); color: var(--df-text); }
html.df-mobile .df-app[data-mode="listening"] #voice-btn { border-color: var(--df-mx-green); color: var(--df-mx-green); background: rgba(0,255,65,0.08); }
/* VIAC menu (MOBIL AUDIT 24.9. kolo 3b): VIAC je na telefone vpravo v rail -> menu s left:0 trcalo
   75px za pravy okraj (html overflow-x:hidden = orezane "DOKUN", "+ NOV"). Ukotvene vpravo rastie
   dolava do obrazovky; band flip hore/dole (fuego-shell) sa meni len top/bottom. */
html.df-mobile .df-app .df-voice-rail .df-more-menu { left: auto; right: 0; max-width: calc(100vw - 20px); }
/* COMPOSER na cover screene (<=480px): label "RAUL >" + FOTO + FUEGO z 44px tlacidiel nechali
   inputu ~90-100px (8-10 znakov). Label prec, uzsie tlacidla (vyska 44px ostava) -> input ~170px+. */
@media (max-width: 480px) {
  html.df-mobile .df-cmd-input-row .label { display: none; }
  html.df-mobile .df-cmd-input-row { gap: 6px; padding-left: 10px; padding-right: 10px; }
  html.df-mobile .df-cmd-input-row .df-cmd-actions { gap: 4px; }
  html.df-mobile .df-cmd-input-row .df-cmd-btn { padding: 6px 8px; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  html.df-mobile .df-mic-fab[data-vstate="listening"] { animation: none; }
}

/* PODSTRANKY: voice widget (#df-vw, inline CSS z voice-widget.js) mal 8px tlacidla ~20px vysoko
   -> na Folde mis-tap (MYSLENIE miesto DIKTAFON). #df-vw prefix = vyssia specificita nez
   neskor injektovany <style>.
   PERF 24.9.: LEN dotyk (pointer:coarse). max-width:1024px nafukoval tlacidla aj v uzkom
   desktop okne (mys) — tam 44px netreba. */
@media (pointer: coarse) {
  #df-vw #df-vw-tools button { min-height: 44px; font-size: 11px; padding: 8px 10px; }
  #df-vw #df-vw-x { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 16px; }
  #df-vw #df-vw-mute { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 10px; }
  /* AUDIT 24.9. kolo 3: po 44px tlacidlach (3 rady ~160px) + log 46vh bol plavajuci panel pri
     otvorenej klavesnici vyssi nez viewport -> hlavicka s X / HLAS nad hornou hranou, fixed = neda
     sa doscrollovat. Panel strop podla dynamickeho viewportu (dvh sa zmensi s klavesnicou), log
     (overflow-y:auto) zoberie skrat, tools v 1 rade so scrollom do boku. Inline mod ma vlastne. */
  #df-vw:not(.inline) #df-vw-panel { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  #df-vw:not(.inline) #df-vw-log { min-height: 60px; max-height: min(46vh, calc(100vh - 400px)); max-height: max(60px, min(46vh, calc(100dvh - 400px))); }
  #df-vw:not(.inline) #df-vw-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; }
  #df-vw:not(.inline) #df-vw-tools button { flex: 0 0 auto; }
}

/* MOBIL loop 8 web-other i2: filtre v hlavickach kokpitov (ZORO/NAKLADY ALL/SK/CZ, s DPH/bez DPH,
   OBDOBIE, OBNOVIT; VARGASITA 7 DNI/SK/CZ/KABELKY; MATADOR ALL/SK/CZ; CARTERO VIP/ZAMKNUT/RESET)
   mali na dotyku 24-28 px a segmenty sa dotykali -> SK/CZ vedla-tap = cisla zleho trhu / s DPH.
   LEN dotyk (pointer:coarse), mys bez zmeny. .seg > button (nie .seg): grafove .seg v NAKLADY su
   useky grafu, nie tlacidla. Bez display: [hidden] tlacidla ostanu skryte; <a class="btn">
   (AI NAKLADY) potrebuje inline-flex, inak min-height na inline prvku neplati. */
@media (pointer: coarse) {
  .seg { gap: 4px; }
  .seg > button, .top .btn, .dates .btn, .ctrls .btn, .dates input { min-height: 44px; min-width: 44px; box-sizing: border-box; touch-action: manipulation; }
  .top a.btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* UPDATE BANNER (24.9.2026, Android audit): nova verzia appky (SW update) sa uz NEreloaduje
   sama uprostred rozhovoru (pwa.js -> event 'df-sw-update'). Banner = rozhodnutie cloveka.
   Markup (app.js): <div class="df-update-banner" role="status"><span class="msg">..</span>
   <button class="df-update-go">AKTUALIZOVAT</button><button class="df-update-later">NESKOR</button></div> */
/* kolo 4: FIXED, nie sticky - sticky je v toku a na desktope (body overflow hidden + #app 100vh)
   odtlacil kokpit o ~60px dole a orezal status riadok + composer */
.df-update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  background: #0F0A18; border-bottom: 2px solid #FF6B35; border-radius: 0;
  color: #F5F0FF; font-family: var(--f-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px; letter-spacing: 0.08em; line-height: 1.35;
}
/* loop5: APK + SW banner v spolocnom stacku #df-banners (app.js/pwa.js) - v toku pod sebou;
   safe-area padding len prvy (APK banner ma padding inline -> !important). */
#df-banners > .df-update-banner { position: static !important; }
#df-banners > .df-update-banner:not(:first-child) { padding-top: 8px !important; }
.df-update-banner[hidden] { display: none !important; }
.df-update-banner .msg { flex: 1 1 160px; min-width: 0; }
.df-update-banner button {
  min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 0; cursor: pointer;
  font: inherit; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.df-update-banner .df-update-go { background: #FF6B35; border: 1px solid #FF6B35; color: #0F0A18; }
.df-update-banner .df-update-later { background: #512D6D; border: 1px solid #7C4FA6; color: #E9D5FF; }
.df-update-banner button:focus-visible { outline: 2px solid #F5B800; outline-offset: 2px; }
[data-theme="light"] .df-update-banner { background: #F5F0FF; color: #1a1025; }

/* =================================================================
   MOBILNA NAVIGACIA + CITATELNOST (15.10.2026, krok 2 "lahke ako Promedea").
   Spodnu listu (HUB / AGENTI / HOVOR / TRZBY / Q4) kresli df-tabbar.js (html.df-tb). Tu: ergonomia
   hubu a kokpitov na telefone. LEN @media (max-width:768px) + html.df-mobile -> desktop bez zmeny.
   ================================================================= */
@media (max-width: 768px) {
  /* HUB hlavicka: AGENTI je v liste, hodiny ma telefon -> prec. Nastroje (Mostik/Kokpit, HLADAT,
     SVETLA, PRIPOJENIA, NOTIFIKACIE) v JEDNOM riadku so scrollom do boku: PRIPOJENIA/NOTIFIKACIE
     sa ukazu az po nacitani a zalomeny riadok predtym posunul cely hub o ~66 px (CLS). */
  html.df-tb:not(.df-tb-off).df-home .df-topbar .df-topbar-right > a[href="/agenti"],
  html.df-tb:not(.df-tb-off).df-home .df-topbar #clock { display: none !important; }
  html.df-mobile.df-home .df-topbar .df-topbar-right,
  html.df-mobile.df-home .df-topbar .home-tools {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  html.df-mobile.df-home .df-topbar .df-topbar-right { min-height: 44px; align-items: center; }
  html.df-mobile.df-home .df-topbar .df-topbar-right::-webkit-scrollbar { display: none; }
  html.df-mobile.df-home .df-topbar .home-tools { flex: 0 0 auto; overflow: visible; }
  /* inline style="font-size:9px" na TEMA/PRIPOJENIA/NOTIFIKACIE -> !important */
  html.df-mobile .df-topbar .df-cmd-btn { font-size: 12px !important; padding: 0 12px !important; min-height: 44px; }
  html.df-mobile .df-topbar #weather { font-size: 12px; }
  html.df-mobile .df-topbar-status-pill, html.df-mobile #conn-txt { font-size: 11px; }
  html.df-mobile .df-topbar-brand-text { font-size: 11px; }

  /* Mostik: tlacidla a riadok aktualnosti (39 px -> 44 px; rezerva 3 riadkov = text sa po
     nacitani zmeni z "Nacitam..." na 2-3 riadky bez posunu situacii pod nim) */
  html.df-mobile .bridge-button { min-height: 44px; font-size: 14px; touch-action: manipulation; }
  html.df-mobile .bridge-freshness { font-size: 13px; line-height: 1.5; min-height: 4.5em; }
  html.df-mobile .bridge-eyebrow { font-size: 11px; }
  html.df-mobile .bridge-cards:empty { min-height: 96px; }

  /* Kokpit: filtre akcii (20 px), nav dlazdice pod orbom (28 px), hlavicky panelov, karty timu */
  html.df-mobile .df-act-chip { min-height: 44px; padding: 0 12px; font-size: 12px; touch-action: manipulation; }
  html.df-mobile .df-act-filters { gap: 6px; flex-wrap: wrap; }
  html.df-mobile .df-orb-tiles { gap: 6px; justify-content: center; }
  html.df-mobile .df-orb-tiles .df-orb-flag {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
    padding: 0 12px; font-size: 12px; box-sizing: border-box; touch-action: manipulation;
  }
  html.df-mobile .df-panel-head { font-size: 12px; }
  html.df-mobile .df-panel-head .right { font-size: 11px; }
  html.df-mobile .df-agent-card { min-height: 56px; }
  html.df-mobile .df-agent-card .name { font-size: 12px; }
  html.df-mobile .df-agent-card .role { font-size: 11px; }
  html.df-mobile .df-agent-card .stat-line .v { font-size: 12px; }
  html.df-mobile .df-act-empty { font-size: 13px; }
  html.df-mobile .df-orb-label-top, html.df-mobile .df-orb-label-bot { font-size: 11px; }
  html.df-mobile .df-orb-stats-strip { font-size: 11px; }
  html.df-mobile .df-orb-stats-strip span b { font-size: 12px; }
  html.df-mobile .df-status-bar .item { font-size: 11px; }
  /* mozog/AI riadky v kokpite (9-10 px) */
  html.df-mobile .df-biz-head { font-size: 11px; }
  html.df-mobile .df-biz-err { font-size: 12px; }
  /* hlasovy rail + composer: <=430 px pravidlo davalo 9 px */
  html.df-mobile .df-voice-rail .df-cmd-btn, html.df-mobile .df-cmd-input-row .df-cmd-btn { font-size: 12px; }
  html.df-mobile .df-app .df-voice-rail .df-opt-toggle { font-size: 11px; }
  html.df-mobile .df-cmd-input { min-height: 44px; box-sizing: border-box; }
  html.df-mobile #photo-btn { min-width: 44px; }
  /* inputy 16 px = iOS/Android pri fokuse nezoomuje */
  html.df-mobile input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.df-mobile select, html.df-mobile textarea { font-size: 16px; }

  /* Kokpity agentov: zbalit / skryt blok (40 px) a GABRIELITA filtre (28-36 px) */
  html.df-mobile .dfl-coll, html.df-mobile .dfl-hide, html.df-mobile .bl-coll, html.df-mobile .bl-hide { min-width: 44px; min-height: 44px; }
  html.df-mobile .pbtn { min-height: 44px; font-size: 13px; touch-action: manipulation; }
  html.df-mobile #p-from, html.df-mobile #p-to, html.df-mobile .erpcat { min-height: 44px; box-sizing: border-box; }
  html.df-mobile #prod-nopr { width: 22px; height: 22px; }
  html.df-mobile .badge, html.df-mobile .stav-badge { font-size: 11px; }

  /* akcie v riadkoch VYZADUJE AKCIU (8,5 px / ~16 px vysoke) */
  html.df-mobile .df-act-btns { gap: 6px; }
  html.df-mobile .df-act-btn, html.df-mobile.df-home[data-cockpit] .df-act-btn { min-height: 44px; min-width: 44px; padding: 0 12px; font-size: 12px; touch-action: manipulation; }
  /* KOKPIT (home-cockpit.css ma .df-home[data-cockpit="next"] ... = vyssia specificita) */
  html.df-mobile.df-home[data-cockpit] .df-orb-tiles .df-orb-flag { font-size: 12px; min-height: 44px; padding: 0 12px; }
  html.df-mobile.df-home[data-cockpit] .df-agent-card .name { font-size: 12px; }
  html.df-mobile.df-home[data-cockpit] .df-agent-card .role { font-size: 12px; }
  html.df-mobile.df-home[data-cockpit] .df-cmd-input { min-height: 44px; font-size: 16px; }
  html.df-mobile.df-home[data-cockpit] .home-kicker { font-size: 11px; }
  /* CLS: VYZADUJE AKCIU je na telefone prvy panel kokpitu - filtre + zoznam prisli az po fetchi
     a odsunuli orb/chat o ~100 px. Rezerva kym su prazdne (po nacitani ich nahradi obsah). */
  html.df-mobile .df-act-filters:empty { min-height: 44px; }
  html.df-mobile #actions:empty { min-height: 60px; }
  html.df-mobile.df-home[data-cockpit="next"] .home-attention:empty { min-height: 69px; }
}
/* hover len pre mys: na dotyku "prilepeny" hover po tapnuti nechaval chip/dlazdicu oranzovu */
@media (hover: none) {
  .df-act-chip:not(.on):hover { border-color: var(--df-line); color: var(--df-text-mid); }
  .df-agent-card:not(.active):hover { border-color: var(--df-line); background: rgba(20, 8, 42, 0.6); }
  [data-theme="light"] .df-agent-card:not(.active):hover { background: #FFFFFF; }
}