/* ─── Skiny (témata) — přepínají se přes ───────────── Výchozí = Midnight. Další témata jen přepisují proměnné; zbytek CSS je sdílený. */ :root, [data-theme="midnight"] { --bg: #0f1419; --panel: #1a212b; --elevated: #222b38; --border: #2b3543; --text: #d7dde5; --muted: #8a97a8; --accent: #4aa3df; --accent-fg: #06121c; --user: #4aa3df; --assist: #6fcf7f; --warn: #e0b341; --err: #e06a6a; --code-bg: #0d141d; --shadow: 0 2px 8px rgba(0, 0, 0, 0.35); --glow: 0 0 0 3px rgba(74, 163, 223, 0.18); --radius: 10px; } [data-theme="ocean"] { --bg: #0b1d2a; --panel: #102b3d; --elevated: #163a52; --border: #1f4a66; --text: #d6ecf5; --muted: #7fa6bd; --accent: #2fd0c8; --accent-fg: #042027; --user: #2fd0c8; --assist: #6fd99a; --warn: #f0c75e; --err: #ef7c7c; --code-bg: #0a2330; --shadow: 0 2px 10px rgba(0, 0, 0, 0.4); --glow: 0 0 0 3px rgba(47, 208, 200, 0.2); --radius: 10px; } [data-theme="nord"] { --bg: #2e3440; --panel: #3b4252; --elevated: #434c5e; --border: #4c566a; --text: #e5e9f0; --muted: #9aa5b8; --accent: #88c0d0; --accent-fg: #1c2530; --user: #88c0d0; --assist: #a3be8c; --warn: #ebcb8b; --err: #bf616a; --code-bg: #272c36; --shadow: 0 2px 10px rgba(0, 0, 0, 0.3); --glow: 0 0 0 3px rgba(136, 192, 208, 0.22); --radius: 10px; } [data-theme="dracula"] { --bg: #1e1f29; --panel: #282a36; --elevated: #343746; --border: #44475a; --text: #f8f8f2; --muted: #9da3b8; --accent: #bd93f9; --accent-fg: #15161e; --user: #8be9fd; --assist: #50fa7b; --warn: #f1fa8c; --err: #ff5555; --code-bg: #191a21; --shadow: 0 2px 12px rgba(0, 0, 0, 0.45); --glow: 0 0 0 3px rgba(189, 147, 249, 0.25); --radius: 10px; } [data-theme="light"] { --bg: #f4f6fa; --panel: #ffffff; --elevated: #eef1f6; --border: #d6dce6; --text: #1d2733; --muted: #5d6b7e; --accent: #2563eb; --accent-fg: #ffffff; --user: #2563eb; --assist: #1a9d5a; --warn: #b7791f; --err: #d6453d; --code-bg: #eef1f6; --shadow: 0 1px 4px rgba(20, 30, 50, 0.1); --glow: 0 0 0 3px rgba(37, 99, 235, 0.16); --radius: 10px; } /* ── Tématické skiny ── */ [data-theme="cyberpunk"] { --bg: #0a0a12; --panel: #12121f; --elevated: #1a1a2e; --border: #2a2a45; --text: #e8f9ff; --muted: #7a8aa0; --accent: #00f0ff; --accent-fg: #04121a; --user: #ff2a6d; --assist: #fcee0a; --warn: #ff9f1c; --err: #ff2a6d; --code-bg: #0d0d18; --shadow: 0 2px 14px rgba(0, 240, 255, 0.15); --glow: 0 0 0 3px rgba(0, 240, 255, 0.3); --radius: 8px; } [data-theme="synthwave"] { --bg: #1a0b2e; --panel: #241540; --elevated: #2d1b54; --border: #45286b; --text: #ffe7ff; --muted: #b08fcf; --accent: #ff2e97; --accent-fg: #1a0b2e; --user: #ff2e97; --assist: #00e5ff; --warn: #ffb648; --err: #ff5470; --code-bg: #150a26; --shadow: 0 2px 16px rgba(255, 46, 151, 0.18); --glow: 0 0 0 3px rgba(255, 46, 151, 0.28); --radius: 10px; } [data-theme="steampunk"] { --bg: #1c1610; --panel: #29211a; --elevated: #352b21; --border: #4a3c2c; --text: #ecdcc3; --muted: #a89377; --accent: #c8893f; --accent-fg: #1c1610; --user: #c8893f; --assist: #9caf66; --warn: #d8a657; --err: #c25b4a; --code-bg: #16110b; --shadow: 0 2px 10px rgba(0, 0, 0, 0.5); --glow: 0 0 0 3px rgba(200, 137, 63, 0.25); --radius: 6px; } [data-theme="matrix"] { --bg: #000800; --panel: #001a00; --elevated: #002200; --border: #0a3d0a; --text: #4dff4d; --muted: #2a8a2a; --accent: #00ff41; --accent-fg: #001000; --user: #00ff41; --assist: #7dff7d; --warn: #d4ff00; --err: #ff5555; --code-bg: #001200; --shadow: 0 0 12px rgba(0, 255, 65, 0.2); --glow: 0 0 0 3px rgba(0, 255, 65, 0.3); --radius: 4px; } [data-theme="gta6"] { --bg: #1a0f2e; --panel: #2a1545; --elevated: #3a1d5c; --border: #56286f; --text: #ffe0f0; --muted: #c08fb5; --accent: #ff5fa2; --accent-fg: #1a0f2e; --user: #ff5fa2; --assist: #45e0c0; --warn: #ffa94d; --err: #ff5470; --code-bg: #150a26; --shadow: 0 2px 16px rgba(255, 95, 162, 0.18); --glow: 0 0 0 3px rgba(255, 95, 162, 0.28); --radius: 12px; } /* ── Material Design (M3 dark baseline: fialová primary + teal secondary, kulaté rohy, měkké elevation stíny) ── */ [data-theme="material"] { --bg: #121212; --panel: #1e1e1e; --elevated: #2a2a2a; --border: #3a3a3a; --text: #e6e1e5; --muted: #9e97a3; --accent: #bb86fc; --accent-fg: #1c1122; --user: #bb86fc; --assist: #03dac6; --warn: #ffb74d; --err: #cf6679; --code-bg: #181818; --shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.25); --glow: 0 0 0 3px rgba(187, 134, 252, 0.24); --radius: 16px; } [data-theme="material-light"] { --bg: #f5f2fa; --panel: #ffffff; --elevated: #ece6f0; --border: #d5cfdd; --text: #1c1b1f; --muted: #625d67; --accent: #6750a4; --accent-fg: #ffffff; --user: #6750a4; --assist: #14876a; --warn: #9a6a00; --err: #b3261e; --code-bg: #efe9f4; --shadow: 0 1px 3px rgba(30, 20, 50, 0.12), 0 4px 12px rgba(30, 20, 50, 0.08); --glow: 0 0 0 3px rgba(103, 80, 164, 0.18); --radius: 16px; } /* ── Motivy podle známých aplikací (barevné ladění) ── */ [data-theme="facebook"] { --bg: #18191a; --panel: #242526; --elevated: #3a3b3c; --border: #4a4b4d; --text: #e4e6eb; --muted: #b0b3b8; --accent: #2d88ff; --accent-fg: #ffffff; --user: #2d88ff; --assist: #42b72a; --warn: #f7b928; --err: #f02849; --code-bg: #1c1d1e; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --glow: 0 0 0 3px rgba(45, 136, 255, 0.24); --radius: 8px; } [data-theme="twitter"] { --bg: #15202b; --panel: #1e2732; --elevated: #273340; --border: #38444d; --text: #f7f9f9; --muted: #8b98a5; --accent: #1d9bf0; --accent-fg: #ffffff; --user: #1d9bf0; --assist: #00ba7c; --warn: #ffd400; --err: #f4212e; --code-bg: #10171e; --shadow: 0 2px 8px rgba(0, 0, 0, 0.35); --glow: 0 0 0 3px rgba(29, 155, 240, 0.24); --radius: 16px; } [data-theme="instagram"] { --bg: #121212; --panel: #1c1c1e; --elevated: #262628; --border: #363638; --text: #f5f5f5; --muted: #a8a8a8; --accent: #e1306c; --accent-fg: #ffffff; --user: #e1306c; --assist: #833ab4; --warn: #f77737; --err: #ed4956; --code-bg: #161617; --shadow: 0 2px 10px rgba(225, 48, 108, 0.12); --glow: 0 0 0 3px rgba(225, 48, 108, 0.24); --radius: 14px; } [data-theme="netflix"] { --bg: #141414; --panel: #1f1f1f; --elevated: #2a2a2a; --border: #3d3d3d; --text: #ffffff; --muted: #999999; --accent: #e50914; --accent-fg: #ffffff; --user: #e50914; --assist: #46d369; --warn: #e6b800; --err: #ff4d4d; --code-bg: #181818; --shadow: 0 3px 12px rgba(0, 0, 0, 0.6); --glow: 0 0 0 3px rgba(229, 9, 20, 0.28); --radius: 6px; } [data-theme="hbo"] { --bg: #0b0612; --panel: #16101f; --elevated: #211730; --border: #362548; --text: #f1eaff; --muted: #a291bd; --accent: #a15eff; --accent-fg: #ffffff; --user: #a15eff; --assist: #3dd6c3; --warn: #ffb648; --err: #ff5470; --code-bg: #100a18; --shadow: 0 2px 14px rgba(161, 94, 255, 0.16); --glow: 0 0 0 3px rgba(161, 94, 255, 0.26); --radius: 10px; } [data-theme="spotify"] { --bg: #121212; --panel: #181818; --elevated: #242424; --border: #333333; --text: #ffffff; --muted: #a7a7a7; --accent: #1db954; --accent-fg: #04160a; --user: #1db954; --assist: #4687d6; --warn: #ffa42b; --err: #f15e6c; --code-bg: #161616; --shadow: 0 3px 12px rgba(0, 0, 0, 0.55); --glow: 0 0 0 3px rgba(29, 185, 84, 0.26); --radius: 12px; } [data-theme="youtube"] { --bg: #0f0f0f; --panel: #1c1c1c; --elevated: #272727; --border: #3d3d3d; --text: #f1f1f1; --muted: #aaaaaa; --accent: #ff0000; --accent-fg: #ffffff; --user: #ff4e45; --assist: #3ea6ff; --warn: #ffd600; --err: #ff4e45; --code-bg: #141414; --shadow: 0 2px 8px rgba(0, 0, 0, 0.5); --glow: 0 0 0 3px rgba(255, 0, 0, 0.22); --radius: 12px; } [data-theme="discord"] { --bg: #1e1f22; --panel: #2b2d31; --elevated: #313338; --border: #3f4147; --text: #dbdee1; --muted: #949ba4; --accent: #5865f2; --accent-fg: #ffffff; --user: #5865f2; --assist: #23a559; --warn: #f0b232; --err: #f23f43; --code-bg: #232428; --shadow: 0 2px 10px rgba(0, 0, 0, 0.4); --glow: 0 0 0 3px rgba(88, 101, 242, 0.26); --radius: 8px; } [data-theme="whatsapp"] { --bg: #111b21; --panel: #202c33; --elevated: #2a3942; --border: #374650; --text: #e9edef; --muted: #8696a0; --accent: #25d366; --accent-fg: #06130b; --user: #25d366; --assist: #53bdeb; --warn: #ffbc38; --err: #f15c6d; --code-bg: #0d161b; --shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --glow: 0 0 0 3px rgba(37, 211, 102, 0.24); --radius: 10px; } /* ── „Jarvis" (#334) — moderní tmavý dashboard: navy gradient pozadí + glassmorphism karty + modrý glow (dle reference). Proměnné níže; scoped vizuální vrstva (gradient body, blur panely) je na KONCI souboru pod „Jarvis motiv — glassmorphism vrstva". ── */ [data-theme="jarvis"] { --bg: #080c17; --panel: #111a2e; --elevated: #17233c; --border: #263450; --text: #dce6f5; --muted: #8496b3; --accent: #4d9fff; --accent-fg: #04101f; --user: #4d9fff; --assist: #5fe3c0; --warn: #f0b445; --err: #ff6b6b; --code-bg: #0a1020; --shadow: 0 6px 24px rgba(4, 10, 26, 0.5); --glow: 0 0 0 3px rgba(77, 159, 255, 0.28); --radius: 16px; } * { box-sizing: border-box; } body { margin: 0; height: 100vh; display: flex; flex-direction: column; font-family: system-ui, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); } /* Plynulý přechod barev při přepnutí skinu. */ body, .panel, .log, button, input, select, textarea, .tab, fieldset, #voice-settings { transition: background-color 0.25s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* Vypnout NATIVNÍ pull-to-refresh WebView/Chrome (#293, re-report #110/#137): tažení dolů nesmí refreshovat stránku ani propagovat overscroll na prohlížeč, ani když je vnitřní scroll kontejner náhodou na svém vrcholu (dvojí scroll ve WebView kvůli dynamické adresní liště). Vlastní řízený pull-to-refresh (ptrInit v app.js, spouští se JEN na skutečném vrcholu přes atTop) tím zůstává nedotčený. */ html, body { overscroll-behavior-y: contain; } header { display: flex; align-items: baseline; gap: 1rem; /* Safe-area: aby hlavička nelezla pod systémový status bar / výřez (WebView edge-to-edge, PWA, prohlížeč s notchem). env() je 0 na desktopu → beze změny. */ padding: calc(0.7rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) 0.7rem calc(1rem + env(safe-area-inset-left)); border-bottom: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent); } header h1 { font-size: 1.05rem; margin: 0; font-weight: 700; letter-spacing: 0.02em; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--text))); -webkit-background-clip: text; background-clip: text; color: transparent; } .status { color: var(--muted); font-size: 0.85rem; } /* #113 Indikátor dostupnosti — Model (Ollama) + internet v hlavičce */ .conn-indicator { display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.72rem; white-space: nowrap; } .conn-part { display: inline-flex; align-items: center; gap: 0.15rem; color: var(--muted); cursor: default; } .conn-part.conn-on { color: var(--muted); } .conn-part.conn-off { color: var(--warn); font-weight: 600; } .conn-part.conn-unknown { opacity: 0.55; } /* #157 režim zpracování dat — lokální (privacy, zvýrazněno) vs cloud dostupný */ .conn-part.conn-local { color: var(--ok, #3aa76d); font-weight: 600; } .conn-part.conn-cloud { color: var(--muted); } nav#tabs { display: flex; gap: 0.25rem; padding: 0.4rem 1rem 0; border-bottom: 1px solid var(--border); } .tab { background: transparent; border: 1px solid transparent; border-bottom: none; color: var(--muted); padding: 0.4rem 0.9rem; border-radius: 6px 6px 0 0; cursor: pointer; font-size: 0.9rem; } .tab:hover:not(.active):not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--panel) 60%, transparent); } .tab.active { color: var(--text); background: var(--panel); border-color: var(--border); box-shadow: inset 0 2px 0 var(--accent); } .tab:disabled { opacity: 0.45; cursor: not-allowed; } main { flex: 1; min-height: 0; padding: 1rem; } .panel { display: none; height: 100%; } .panel.active { display: flex; flex-direction: column; animation: panelFade .22s ease; } @keyframes panelFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* Přístupnost: uživatelé s omezením pohybu → bez animací/přechodů */ @media (prefers-reduced-motion: reduce) { .panel.active { animation: none; } .btn, .dash-tile, .card, main fieldset, .tab { transition: none !important; } .app-version.drift { animation: none; opacity: 1; } } /* ─── #291 Mikro-animace: tactile press feedback + „stagger" vstup řádků ──────── */ /* Tlačítka „zareagují" na stisk (jemné zmáčknutí). Gate: body.anim-ui (přepínač „✨ Animace rozhraní", default ON). Při reduced-motion se body.anim-ui vůbec nenasadí. */ body.anim-ui .btn:active:not(:disabled) { transform: translateY(0) scale(0.97); box-shadow: none; } body.anim-ui .icon-btn:active:not(.off) { transform: translateY(1px) scale(0.96); } body.anim-ui button.ghost:active:not(:disabled), body.anim-ui .tab:active { transform: scale(0.94); } /* Vstupní animace řádků (dashboard dlaždice, adresář) — třídu .anim-row + animationDelay dodá JS jen když jsou animace zapnuté; bez ní jsou řádky normálně viditelné (nic neskrýváme). */ @keyframes rowIn { from { opacity: 0; transform: translateY(7px) scale(0.99); } to { opacity: 1; transform: none; } } .anim-row { animation: rowIn 0.4s cubic-bezier(0.22, 0.7, 0.3, 1) both; } @media (prefers-reduced-motion: reduce) { .anim-row { animation: none; } } /* Balíček 2 — panel „nádech" při přepnutí sekce (chat / přehled / adresář / …): panel se při aktivaci jemně nadechne (fade + drobný posun). Gate: body.anim-ui; base CSS panel nikdy neskrývá (opacity jen v keyframe s both) → bez animace normálně viditelný = nulová regrese. */ @keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } body.anim-ui .panel.active { animation: panelIn 0.28s cubic-bezier(0.22, 0.7, 0.3, 1) both; } @media (prefers-reduced-motion: reduce) { body.anim-ui .panel.active { animation: none; } } /* Balíček 3 — vstup nových zpráv v chatu: živě přidaný řádek (.line) jemně „naskočí" (fade + drobný posun zdola). Třídu .line-in dodá JS jen ŽIVÝM řádkům (ne při načtení historie — guard _chatHydrating) a jen když jsou animace zapnuté. Gate: body.anim-ui; base .line nikdy neskrývá (opacity jen v keyframe s both) → bez animace normálně viditelná = nulová regrese. */ @keyframes lineIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } body.anim-ui .line.line-in { animation: lineIn 0.3s cubic-bezier(0.22, 0.7, 0.3, 1) both; } @media (prefers-reduced-motion: reduce) { body.anim-ui .line.line-in { animation: none; } } /* Balíček 4 — „thinking" indikátor v chatu: mezi odesláním zprávy a první odpovědí se v asistentské bublině (.typing-line) objeví tři jemně poskakující tečky („asistent přemýšlí"), které JS odstraní při prvním tokenu / thinku. Bublinu vytvoří JS jen když jsou animace zapnuté (uiAnimEnabled → NE reduced-motion, NE vypnuto) → jinak se vůbec nevytvoří = přesně dnešní chování = nulová regrese. Tečky jsou dekorativní (aria-hidden); informaci nese status „přemýšlím…". */ @keyframes typingBounce { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 0.95; transform: translateY(-3px); } } .typing-dots { display: inline-flex; gap: 5px; align-items: center; padding: 3px 0; } .typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 68%, var(--muted)); } body.anim-ui .typing-dots span { animation: typingBounce 1.2s ease-in-out infinite; } body.anim-ui .typing-dots span:nth-child(2) { animation-delay: 0.18s; } body.anim-ui .typing-dots span:nth-child(3) { animation-delay: 0.36s; } @media (prefers-reduced-motion: reduce) { body.anim-ui .typing-dots span { animation: none; } } /* Balíček 5 — animované „naplnění" progress barů (fitness pokrok, finance cíle): bar se při 1. zobrazení naplní zleva z 0 na cíl. JS `animateBarsIn` srazí šířku na 0 a přes rAF ji vrátí na cíl → stávající `transition: width` (.fit-bar-fill / .fin-goal-bar) to plynule naplní. Bez JS/animace má bar cílovou šířku už z HTML (style width) → nulová regrese. Reduced-motion: JS animaci nespustí (body.anim-ui se nenasadí) a přechod vypneme i pro poll-změny. Balíček 7 — totéž pro VERTIKÁLNÍ sloupce grafů (osa height): .uc-bar (graf využití) + .up-bar (histogram návyků) „vyrostou zdola"; reduced-motion vypne i jejich height přechod. Balíček 8 — poslední width bar rodiny: .pc-ov-fill (PC Přehled CPU/RAM/disk + teplota/baterie), guard _pcOvRevealed → naplnění jen při 1. renderu, ne při 5s pollu; má transition: width už z base. */ @media (prefers-reduced-motion: reduce) { .fit-bar-fill, .fin-goal-bar, .fin-tx-cat-fill, .dt-bar > span, .fin-alloc-bar > span, .uc-bar, .up-bar, .pc-ov-fill { transition: none; } } /* ─── #291 Balíček 9 — jemný hover „lift" na klikacích seznamových řádcích ─────────── Klikací řádky (historie hovorů, události zvonečku, časté dotazy, projekty, agenti) měly dosud jen barevný hover (border/pozadí), žádný pohyb. Teď se při najetí myší nepatrně nadzvednou (translateY(-1px)) — jako už dělají dlaždice Přehledu (.dash-tile). Gate: body.anim-ui (přepínač „✨ Animace rozhraní", default ON) + @media (hover: hover) → jen zařízení s reálným kurzorem; na dotyku by se hover „přilepil" po ťuknutí. Transition přidáváme JEN uvnitř body.anim-ui a jen prvkům, které v base žádnou transition nemají → nic nepřepisujeme, base vzhled i barevné hovery beze změny = nulová regrese. Reduced-motion: body.anim-ui se přes JS ani nenasadí, navíc explicitní guard (obrana do hloubky). */ @media (hover: hover) { body.anim-ui .history-item, body.anim-ui .ev-item, body.anim-ui .freq-item, body.anim-ui .project-item, body.anim-ui .agent-row { transition: transform .16s ease; } body.anim-ui .history-item:hover, body.anim-ui .ev-item:hover, body.anim-ui .freq-item:hover, body.anim-ui .project-item:hover, body.anim-ui .agent-row:hover { transform: translateY(-1px); } } @media (prefers-reduced-motion: reduce) { body.anim-ui .history-item, body.anim-ui .ev-item, body.anim-ui .freq-item, body.anim-ui .project-item, body.anim-ui .agent-row { transition: none; transform: none; } } /* ─── #291 Balíček 12 — konzistence vstupních animací modálních overlayů ───────────── Modální overlaye se dosud chovaly nekonzistentně: settings-overlay hrál panelFade NATVRDO (ignoroval přepínač „✨ Animace rozhraní" i reduced-motion — stejný bug, jaký Balíček 11 opravil u toastu), zatímco lightbox obrázků (.img-lightbox) a příkazová paleta / nápověda zkratek (.cmd-palette; #shortcuts-help má class="cmd-palette") se při otevření objevily SKOKEM. Nově všechny tři jemně „naběhnou" (opacity fade) — ale JEN za body.anim-ui (přepínač) a s reduced-motion guardem. Bez animace se overlay objeví okamžitě (display se nemění) → nulová regrese; keyframes naskočí až při zobrazení (display:none→flex, resp. přidání .active). */ @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } } body.anim-ui .img-lightbox, body.anim-ui .cmd-palette, body.anim-ui #settings.settings-overlay.active { animation: overlayIn 0.2s ease; } @media (prefers-reduced-motion: reduce) { body.anim-ui .img-lightbox, body.anim-ui .cmd-palette, body.anim-ui #settings.settings-overlay.active { animation: none; } } .log { flex: 1; min-height: 0; overflow-y: auto; border: none; border-radius: var(--radius); background: var(--panel); padding: 1rem 1.15rem; margin-bottom: 0.7rem; font-size: 0.95rem; line-height: 1.55; } /* ─── #382 Chat à la Open WebUI — čistě vizuální vrstva (DOM z addLine beze změny): zprávy tečou v centrovaném sloupci, uživatel má jemnou bublinu vpravo (nese ji .msg-text), asistent plnou šířku s mini-hlavičkou „jméno · čas" nad textem. ─── */ #log > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .line { margin: 0.65rem auto; white-space: pre-wrap; word-wrap: break-word; } .line .who { font-weight: 600; } .line.user .who { color: var(--user); } .line.assist .who { color: var(--assist); } .line.meta { color: var(--muted); font-size: 0.8rem; text-align: center; } .line.warn { color: var(--warn); } .line.err { color: var(--err); } /* user bublina: řádek je flex zarovnaný doprava, čas se vynoří vlevo od bubliny na hover */ .line.user { display: flex; justify-content: flex-end; align-items: flex-end; gap: 0.5rem; } .line.user .who { display: none; } .line.user .ts { flex: none; order: -1; margin: 0 0 0.25rem; opacity: 0; transition: opacity 0.15s ease; } .line.user:hover .ts { opacity: 1; } @media (hover: none) { .line.user .ts { opacity: 0.55; } } .line.user .msg-text { background: color-mix(in srgb, var(--user) 14%, var(--panel)); border-radius: 1.05rem 1.05rem 0.3rem 1.05rem; padding: 0.55rem 0.95rem; max-width: 82%; min-width: 0; } /* asistent: mini-hlavička (jméno před časem přes order), text od nového řádku */ .line.assist { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.45rem; padding-bottom: 1.55rem; } .line.assist .who { order: 1; font-size: 0.8rem; } .line.assist .ts { order: 2; margin-right: 0; } .line.assist .msg-text { order: 3; width: 100%; min-width: 0; margin-top: 0.15rem; } .line.assist.typing-line { padding-bottom: 0.15rem; } /* #345 — plovoucí „skok na nejnovější": objeví se, jen když jsi odscrollovaný nahoru. Ukotvené k .chat-main (position:relative), nad composerem. */ .chat-jump-latest { position: absolute; right: 1.1rem; bottom: 4.6rem; z-index: 6; display: inline-flex; align-items: center; gap: 0.28rem; min-width: 2.1rem; height: 2.1rem; padding: 0 0.6rem; border: 1px solid var(--border); border-radius: 1.2rem; background: var(--panel); color: var(--text); font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease; } .chat-jump-latest:hover { background: var(--accent); color: var(--accent-fg); transform: translateY(-1px); } .chat-jump-latest:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--glow); } .chat-jump-latest.has-new { border-color: var(--accent); box-shadow: var(--glow); } .chat-jump-count { font-size: 0.72rem; font-weight: 700; min-width: 1.05rem; height: 1.05rem; padding: 0 0.28rem; box-sizing: border-box; border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-fg); } @keyframes chatJumpPulse { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.06); } } .chat-jump-latest.has-new { animation: chatJumpPulse 1.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .chat-jump-latest.has-new { animation: none; } } /* #347 — plovoucí lišta „Hledat v hovoru" (in-page find), kotví do .chat-main (position:relative) */ .chat-find-bar { position: absolute; top: 0.6rem; right: 1.1rem; z-index: 7; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.4rem; max-width: calc(100% - 2.2rem); border: 1px solid var(--border); border-radius: 0.7rem; background: var(--panel); color: var(--text); box-shadow: var(--shadow); } .chat-find-input { border: none; background: transparent; color: var(--text); font-size: 0.9rem; min-width: 8rem; width: 13rem; max-width: 40vw; padding: 0.15rem 0.25rem; } .chat-find-input:focus { outline: none; } .chat-find-count { font-size: 0.75rem; color: var(--muted); white-space: nowrap; min-width: 3rem; text-align: center; } .chat-find-nav { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; padding: 0; line-height: 1; border: 1px solid var(--border); border-radius: 0.45rem; background: var(--bg); color: var(--text); font-size: 0.9rem; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .chat-find-nav:hover { background: var(--accent); color: var(--accent-fg); } .chat-find-nav:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--glow); } /* zvýraznění výskytů (přebíjí default browser — čitelné v light i dark) */ mark.chat-find-hit { background: rgba(255, 213, 74, 0.38); color: inherit; border-radius: 0.2rem; padding: 0 0.06rem; } mark.chat-find-hit.current { background: var(--accent); color: var(--accent-fg); box-shadow: 0 0 0 2px var(--accent); } /* #349 — našeptávač slash příkazů (plovoucí menu nad chat inputem; kotví do #chat-form, position:relative) */ .chat-slash-menu { position: absolute; left: 0; bottom: calc(100% + 0.4rem); z-index: 8; min-width: 18rem; max-width: min(32rem, 92%); display: flex; flex-direction: column; gap: 0.1rem; padding: 0.3rem; border: 1px solid var(--border); border-radius: 0.7rem; background: var(--panel); color: var(--text); box-shadow: var(--shadow); } .chat-slash-menu .slash-item { display: flex; align-items: baseline; gap: 0.55rem; width: 100%; padding: 0.35rem 0.5rem; border: none; border-radius: 0.5rem; background: transparent; color: var(--text); cursor: pointer; text-align: left; font-size: 0.9rem; transition: background 0.1s ease, color 0.1s ease; } .chat-slash-menu .slash-item:hover, .chat-slash-menu .slash-item.sel { background: var(--accent); color: var(--accent-fg); } .chat-slash-menu .slash-cmd { font-weight: 700; white-space: nowrap; } .chat-slash-menu .slash-desc { color: var(--muted); font-size: 0.82rem; } .chat-slash-menu .slash-item:hover .slash-desc, .chat-slash-menu .slash-item.sel .slash-desc { color: var(--accent-fg); opacity: 0.88; } #chat-form, #dev-start-form, #dev-answer-form { display: flex; gap: 0.5rem; } #dev-start-form, #dev-answer-form { flex: none; } #dev-start-form { margin-bottom: 0.7rem; } #dev-answer-form { margin-top: 0.7rem; } .dev-intro { flex: none; margin: 0 0 0.7rem; } #msg, #dev_request, #dev_answer { flex: 1; padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 0.95rem; font-family: inherit; } /* Chat vstup je textarea (multi-line): Enter odešle, Shift+Enter nový řádek; roste s obsahem. */ #msg { resize: none; overflow-y: auto; min-height: 2.6rem; max-height: 160px; line-height: 1.4; align-self: flex-end; } /* ─── #382 Composer à la Open WebUI: jeden zaoblený „pill" kontejner, textarea i ikony uvnitř bez vlastních rámečků, focus prsten na celém formu. ─── */ #chat-form { align-items: flex-end; position: relative; gap: 0.25rem; background: var(--panel); border: 1px solid var(--border); border-radius: 1.5rem; box-shadow: var(--shadow); padding: 0.4rem 0.45rem 0.4rem 0.55rem; padding-bottom: calc(0.4rem + env(safe-area-inset-bottom)); } #chat-form:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: var(--glow); } #chat-form #msg { background: transparent; border: none; padding: 0.5rem 0.45rem; } #msg:focus, #dev_request:focus, #dev_answer:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } #chat-form #msg:focus { border: none; box-shadow: none; } #dev_answer:disabled { opacity: 0.5; } button[type=submit] { padding: 0.6rem 1.1rem; border-radius: var(--radius); border: none; cursor: pointer; background: var(--accent); color: var(--accent-fg); font-weight: 600; } button[type=submit]:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } button[type=submit]:active:not(:disabled) { transform: translateY(0); } button[type=submit]:disabled { opacity: 0.6; cursor: default; } /* ─── Hlas (mikrofon / číst nahlas) ─────────────────────── */ .icon-btn { flex: none; padding: 0.6rem 0.7rem; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 1rem; line-height: 1; } .icon-btn:hover { border-color: var(--accent); } .icon-btn.off { opacity: 0.4; } /* #11 D4 — živý waveform hlasu při nahrávání (barva = motivový accent, čte JS z color) */ .mic-wave { flex: none; width: 120px; height: 26px; vertical-align: middle; align-self: center; border-radius: 6px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--accent); } .icon-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, var(--panel)); box-shadow: 0 0 0 1px var(--accent) inset; } /* #169 Incognito (soukromé okno) — jemná indikace, že se hovor neukládá: fialový rámeček kolem chat inputu + nenápadný odznak. Decentní (neruší), ať je stav pořád vidět. */ body.incognito-on #chat-form { outline: 2px dashed #9b6dff; outline-offset: 3px; border-radius: 1.5rem; } body.incognito-on #chat-form::before { content: "🕶️ Incognito"; position: absolute; transform: translateY(-1.5rem); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: #9b6dff; background: color-mix(in srgb, #9b6dff 14%, var(--panel)); padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid color-mix(in srgb, #9b6dff 45%, var(--border)); } .icon-btn.recording { border-color: var(--err); color: var(--err); animation: micpulse 1s infinite; } @keyframes micpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } /* #382 — ikony uvnitř chat composeru: bez rámečků, kulaté, jemné (hover/aktivní podbarvení) */ #chat-form .icon-btn { border: none; background: transparent; border-radius: 999px; width: 2.35rem; height: 2.35rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; opacity: 0.72; transition: background 0.12s ease, opacity 0.12s ease; } #chat-form .icon-btn:hover { opacity: 1; background: color-mix(in srgb, var(--text) 9%, transparent); } #chat-form .icon-btn.off { opacity: 0.35; } #chat-form .icon-btn.active { opacity: 1; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: none; } #chat-form .icon-btn.recording { opacity: 1; color: var(--err); background: color-mix(in srgb, var(--err) 14%, transparent); } #chat-form .mic-wave { border: none; border-radius: 999px; } #chat-form button[type=submit] { border-radius: 999px; padding: 0.55rem 1.15rem; align-self: flex-end; } /* ─── Nastavení ─────────────────────────────────────────── */ .scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.4rem; } /* ─── Jednotný kartový design (wow modernizace #13) — platí NAPŘÍČ appkou ─── */ .card, main fieldset, #settings fieldset, #agents fieldset, #voice-settings { border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); border-radius: 14px; margin: 0 0 1rem; padding: 1rem 1.15rem 1.15rem; background: linear-gradient(158deg, color-mix(in srgb, var(--panel) 94%, var(--accent) 6%), var(--panel)); box-shadow: var(--shadow); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .card:hover, main fieldset:hover, #settings fieldset:hover, #agents fieldset:hover, #voice-settings:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); box-shadow: var(--shadow), 0 8px 26px -12px color-mix(in srgb, var(--accent) 38%, transparent); } #settings legend, #voice-settings legend { color: var(--accent); font-weight: 700; padding: 0 0.4rem; font-size: 1.05rem; } /* Legend jako accent „chip" u karet mimo Nastavení (Šichta ap. — legend tam nemá float quirk) */ .card > legend, #shift fieldset > legend { color: var(--accent); font-weight: 700; font-size: 0.95rem; padding: 0.15rem 0.6rem; margin-bottom: 0.6rem; background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 999px; } /* ─── Jednotné tlačítko .btn (wow #13 fáze 2) — konzistentní napříč appkou ─── */ .btn { padding: 0.5rem 0.9rem; border-radius: 9px; cursor: pointer; border: 1px solid var(--border); background: var(--elevated); color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1.2; transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease; } .btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--elevated) 82%, var(--accent) 14%); transform: translateY(-1px); box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 40%, transparent); } .btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; } .btn:disabled { opacity: 0.55; cursor: default; } .btn.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } /* ─── Jednotné inputy/selecty/textarea napříč appkou (mimo Nastavení, co má vlastní) ─── */ main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), main select, main textarea { padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 0.9rem; transition: border-color .15s ease, box-shadow .15s ease; } main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, main select:focus, main textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } #settings .hint, #voice-settings .hint { color: var(--muted); font-size: 0.8rem; margin: 0 0 0.7rem; } #settings code, #voice-settings code { color: var(--text); background: var(--code-bg); padding: 0.05rem 0.3rem; border-radius: 4px; } #voice-settings .field, #voice-settings .check { color: var(--muted); } #voice-settings select, #voice-settings input { padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.9rem; font-family: inherit; } #voice-settings select:focus, #voice-settings input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } #voice-settings input[type=range] { padding: 0; border: none; background: transparent; width: 100%; accent-color: var(--accent); cursor: pointer; } .slider-val { color: var(--accent); font-weight: 600; } .voice-manage { margin: 0 0 0.8rem; } .voice-manage .vm-title { color: var(--muted); font-size: 0.78rem; margin: 0.2rem 0 0.4rem; } .voice-manage-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0.2rem; font-size: 0.85rem; } .voice-manage-row span { flex: 1; } .clone-box { margin: 0.6rem 0 !important; } .clone-box legend { font-size: 0.95rem !important; } #vs_studio_text { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; min-height: 3.5rem; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } #vs_studio_audio { width: 100%; margin-top: 0.5rem; } .vm-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; font-size: 0.85rem; } .vm-row .vm-name { flex: 1; color: var(--text); } .vm-row .vm-tag { font-size: 0.72rem; color: var(--assist); } .vm-row button { padding: 0.3rem 0.7rem; border-radius: 6px; cursor: pointer; font-size: 0.8rem; background: transparent; border: 1px solid var(--border); color: var(--text); } .vm-row button:hover { border-color: var(--accent); } .vm-row button:disabled { opacity: 0.5; cursor: default; } .field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.7rem; font-size: 0.85rem; color: var(--muted); } .field > small.hint { margin: 0; } .field input, .field textarea, #settings select { padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.9rem; font-family: inherit; } .field input:focus, .field textarea:focus, #settings select:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } .field textarea { resize: vertical; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } @media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } } details summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0 0.7rem; } details[open] summary { margin-bottom: 0.8rem; } .fb-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; } .fb-slot { display: flex; gap: 0.5rem; align-items: center; } .fb-slot .fb-num { color: var(--muted); width: 1.4rem; flex: none; } .fb-slot .fb-type { flex: none; width: 7rem; } .fb-slot input { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.85rem; } .fb-slot .fb-del { flex: none; padding: 0.3rem 0.55rem; } .fb-add { margin-top: 0.2rem; } .check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--text); margin-bottom: 0.6rem; cursor: pointer; } .check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); } .badge { font-size: 0.72rem; color: var(--assist); font-weight: 600; } .ro-row { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.3rem; } .ro-row strong { color: var(--text); } .form-actions { display: flex; align-items: center; gap: 0.8rem; padding: 0.2rem 0 1.2rem; } button.ghost { padding: 0.55rem 1rem; border-radius: 8px; cursor: pointer; font-weight: 600; background: transparent; border: 1px solid var(--border); color: var(--text); } button.ghost:hover { border-color: var(--accent); } #settings-form button[type=submit], #agents button:not(.ghost) { padding: 0.55rem 1.1rem; border-radius: 8px; border: none; cursor: pointer; background: var(--accent); color: var(--accent-fg); font-weight: 600; } /* ─── Agenti ────────────────────────────────────────────── */ /* #44: kartový GRID jako Nastavení (dřív full-width flex → záložka působila „roztaženě" a jinak než ostatní stránky). Fieldsety dědí jednotný kartový design (viz `.card, main fieldset, #agents fieldset` výš) — žádný vlastní plochý override. Toolbar a blok „Vytvořit agenta" jdou přes celou šířku; bez masonry JS (málo karet → stačí grid). */ #agents .scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 620px), 1fr)); column-gap: 1rem; align-items: start; } #agents .scroll > .toolbar, #agents .scroll > .new-agent-block { grid-column: 1 / -1; } #agents legend { color: var(--accent); font-weight: 700; padding: 0 0.4rem; font-size: 1.05rem; } #agents .hint { color: var(--muted); font-size: 0.8rem; margin: 0 0 0.7rem; } #agents code { color: var(--text); background: var(--code-bg); padding: 0.05rem 0.3rem; border-radius: 4px; } .toolbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } .agents-list { list-style: none; margin: 0; padding: 0; } .agent-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); margin-bottom: 0.5rem; cursor: pointer; } .agent-row:hover { border-color: var(--accent); } .agent-row.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .agent-row .a-id { font-weight: 600; color: var(--text); } .agent-row .a-desc { color: var(--muted); font-size: 0.82rem; flex: 1; min-width: 8rem; } .badges { display: flex; gap: 0.35rem; flex: none; } .badges .b { font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); } .b.on { color: var(--assist); border-color: var(--assist); } .b.off { color: var(--err); border-color: var(--err); } .b.warn { color: var(--warn); border-color: var(--warn); } .agent-enable-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; } .agent-enable-row .check { margin-bottom: 0; } /* Výstup řeči — výběr víc cílů najednou (zaškrtávátka) */ .targets-list { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.3rem 0; } .targets-list label { display: flex; align-items: center; gap: 0.5rem; font-weight: normal; cursor: pointer; } .targets-list input[type="checkbox"] { width: auto; margin: 0; } /* Chat s historií hovorů (sidebar) */ .chat-wrap { flex: 1; min-height: 0; display: flex; gap: 0.7rem; } .chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; } /* #382 — sidebar historie à la Open WebUI: splývá s pozadím (bez rámečku), položky jsou „tiché" řádky bez borderů s jemným hover podbarvením; DOM (renderItem) beze změny. */ .history { width: 230px; flex: none; display: flex; flex-direction: column; gap: 0.5rem; border: none; border-radius: 10px; background: color-mix(in srgb, var(--panel) 55%, var(--bg)); padding: 0.6rem 0.5rem; overflow-y: auto; resize: horizontal; min-width: 170px; max-width: 620px; } /* zvýrazni úchyt pro roztažení (pravý dolní roh) */ .history::-webkit-resizer { background: var(--accent); border-radius: 2px; } .history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; } .history-item { border: none; border-radius: 8px; padding: 0.42rem 0.55rem; cursor: pointer; } .history-item:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } /* Hamburger historie + backdrop — na desktopu skryté (historie je běžný sidebar) */ .history-toggle { display: none; } .history-backdrop { display: none; } .history-item.active { background: color-mix(in srgb, var(--accent) 15%, transparent); } .history-item .h-title { font-weight: 500; font-size: 0.87rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .history-item .h-meta { color: var(--muted); font-size: 0.74rem; } /* #382 — v běžném seznamu (li[data-hgroup]) je řádek kompaktní: meta skrytá a akce se ukazují jen u otevřeného hovoru; výsledky hledání (bez data-hgroup) drží snippet vidět. */ li[data-hgroup] .h-meta { display: none; } li[data-hgroup] .h-actions { display: none; } li[data-hgroup].active .h-actions { display: flex; flex-wrap: wrap; row-gap: 0.15rem; margin-top: 0.3rem; } li[data-hgroup] .h-check { opacity: 0.45; } li[data-hgroup]:hover .h-check, li[data-hgroup] .h-check:checked, li[data-hgroup].active .h-check { opacity: 1; } /* #382 — „+ Nový chat" je primární akce sidebaru, sekundární (export/JSON/koš) ustupují */ #new-chat { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); border-radius: 10px; } #new-chat:hover { background: color-mix(in srgb, var(--accent) 24%, var(--panel)); } #export-chat, #export-chat-json, #trash-open { border: none; padding: 0.35rem 0.6rem; font-size: 0.8rem; font-weight: 500; color: var(--muted); text-align: left; border-radius: 8px; } #export-chat:hover, #export-chat-json:hover, #trash-open:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); } /* #280 hybrid hledání — štítek „významově" u sémanticky nalezeného hovoru */ .history-item .h-sem { display: inline-block; font-size: 0.62rem; font-weight: 600; color: var(--accent); border: 1px solid var(--border); border-radius: 999px; padding: 0 0.35rem; margin-left: 0.3rem; vertical-align: middle; } .history-item .h-actions { margin-top: 0.2rem; display: flex; gap: 0.4rem; } .history-item .h-actions button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.8rem; padding: 0; } .history-item .h-actions button:hover { color: var(--text); } /* #361 — jemná hlavička časové sekce v seznamu historie (Dnes / Včera / Předchozích 7 dní / …) */ /* #362 — hlavička je klikací (sbalit/rozbalit sekci), s caret a počtem hovorů */ .history-group { list-style: none; border: none; padding: 0.55rem 0.2rem 0.2rem; margin: 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 0.3rem; } .history-group:first-child { padding-top: 0.15rem; } .history-group:hover { color: var(--text); } /* #382 fix: --fg nikde neexistovalo (mrtvý hover) */ .history-group:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; border-radius: 3px; } .history-group .hgroup-caret::before { content: "▾"; font-size: 0.7em; display: inline-block; } .history-group.collapsed .hgroup-caret::before { content: "▸"; } .history-item.hgroup-hidden { display: none; } @media (max-width: 640px) { .history { width: 150px; } } /* Návrh navázat na podobný hovor */ .resume-suggest { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; border: 1px dashed var(--border); border-radius: 6px; padding: 0.4rem 0.6rem; margin: 0.4rem 0; } .resume-suggest button { font-size: 0.8rem; padding: 0.15rem 0.5rem; } /* Editace paměti */ .mem-editor { width: 100%; min-height: 50vh; box-sizing: border-box; resize: vertical; font-family: ui-monospace, monospace; font-size: 0.85rem; line-height: 1.5; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text, inherit); padding: 0.7rem; } .mem-newrow { display: flex; gap: 0.4rem; } .mem-newrow input { flex: 1; } /* Služby (restart) */ .svc-list { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.4rem 0; } .svc-row { display: flex; align-items: center; gap: 0.6rem; } .svc-name { min-width: 11rem; font-family: ui-monospace, monospace; font-size: 0.85rem; } .svc-badge { font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 10px; border: 1px solid var(--border); } .svc-badge.ok { color: var(--assist); border-color: var(--assist); } .svc-badge.bad { color: var(--err); border-color: var(--err); } /* Časté dotazy */ .frequent { display: flex; flex-direction: column; gap: 0.2rem; } .freq-title { font-size: 0.72rem; color: var(--muted); margin: 0.2rem 0; } .freq-item { text-align: left; background: none; border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.4rem; cursor: pointer; font-size: 0.8rem; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .freq-item:hover { border-color: var(--user); } .freq-tag { font-size: 0.78rem; } /* #289 návrhy dotazů do hledání historie — klikací chips (témata z paměti) */ .hist-suggest { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.15rem 0 0.35rem; } .hs-title { flex-basis: 100%; font-size: 0.72rem; color: var(--muted); margin: 0.1rem 0; } .hs-chip { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.5rem; cursor: pointer; font-size: 0.76rem; color: inherit; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hs-chip:hover { border-color: var(--user); } /* Header: výběr modelu + systémové metriky */ .model-select { margin-left: auto; max-width: 14rem; font-size: 0.85rem; background: var(--panel); color: inherit; border: 1px solid var(--border); border-radius: 6px; padding: 0.15rem 0.4rem; } .sysmetrics { font-size: 0.75rem; color: var(--muted); font-family: ui-monospace, monospace; white-space: nowrap; } header { gap: 0.7rem; } /* Časové razítko a stats u zpráv */ .line .ts { color: var(--muted); font-size: 0.72rem; margin-right: 0.4rem; } .msg-stats { color: var(--muted); font-size: 0.72rem; margin-top: 0.1rem; cursor: pointer; } .msg-stats.live { opacity: 0.85; animation: livePulse 1.2s ease-in-out infinite; cursor: default; } .en-tbl { border-collapse: collapse; width: 100%; font-size: 0.82rem; margin-top: 0.4rem; } .en-tbl th, .en-tbl td { border: 1px solid var(--border); padding: 0.3rem 0.5rem; text-align: right; } .en-tbl th:first-child, .en-tbl td:first-child { text-align: left; } .en-tbl th { color: var(--muted); font-weight: 500; } /* PC přehled (dashboard) */ /* width:100% = fieldset quirk: flex/grid PŘÍMÉ dítě
v Chrome kolabuje na šířku 0 (ostatní panely mají obsah v
). Explicitní šířka to spolehlivě řeší. */ .pc-ov-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.4rem 0 0.6rem; width: 100%; } .pc-ov-cell { flex: 1 1 8rem; min-width: 0; background: var(--elevated); border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.6rem; overflow: hidden; } .pc-ov-cell .h-meta, .pc-ov-cell > div { overflow-wrap: anywhere; } .pc-ov-wide { flex-basis: 100%; } .pc-ov-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; font-size: 0.82rem; color: var(--muted); } .pc-ov-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-ov-top b { color: var(--text); font-size: 0.95rem; white-space: nowrap; } .pc-ov-track { height: 6px; background: var(--border); border-radius: 4px; margin: 0.35rem 0 0.3rem; overflow: hidden; } .pc-ov-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; } .pc-offline { background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid var(--warn); color: var(--text); border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.85rem; margin-bottom: 0.5rem; } /* Rychlé akce PC (width:100% kvůli fieldset quirku — flex kolabuje na 0) */ .pa-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; width: 100%; } .pa-btn { flex: 1 1 8rem; min-width: 0; } .pa-danger:hover { border-color: var(--err); color: var(--err); } .pc-dev-acts { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } /* Obrazovka PC (živý náhled / remote) */ .sc-stage { width: 100%; margin-top: 0.4rem; border: 1px solid var(--border); border-radius: 8px; overflow: auto; max-height: 72vh; background: #000; } .sc-stage img { display: block; width: 100%; height: auto; } /* fit; zoom nastaví JS width v % */ .sc-stage.sc-control img { cursor: crosshair; } .sc-type { width: 100%; margin-top: 0.5rem; } .sc-zoom { display: inline-flex; align-items: center; gap: 0.25rem; } .sc-zoom button { padding: 0.2rem 0.5rem; } #sc_zoom_lbl { min-width: 3.2em; text-align: center; } /* Celá obrazovka: stage vyplní displej, obraz vycentrovaný a vejde se (contain). */ .sc-stage:fullscreen { max-height: none; display: flex; align-items: center; justify-content: center; } .sc-stage:fullscreen img { width: auto; max-width: 100%; max-height: 100vh; } /* Tabulka procesů */ .pp-table { overflow-x: auto; margin-top: 0.4rem; width: 100%; } #settings .form-actions { flex-wrap: wrap; width: 100%; } /* wrap + width:100% (fieldset quirk: jinak flex řádek kolabuje/přetéká) */ #settings .form-actions > label.check { flex: 0 1 auto; min-width: 0; } /* label.field má width:100% (kvůli fieldset quirku); uvnitř flex řádku ho neroztahovat na celou šířku (vytlačí tlačítka), ale nechat mu vlastní obsahovou šířku. */ #settings .form-actions > label.field, #settings .pull-row > label.field { width: auto; flex: 0 1 auto; min-width: 8rem; } /* holé inputy v .pull-row (URL/příkaz) musí být flexibilní, jinak vytlačí tlačítko za sebou. */ #settings .pull-row { flex-wrap: wrap; } #settings .pull-row > input { flex: 1 1 10rem; min-width: 0; } .pp-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .pp-tbl th, .pp-tbl td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; } .pp-tbl th { color: var(--muted); font-weight: 500; white-space: nowrap; } .pp-tbl th.pp-act { color: var(--accent); } .pp-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-cell { display: flex; align-items: center; gap: 0.4rem; min-width: 5rem; } .pp-mini { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; min-width: 2.5rem; } .pp-mini > div { height: 100%; border-radius: 3px; } .pp-kill { padding: 0.1rem 0.45rem; color: var(--muted); } .pp-kill:hover { color: var(--err); border-color: var(--err); } /* Správce souborů PC (přenos PC ↔ web ↔ telefon) */ .pf-upload-lbl { cursor: pointer; white-space: nowrap; } .pf-drives { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; } .pf-list { width: 100%; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; max-height: 22rem; overflow-y: auto; } .pf-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); } .pf-row:last-child { border-bottom: none; } .pf-dir { cursor: pointer; } .pf-dir:hover, .pf-row:hover { background: var(--elevated); } /* 📎 Připnuté dokumenty ke kontextu paměti (#318 Fáze 3) */ .mc-docs { margin: 0.4rem 0; padding: 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--elevated); } .mc-docs-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; } .mc-docs-head #mc_docs_close { margin-left: auto; } .mc-docs-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; } .mc-docs-form input, .mc-docs-form textarea { width: 100%; box-sizing: border-box; } .pf-ic { flex: 0 0 auto; } .pf-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-sz { flex: 0 0 auto; color: var(--muted); font-size: 0.78rem; white-space: nowrap; } .pf-dl { flex: 0 0 auto; padding: 0.1rem 0.5rem; text-decoration: none; } /* 📁 Správce souborů serveru (#121) */ .pf-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); } .pf-item:last-child { border-bottom: none; } .pf-item.pf-clickable { cursor: pointer; } .pf-item.pf-clickable:hover { background: var(--elevated); } .pf-item.pf-disabled { opacity: 0.55; } .pf-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-meta { flex: 0 0 auto; color: var(--muted); font-size: 0.78rem; white-space: nowrap; } /* 🔌 Pluginy Fáze 2 (#222) — volání akcí: tlačítka akcí, gate (riziko), výstup */ .plg-acts { flex: 1 1 100%; white-space: normal; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; } .plg-call-btn { padding: 0.1rem 0.5rem; font-size: 0.78rem; border: 1px solid var(--border); border-radius: 6px; background: var(--elevated); cursor: pointer; } .plg-call-btn:hover { border-color: var(--accent); } .plg-mth { color: var(--muted); font-size: 0.7rem; } /* 🔌 Pluginy Fáze 2b (#222) — most na agenty/tooly: doporučené nástroje + spouštěče */ .plg-tools, .plg-trigs { white-space: normal; font-size: 0.72rem; } .plg-tools { color: var(--accent); } .plg-call-out { width: 100%; margin-top: 0.5rem; padding: 0.5rem; background: var(--elevated); border: 1px solid var(--border); border-radius: 8px; font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; max-height: 16rem; overflow-y: auto; } .plg-calls { margin-top: 0.6rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.6rem; } .plg-calls summary { cursor: pointer; font-weight: 600; } .plg-danger { color: var(--warn); } /* 🧩 Dovednosti (#223 Fáze 2, var. A): deklarované nástroje/agenti — accent, ať jsou vidět */ .sk-tools { color: var(--accent, var(--muted)); overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* 📌 Připnuté poznámky (#242): řádek přidání + text pinu (zalomí se, ať je celý vidět) */ .cp-add { display: flex; gap: 0.5rem; margin: 0.5rem 0; } .cp-add input { flex: 1 1 auto; min-width: 0; } .cp-row .cp-text { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; } .fm-editor { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; margin-top: 0.5rem; } /* 💾 Zálohy (#232) — report ověření obnovy */ .bk-verify { flex: 0 0 auto; padding: 0.1rem 0.55rem; font-size: 0.8rem; } .bk-ok { color: #3fb950; font-weight: 600; margin-top: 0.4rem; } .bk-err { color: var(--warn); font-weight: 600; margin-top: 0.4rem; } .bk-err ul { margin: 0.3rem 0 0; padding-left: 1.2rem; font-weight: 400; } /* 🧠 Reflexe paměti (#233) — poznatky uložené týdenní reflexí (blokový řádek: klíč + hodnota + čas) */ .rf-fact { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); } .rf-fact:last-child { border-bottom: none; } .rf-fact:hover { background: var(--elevated); } .rf-key { font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .rf-val { margin-top: 0.15rem; white-space: pre-wrap; word-break: break-word; } .rf-when { color: var(--muted); font-size: 0.78rem; margin-top: 0.2rem; } /* #265 ruční správa vědomí: 🗑 u poznatku (zapomenout) + formulář na přidání vlastního */ .rf-forget { background: none; border: none; cursor: pointer; opacity: 0; font-size: 0.9rem; padding: 0 0.2rem; line-height: 1; transition: opacity 0.15s; } .rf-fact:hover .rf-forget, .rf-forget:focus-visible { opacity: 0.75; } .rf-forget:hover { opacity: 1; } .rf-add { margin-top: 0.6rem; } .rf-add-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; align-items: center; } .rf-add-row input { flex: 1 1 10rem; min-width: 0; } /* 📚 Znalostní báze (RAG, #343 Fáze 2) — ladění, upload, testovací hledání */ .rag-tune { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0.4rem 0; } .rag-tune .field { flex: 0 1 9rem; } .rag-upload, .rag-search { margin-top: 0.5rem; } .rag-upload-row, .rag-search-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; align-items: center; } .rag-search-row input { flex: 1 1 12rem; min-width: 0; } .rag-results { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; } .rag-hit { border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.6rem; } .rag-hit-head { font-weight: 600; display: flex; gap: 0.4rem; align-items: baseline; } .rag-hit-snip { margin-top: 0.2rem; font-size: 0.9em; color: var(--muted); white-space: pre-wrap; } /* 🔐 Šifrování obsahu báze at-rest (#202) — oddělený blok uvnitř karty RAG */ /* Týmové sdílení dokumentů báze (#172) — odznak viditelnosti u položky seznamu. */ .rag-share { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); } .rag-vis { font-weight: 600; } .rag-vis.is-private { color: var(--warn, #e0a33e); } .rag-encrypt { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); } .rag-encrypt code { font-size: 0.9em; } #rag_encrypt_status { display: block; margin-top: 0.3rem; } /* 🧹 Údržba dat (#234) — insight úložiště (kategorie přes .pf-row) + doporučení + report úklidu */ .dm-advice { margin-top: 0.4rem; } .dm-advice-list { margin: 0.3rem 0 0; padding-left: 1.2rem; color: var(--warn); } .dm-advice-list li { margin: 0.15rem 0; } .dm-ok { color: #3fb950; font-weight: 600; margin-top: 0.4rem; } .dm-err { color: var(--warn); font-weight: 600; margin-top: 0.4rem; } .dm-err ul, .dm-files { margin: 0.3rem 0 0; padding-left: 1.2rem; font-weight: 400; } .dm-files { color: var(--muted); font-size: 0.8rem; word-break: break-all; } /* ♻️ Životní cyklus dat / retence (#214) */ .ret-grid { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.5rem 0; } .ret-field { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 9rem; min-width: 8rem; font-size: 0.85rem; } .ret-field input[type="number"] { width: 100%; } .ret-field small { color: var(--muted); font-size: 0.72rem; } /* ⚡ Rychlé profily systémového promptu (#112) */ .pp-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.5rem 0; } .pp-row { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; background: var(--elevated); } .pp-head { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.35rem; } .pp-emoji { width: 3rem; text-align: center; flex: 0 0 auto; } .pp-name { flex: 1 1 auto; min-width: 0; } .pp-prompt { width: 100%; box-sizing: border-box; resize: vertical; font-size: 0.85rem; } .pp-head .h-del { flex: 0 0 auto; } .dm-gated { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); } .msg-trace { font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; } .msg-trace summary { cursor: pointer; } .msg-trace div { white-space: pre-line; padding: 0.3rem 0.5rem; margin-top: 0.2rem; background: var(--elevated); border: 1px solid var(--border); border-radius: 6px; } @keyframes livePulse { 0%,100% { opacity: 0.55; } 50% { opacity: 0.95; } } .msg-think { color: var(--muted); font-size: 0.82rem; border-left: 2px solid var(--border); padding-left: 0.5rem; margin: 0.2rem 0; white-space: pre-wrap; } /* Vibe coding */ .vc-say-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .vc-say-row input { flex: 1; padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 0.9rem; } .vc-say-row input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } .vc-step.vc-user { color: var(--user); background: color-mix(in srgb, var(--user) 8%, transparent); } .vc-step.vc-sys { color: var(--muted); font-style: italic; } .vc-sessions { display: flex; gap: 0.6rem; align-items: flex-end; margin-top: 0.6rem; } .vc-sessions .field { flex: 1; } .vc-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 0.6rem; } .vc-step { font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; border-left: 2px solid var(--border); padding: 0.2rem 0.5rem; font-family: ui-monospace, monospace; } .vc-stepstats { color: var(--muted); font-size: 0.7rem; margin: 0 0 0.25rem 0.6rem; font-family: ui-monospace, monospace; } .vc-commit { color: #4caf50; font-size: 0.72rem; font-family: ui-monospace, monospace; } .vc-think { color: var(--muted); font-style: italic; } .vc-tool { color: var(--user); } .vc-result { color: var(--text, inherit); background: rgba(127,127,127,0.06); } .vc-answer { color: var(--assist); border-left-color: var(--assist); font-weight: 600; } .vc-error { color: var(--err); border-left-color: var(--err); } .vc-approve { border: 1px dashed var(--warn); border-radius: 6px; padding: 0.5rem; margin: 0.4rem 0; display: flex; flex-direction: column; gap: 0.4rem; } .vc-approve button { align-self: flex-start; } .vc-risk { font-size: 0.82rem; padding: 0.25rem 0.4rem; border-radius: 5px; } .vc-risk-high { color: var(--err); font-weight: 700; } .vc-risk-medium { color: var(--warn); } /* Proaktivní návrhy vylepšení (autonomie) — klikací chipy */ .vc-suggestions { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 8px; padding: 0.5rem 0.6rem; background: color-mix(in srgb, var(--accent) 7%, transparent); display: flex; flex-direction: column; gap: 0.35rem; } .vc-sugg-head { font-weight: 600; color: var(--accent); font-size: 0.82rem; } .vc-sugg-chip { align-self: flex-start; text-align: left; max-width: 100%; padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 0.82rem; cursor: pointer; white-space: normal; } .vc-sugg-chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); } .vc-sugg-item { display: flex; gap: 0.3rem; align-items: flex-start; } .vc-sugg-item .vc-sugg-chip { flex: 1; } .vc-sugg-queue { align-self: flex-start; padding: 0.3rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; font-size: 0.8rem; } .vc-sugg-queue:hover:not(:disabled) { border-color: var(--accent); } .vc-sugg-queue:disabled { color: var(--assist); border-color: var(--assist); cursor: default; } /* Úprava obsahu před uložením + akce ve schvalování */ .vc-edit-area { width: 100%; box-sizing: border-box; min-height: 8rem; resize: vertical; font-family: ui-monospace, monospace; font-size: 0.8rem; padding: 0.4rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--code-bg); color: var(--text); } .vc-approve-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .vc-file-row.changed { color: var(--warn); font-weight: 600; } /* TODO tracker (dílčí úkoly) */ .vc-todos { border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.6rem; background: var(--panel); margin-bottom: 0.3rem; } .vc-todos-head { font-weight: 600; font-size: 0.82rem; color: var(--accent); margin-bottom: 0.2rem; } .vc-todo { font-size: 0.84rem; padding: 0.05rem 0; } .vc-todo.done { color: var(--muted); text-decoration: line-through; } /* Snapshoty */ .vc-snap-row { display: flex; gap: 0.5rem; align-items: center; padding: 0.2rem 0.6rem; font-size: 0.82rem; } .vc-snap-row span { flex: 1; font-family: ui-monospace, monospace; } /* Plan mode — navržený plán řešení */ .vc-plan { border: 1px solid var(--accent); border-radius: 8px; padding: 0.5rem 0.7rem; background: color-mix(in srgb, var(--accent) 8%, transparent); } .vc-plan b { color: var(--accent); display: block; margin-bottom: 0.3rem; } .vc-verify { border-radius: 8px; padding: 0.35rem 0.6rem; font-size: 0.85rem; } .vc-verify.ok { border: 1px solid var(--ok, #3fbf7f); background: rgba(63,191,127,0.07); } .vc-verify.fail { border: 1px solid var(--err, #e35d6a); background: rgba(227,93,106,0.07); } .vc-verify pre { margin: 0.3rem 0 0; max-height: 14rem; overflow: auto; font-size: 0.75rem; white-space: pre-wrap; } .vc-verify summary { cursor: pointer; } /* Vibe toolbar (nahrát / stáhnout ZIP / soubory) */ .vc-toolbar { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 0.2rem 0; } .vc-toolbar .icon-btn { font-size: 0.82rem; padding: 0.3rem 0.6rem; width: auto; } /* Prohlížeč souborů workspace */ .vc-files-panel { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); margin: 0.2rem 0 0.4rem; max-height: 40vh; overflow: auto; } .vc-files-head { display: flex; gap: 0.4rem; align-items: center; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); } .vc-files-head b { flex: 1; } .vc-files-tree { padding: 0.3rem 0; font-size: 0.82rem; } .vc-file-row { padding: 0.15rem 0.6rem; white-space: nowrap; } .vc-file-row:not(.is-dir) { cursor: pointer; } .vc-file-row:not(.is-dir):hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .vc-file-view { margin: 0; padding: 0.6rem; border-top: 1px solid var(--border); font-family: ui-monospace, monospace; font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; max-height: 30vh; overflow: auto; background: var(--code-bg); } #vc_instructions { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: 0.4rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } .vc-diff { font-size: 0.78rem; line-height: 1.4; margin: 0.1rem 0 0.3rem 0.5rem; background: rgba(127,127,127,0.06); border-radius: 5px; padding: 0.3rem 0.5rem; overflow-x: auto; white-space: pre; } .vc-diff .d-add { color: #4caf50; } .vc-diff .d-del { color: var(--err); } .vc-diff .d-hunk { color: var(--muted); } /* ─── Moderní scrollbar + skin výběr ──────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } .skin-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.3rem; } /* Editor vlastního motivu */ .ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.4rem 0.8rem; margin: 0.5rem 0; } .ct-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.83rem; color: var(--muted); cursor: pointer; } .ct-item input[type=color] { width: 2.2rem; height: 1.6rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; } #ct_radius { width: min(16rem, 100%); accent-color: var(--accent); } .skin-swatch { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); cursor: pointer; font-size: 0.75rem; color: var(--muted); transition: border-color 0.2s ease, transform 0.1s ease; } .skin-swatch:hover { transform: translateY(-2px); } .skin-swatch.active { border-color: var(--accent); color: var(--text); box-shadow: var(--glow); } .skin-dots { display: flex; gap: 3px; } .skin-dots span { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(127,127,127,0.3); } /* ─── Autentikace (login overlay / uživatel / správa) ─────── */ .user-chip { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; font-size: 0.82rem; color: var(--muted); } .user-chip #user-name { color: var(--text); font-weight: 600; cursor: pointer; padding: 0.2rem 0.45rem; border-radius: 6px; transition: background 0.15s, color 0.15s; } .user-chip #user-name:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .user-chip #user-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .user-chip button { padding: 0.25rem 0.6rem; font-size: 0.78rem; } .login-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(4px); } /* `hidden` atribut musí přebít display:flex (jinak overlay svítí pořád). */ .login-overlay[hidden] { display: none; } .login-box { display: flex; flex-direction: column; gap: 0.7rem; width: min(360px, 90vw); padding: 1.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); } .login-box h2 { margin: 0; font-size: 1.2rem; color: var(--text); } .login-box .hint { margin: 0; } .login-box input { padding: 0.6rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.95rem; } .login-box input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } .login-box button { padding: 0.6rem; border-radius: 8px; border: none; cursor: pointer; background: var(--accent); color: var(--accent-fg); font-weight: 600; font-size: 0.95rem; } .login-box button:hover { filter: brightness(1.08); } .login-error { color: var(--err); font-size: 0.82rem; min-height: 1rem; } /* #254: lightbox se zoomem/panem pro obrázky v chatu */ .img-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: color-mix(in srgb, #000 80%, transparent); backdrop-filter: blur(3px); } .img-lightbox[hidden] { display: none; } .img-lightbox-bar { display: flex; align-items: center; gap: 0.4rem; justify-content: center; padding: 0.45rem 0.5rem; background: color-mix(in srgb, var(--panel) 90%, transparent); border-bottom: 1px solid var(--border); } .img-lightbox-bar .ghost { text-decoration: none; } .img-lightbox-bar #img-lb-zoom { min-width: 3.5rem; text-align: center; } .img-lightbox-stage { flex: 1; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; touch-action: none; } #img-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; transform-origin: center center; will-change: transform; transition: transform 0.08s ease-out; cursor: zoom-in; } .img-lightbox.zoomed #img-lightbox-img { cursor: grab; } .img-lightbox.dragging #img-lightbox-img { cursor: grabbing; transition: none; } /* App Lock (#184) — klientský privacy screen-lock webového GUI (nekryptuje data, jen clona proti nahlédnutí; phone-app to obaluje ve WebView → platí i na mobilu). */ .applock-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--bg, #000) 78%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .applock-overlay[hidden] { display: none; } body.applock-locked { overflow: hidden; } .applock-card { width: min(22rem, 92vw); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 1.6rem 1.4rem; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.45); } .applock-emoji { font-size: 2.6rem; line-height: 1; } .applock-title { font-weight: 600; margin: 0; } #applock-unlock-pin { width: 100%; box-sizing: border-box; text-align: center; letter-spacing: 0.4em; font-size: 1.4rem; padding: 0.55rem 0.6rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: inherit; } .applock-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .acc-applock { display: flex; flex-direction: column; gap: 0.5rem; } .acc-applock input, .acc-applock select { padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); } .account-box { width: min(30rem, 92vw); max-height: 90vh; overflow-y: auto; } .acc-2fa { display: flex; flex-direction: column; gap: 0.5rem; } .acc-2fa input { padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } .twofa-qr { width: 180px; height: 180px; background: #fff; padding: 6px; border-radius: 8px; align-self: center; } .twofa-qr svg { width: 100%; height: 100%; } .twofa-codes { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; font-family: ui-monospace, monospace; font-size: 0.9rem; letter-spacing: 0.05em; white-space: pre-wrap; margin: 0; } .account-box .form-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .danger-text { color: var(--err); } .login-box button.danger, button.danger { background: var(--err); color: #fff; } .login-box button.danger:hover, button.danger:hover { filter: brightness(1.08); } .login-box button.ghost, .account-box button.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); font-weight: 600; } .users-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; } .user-row { display: flex; align-items: center; gap: 0.6rem; } .user-row .user-uname { flex: 1; color: var(--text); font-size: 0.9rem; } .user-row .user-role { font-size: 0.74rem; color: var(--assist); border: 1px solid var(--border); padding: 0.05rem 0.4rem; border-radius: 10px; } .user-row .user-role-sel { font-size: 0.78rem; padding: 0.2rem 0.4rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } .user-row.role-pending .user-role-sel { border-color: var(--warn); color: var(--warn); } .user-row.role-banned .user-role-sel { border-color: var(--err); color: var(--err); } .user-row.role-admin .user-role-sel { border-color: var(--accent); } .user-row .user-me { font-size: 0.74rem; color: var(--muted); } .user-row button { padding: 0.2rem 0.55rem; } .user-row .user-perm-sum { font-size: 0.74rem; color: var(--muted); min-width: 7rem; } /* 🔐 Matice granulárních oprávnění (#150) — rozbalí se pod řádkem uživatele. */ .perm-panel { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem; margin: 0.2rem 0 0.5rem 1rem; background: var(--panel, var(--bg)); display: flex; flex-direction: column; gap: 0.25rem; } .perm-panel.saved { border-color: var(--accent); } .perm-panel > p { margin: 0 0 0.35rem; font-size: 0.78rem; } .perm-row { display: flex; align-items: center; gap: 0.5rem; } .perm-row .perm-area { flex: 1; font-size: 0.82rem; color: var(--text); } .perm-row .perm-sel { font-size: 0.78rem; padding: 0.15rem 0.35rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } .perm-row .perm-risk { font-size: 0.8rem; cursor: help; } .user-new { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .user-new input, .user-new select { padding: 0.45rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.85rem; } /* ─── Sbalitelný blok „Nový agent" v Agentech + Paměť v Nastavení ─── */ .new-agent-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.9rem; margin-top: 1rem; background: var(--panel); } .new-agent-block > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 0.3rem 0; } .new-agent-block #dev_log { height: 16rem; } #memory-settings .mem-editor { width: 100%; } /* ─── Vibe coding jako chat (stejné rozměry — sdílí .chat-wrap/.history/.chat-main) ─── */ #vc_history #vc_new { width: 100%; } .vc-log { box-shadow: var(--shadow); } /* transcript jako .log v chatu */ .vibe-settings { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 0.8rem; margin-bottom: 0.5rem; background: var(--panel); } .vibe-settings > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 0.25rem 0; } /* Spodní lišta vibe = stejná výška jako chat (#chat-form): stejné rozměry textarey. */ .vc-input-row { display: flex; gap: 0.5rem; align-items: flex-end; margin-top: 0.5rem; } .vc-input-row textarea { flex: 1; resize: none; overflow-y: auto; min-height: 2.6rem; max-height: 160px; padding: 0.6rem 0.8rem; line-height: 1.4; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 0.95rem; font-family: inherit; } .vc-input-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } #vc_sessions_list .history-item { position: relative; } #vc_sessions_list .h-del { position: absolute; right: 0.3rem; top: 0.3rem; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 0.8rem; } #vc_sessions_list .h-del:hover { color: var(--err); } .vc-hist-running .h-meta { color: var(--accent); } .vc-hist-awaiting .h-meta { color: var(--warn); } /* ─── Vibe coding „pracuje" indikátor ─── */ .vc-working { color: var(--accent); font-style: italic; font-size: 0.9rem; padding: 0.3rem 0.5rem; animation: vcpulse 1.4s ease-in-out infinite; } @keyframes vcpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } #vc_model { width: 100%; } /* Stažení modelu (pull) v Nastavení */ .pull-row { display: flex; gap: 0.5rem; flex-wrap: wrap; } .pull-row input { flex: 1; } /* Karty mimo Nastavení (Šichta ap.) — zalamování a přizpůsobení úzké šířce (mobil/#13) */ .pull-row > label.field, .pull-row > .field { flex: 1 1 12rem; min-width: 0; margin-bottom: 0; } .pull-row > input, .pull-row > select, .pull-row > button { min-width: 0; } /* Zarovnání tlačítek s inputy (ne s labely): řádek zarovnává spodky, pole bez margin-bottom. Tlačítko v pull-row (bez labelu) má výšku inputu → sedí na stejné lince jako pole vedle. */ .pull-row { align-items: flex-end; } .pull-row > .btn, .pull-row > button { align-self: flex-end; height: 2.5rem; white-space: nowrap; } /* Vertikální rozestup mezi po sobě jdoucími řádky v kartě (ať nejsou natěsno) */ .card .pull-row + .pull-row { margin-top: 0.7rem; } .card, main fieldset { box-sizing: border-box; max-width: 100%; } .card .field select, .card .field input:not([type=checkbox]):not([type=radio]):not([type=range]), .card .field textarea, .card > select, .card > input:not([type=checkbox]):not([type=radio]), .card > textarea { width: 100%; max-width: 100%; box-sizing: border-box; } .card .field input[type=checkbox], .card .field input[type=radio] { width: auto; flex: 0 0 auto; } /* ─── Vibe coding: reasoning modelu (sbalitelné) ─── */ .vc-think-block { margin: 0.1rem 0 0.3rem 0.6rem; } .vc-think-block > summary { cursor: pointer; color: var(--muted); font-size: 0.78rem; font-style: italic; } .vc-think-body { margin-top: 0.3rem; padding: 0.4rem 0.6rem; border-left: 2px solid var(--border); color: var(--muted); font-size: 0.82rem; white-space: pre-wrap; line-height: 1.5; } /* Živé přemýšlení během streamování */ .vc-think-live { animation: vcpulse 1.6s ease-in-out infinite; border-left-color: var(--accent); } /* Živé přemýšlení v chatu během streamování */ .msg-think.live { color: var(--muted); font-size: 0.85rem; white-space: pre-wrap; padding: 0.3rem 0.6rem; border-left: 2px solid var(--accent); margin: 0.2rem 0; animation: vcpulse 1.6s ease-in-out infinite; } /* ─── Rychlost modelů (statistiky) ─── */ .speed-list { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.6rem; } .speed-row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.25rem 0.4rem; border-radius: 6px; background: color-mix(in srgb, var(--accent) 6%, transparent); } .speed-row .speed-name { flex: 1; font-family: ui-monospace, monospace; font-size: 0.85rem; } .speed-row .speed-val { color: var(--accent); font-weight: 600; } .speed-row .speed-meta { color: var(--muted); font-size: 0.74rem; } /* Správa modelů (řádek s akcemi) */ .model-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.4rem; border-radius: 6px; background: color-mix(in srgb, var(--accent) 5%, transparent); } .model-row .speed-name { flex: 1; font-family: ui-monospace, monospace; font-size: 0.84rem; } .model-row .speed-val { color: var(--accent); font-size: 0.8rem; min-width: 5.5rem; text-align: right; } .model-row .model-default { font-size: 0.7rem; color: var(--assist); border: 1px solid var(--assist); padding: 0 0.3rem; border-radius: 8px; } .model-row button { padding: 0.15rem 0.5rem; font-size: 0.78rem; } .model-row .h-del:hover { color: var(--err); } /* ⚙ Nastavení v rohu headeru + STOP v chatu */ .settings-btn { margin-left: 0.3rem; font-size: 1.1rem; } .settings-btn.active { border-color: var(--accent); color: var(--accent); } #chat_stop { color: var(--err); border-color: var(--err); } .user-chip + .settings-btn { margin-left: 0.3rem; } /* Toast „Uloženo · Vrátit zpět" */ .toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 1rem; z-index: 50; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.88rem; } .toast[hidden] { display: none; } .toast #toast-text { color: var(--assist); font-weight: 600; } .toast button { padding: 0.2rem 0.6rem; font-size: 0.82rem; } @keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } /* #291 Balíček 11: vstup i odchod toastu jen za přepínačem „✨ Animace rozhraní" (body.anim-ui) — base .toast je bez animace = okamžitě viditelný (nulová regrese, respektuje reduced-motion). */ @keyframes toastout { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 8px); } } body.anim-ui .toast { animation: toastin 0.2s ease; } body.anim-ui .toast.toast-out { animation: toastout 0.2s ease forwards; } @media (prefers-reduced-motion: reduce) { body.anim-ui .toast, body.anim-ui .toast.toast-out { animation: none; } } /* GitHub OAuth box + tvorba repa */ .oauth-box { margin-top: 0.5rem; padding: 0.7rem; border: 1px dashed var(--accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 6%, transparent); } .oauth-code { font-family: ui-monospace, monospace; font-size: 1.6rem; letter-spacing: 0.3rem; color: var(--accent); text-align: center; margin: 0.4rem 0; font-weight: 700; } .newrepo-box { margin-top: 0.5rem; padding: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 0.4rem; background: var(--panel); } .newrepo-box input[type=text] { width: 100%; } /* Automatické operace (přehled) */ .auto-list { display: flex; flex-direction: column; gap: 0.25rem; } .auto-cat { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 0.6rem; font-weight: 600; } .auto-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0.5rem; border-radius: 6px; background: color-mix(in srgb, var(--accent) 5%, transparent); } .auto-info { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .auto-info .auto-name { font-weight: 600; font-size: 0.9rem; } .auto-info .auto-detail { font-size: 0.78rem; color: var(--muted); } .auto-badge { font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 8px; white-space: nowrap; } .auto-badge.on { color: var(--assist); border: 1px solid var(--assist); } .auto-badge.off { color: var(--muted); border: 1px solid var(--border); } /* Spotřeba uživatelů + audit přihlášení */ .usage-list, .audit-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 18rem; overflow-y: auto; } .usage-row { padding: 0.4rem 0.5rem; border-radius: 6px; background: color-mix(in srgb, var(--accent) 5%, transparent); } .usage-head { display: flex; justify-content: space-between; gap: 0.6rem; } .usage-head .usage-name { font-weight: 600; } .usage-head .usage-val { color: var(--accent); font-size: 0.84rem; } .usage-models { font-size: 0.76rem; color: var(--muted); margin-top: 0.15rem; font-family: ui-monospace, monospace; } .audit-row { font-size: 0.8rem; font-family: ui-monospace, monospace; padding: 0.2rem 0.4rem; border-radius: 4px; } .audit-row.ok { color: var(--assist); } .audit-row.fail { color: var(--err); background: color-mix(in srgb, var(--err) 8%, transparent); } /* Graf vývoje spotřeby (CSS sloupce) */ .usage-chart-wrap { margin-bottom: 0.7rem; } .usage-chart-title { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.3rem; } .usage-chart { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding-top: 4px; } .uc-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .uc-bar { width: 70%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.2s; } .uc-col:hover .uc-bar { filter: brightness(1.2); } .uc-lab { font-size: 0.6rem; color: var(--muted); margin-top: 2px; transform: rotate(-45deg); white-space: nowrap; } /* Plánované úlohy (cron) */ .sched-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.6rem; } .sched-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: 6px; background: color-mix(in srgb, var(--accent) 5%, transparent); } .sched-row.off { opacity: 0.55; } .sched-info { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .sched-info .sched-name { font-weight: 600; font-size: 0.9rem; } .sched-info .sched-meta { font-size: 0.78rem; color: var(--muted); font-family: ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sched-info .sched-last { font-size: 0.72rem; color: var(--muted); } .sched-info .sched-result { font-size: 0.74rem; color: var(--assist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sched-ctrl { display: flex; align-items: center; gap: 0.3rem; } .sched-ctrl button { padding: 0.15rem 0.5rem; } .sched-new { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .sched-new input { flex: 1; min-width: 8rem; } /* Notifikace — události + kanály */ .notify-events { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); } .notify-chan { margin-top: 0.4rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.3rem 0.6rem; } .notify-chan > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 0.2rem 0; } /* Informační centrum (zvoneček + panel) */ .events-btn { position: relative; } .ev-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 0.65rem; line-height: 16px; text-align: center; color: #fff; background: var(--accent); } .ev-badge.lvl-warn { background: var(--warn); color: #1a1a1a; } .ev-badge.lvl-important { background: var(--err); } .events-panel { position: fixed; top: 3rem; right: 1rem; width: 22rem; max-height: 60vh; overflow-y: auto; z-index: 60; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .events-panel[hidden] { display: none; } .ev-head { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--elevated); } .ev-sound { display: flex; gap: 0.6rem; align-items: center; padding: 0.35rem 0.7rem; border-bottom: 1px solid var(--border); font-size: 0.8rem; } .ev-sound label { flex: 1; margin: 0; } .ev-sound input[type=range] { width: 90px; accent-color: var(--accent); } .ev-list { list-style: none; margin: 0; padding: 0; } .ev-empty { padding: 0.8rem 0.7rem; color: var(--muted); font-size: 0.85rem; list-style: none; } /* #11 D3 prázdný stav */ .ev-item { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); cursor: pointer; border-left: 3px solid var(--accent); } .ev-item.lvl-warn { border-left-color: var(--warn); } .ev-item.lvl-important { border-left-color: var(--err); } .ev-item.read { opacity: 0.55; } .ev-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .ev-item .ev-title { font-size: 0.85rem; } .ev-item .ev-when { font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem; } .ev-empty { padding: 0.8rem; color: var(--muted); text-align: center; } /* Rozbalený detail události (tělo + akce: 🔊 přehrát, Otevřít) — #21 */ .ev-detail { margin-top: 0.45rem; } .ev-detail[hidden] { display: none; } .ev-body { font-size: 0.78rem; color: var(--muted); white-space: pre-wrap; line-height: 1.4; max-height: 40vh; overflow-y: auto; } .ev-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; } .ev-actions .ghost { font-size: 0.75rem; padding: 0.2rem 0.55rem; } /* Blikání zvonečku, dokud nepřečteno */ @keyframes evblink { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); filter: brightness(1.4); } } .events-btn.blink { animation: evblink 1s ease-in-out infinite; } /* #291 Balíček 10 — „pop" odznaku při REÁLNÉM přírůstku nepřečtených (scale pulse). Generické: třída badge-pop jde použít na jakýkoli odznak (vzor animateBarsIn). Gate body.anim-ui (jinak beze změny = nulová regrese); reduced-motion navíc vypne (obrana do hloubky — body.anim-ui se při reduced-motion stejně nenasadí). */ @keyframes badgePop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } } body.anim-ui .badge-pop { animation: badgePop 0.35s ease; } @media (prefers-reduced-motion: reduce) { body.anim-ui .badge-pop { animation: none; } } /* ─── Responsivní layout ─── */ /* Nastavení — MASONRY (à la Keep) přes grid + JS výpočet grid-row span. Sekce zůstávají v DOM (autosave funguje), skládají se kompaktně bez prázdna, rozbalení přepočítá JS (ResizeObserver) → posune jen sloupec, nerozsype obsah. Široké sloupce (x2). */ /* ─── Nastavení = Sidebar Settings Modal (dvousloupcové modální okno, à la Claude) ─── */ /* Overlay: vycentrované modální okno přes celou obrazovku + backdrop. Původní full-page panel je nahrazen — obsah (fieldsety) zůstává beze změny, mění se jen obal + styl. */ #settings.settings-overlay { display: none; } #settings.settings-overlay.active { display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding: clamp(0.4rem, 3vh, 2.4rem); background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(4px); /* #291 B12: vstupní fade přesunut pod body.anim-ui (overlayIn) — viz sekce Balíček 12 */ } .settings-modal { position: relative; display: flex; overflow: hidden; width: min(1040px, 100%); height: min(880px, 94vh); background: var(--panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); } .settings-close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 34px; height: 34px; border-radius: 999px; line-height: 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--muted); font-size: 1rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .settings-close:hover { color: var(--text); border-color: var(--accent); background: var(--bg); } /* Levý sloupec — sidebar: o odstín tmavší než obsah, search nahoře, vertikální menu */ .settings-sidebar { flex: 0 0 250px; width: 250px; display: flex; flex-direction: column; min-height: 0; background: color-mix(in srgb, var(--panel) 82%, #000); border-right: 1px solid var(--border); } .settings-side-head { padding: 1.1rem 1rem 0.7rem; } .settings-title { margin: 0 0 0.85rem; font-size: 1.05rem; font-weight: 700; color: var(--text); } .settings-search { width: 100%; margin: 0; padding: 0.5rem 0.8rem; border-radius: 10px; box-sizing: border-box; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.85rem; } .settings-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } /* Rozbalovací výběr kategorie — jen na mobilu (desktop má svislý seznam) */ .settings-cat-select { display: none; width: 100%; box-sizing: border-box; margin: 0.55rem 0 0; padding: 0.55rem 0.8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.9rem; font-family: inherit; } .settings-cat-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } /* Vertikální navigace — jemné nadpisy skupin + zvýrazněná aktivní položka */ .settings-sidebar .settings-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; padding: 0.2rem 0.6rem 1rem; margin: 0; overflow-y: auto; position: static; background: none; border: none; backdrop-filter: none; } .scat-group { padding: 0.9rem 0.7rem 0.3rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); opacity: .65; } .settings-sidebar .scat { display: flex; align-items: center; gap: 0.55rem; width: 100%; justify-content: flex-start; text-align: left; white-space: nowrap; cursor: pointer; padding: 0.5rem 0.7rem; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--muted); font-size: 0.88rem; font-weight: 500; transition: background .13s, color .13s; } .settings-sidebar .scat:hover:not(.active) { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); } .settings-sidebar .scat.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); font-weight: 600; border-color: transparent; box-shadow: none; transform: none; } /* Pravý sloupec — scrollovací obsah (jediné, co se scrolluje; sidebar fixní) */ .settings-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); } .cat-hidden { display: none !important; } .enc-badge { display: inline-block; margin-top: 0.3rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; } .enc-ok { color: var(--assist); background: color-mix(in srgb, var(--assist) 15%, transparent); } .enc-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); } /* Obsah pravého sloupce: jednosloupcový tok (masonry grid nahrazen; masonry JS je bez efektu) */ #settings .settings-content .scroll { display: block; flex: 1; min-height: 0; overflow-y: auto; padding: 1.5rem 1.7rem 1.8rem; padding-right: 1.3rem; } #settings #settings-form { display: contents; } /* fieldsety z formu přímo do toku */ /* Karty sekcí v modálu — vzdušnější, čistě oddělené */ #settings .settings-content .scroll > fieldset, #settings .settings-content #settings-form > fieldset { margin: 0 0 1.1rem; width: 100%; } /* Row-based justified layout: label vlevo, prvek vpravo (čistá svislá linie). Bezpečně jen na jednoduché řádky = přímé label.field děti fieldsetu bez textarea/slideru. */ .settings-content fieldset > label.field:not(:has(textarea)):not(:has(input[type=range])):not(:has(input[type=color])) { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0; padding: 0.7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); } .settings-content fieldset > label.field > span:first-child { color: var(--text); font-weight: 500; flex: 1 1 auto; } .settings-content fieldset > label.field > input:not([type=checkbox]):not([type=radio]), .settings-content fieldset > label.field > select { flex: 0 0 auto; width: auto; min-width: 14rem; max-width: 60%; } /* Tmavá zaoblená pole/selecty/textarey uvnitř nastavení */ .settings-content input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), .settings-content select, .settings-content textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 0.5rem 0.7rem; font-family: inherit; } .settings-content input:focus, .settings-content select:focus, .settings-content textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } /* Responsivita: na úzkém displeji modal přes celou plochu, sidebar jako horní lišta */ @media (max-width: 760px) { #settings.settings-overlay.active { padding: 0; } .settings-modal { width: 100%; height: 100%; border-radius: 0; flex-direction: column; } .settings-sidebar { flex: 0 0 auto; width: 100%; border-right: none; border-bottom: 1px solid var(--border); } /* Menu kategorií na mobilu = rozbalovací dropdown (svislý seznam žral půl displeje) */ .settings-sidebar .settings-nav { display: none; } .settings-cat-select { display: block; } .settings-side-head { padding: 0.7rem 0.9rem 0.7rem; } .settings-title { margin-bottom: 0.55rem; font-size: 0.98rem; } .settings-content fieldset > label.field > input:not([type=checkbox]):not([type=radio]), .settings-content fieldset > label.field > select { max-width: 55%; min-width: 0; } } #settings .scroll > fieldset, #settings #settings-form > fieldset { /* break-word (NE anywhere): normální slova se nepůlí uprostřed — láme se jen to, co se nevejde na celý řádek (URL, tokeny). „anywhere" na telefonu půlilo slova. */ margin: 0; min-width: 0; overflow-wrap: break-word; } #settings fieldset input, #settings fieldset textarea { max-width: 100%; } #settings fieldset select { max-width: 100%; width: 100%; } /* dlouhé názvy zařízení nepřetékají */ /* FIX (Chrome fieldset quirk): label.field jako přímé dítě fieldsetu mimo formulář se umí smrsknout na width 0 (text pak „co písmeno to řádka" a sekce přetéká — Podpořit projekt). Explicitní plná šířka to řeší; flex/grid řádky (.pull-row/.grid2) si ji normálně zkrátí přes flex-shrink / grid buňku. */ #settings fieldset label.field { width: 100%; box-sizing: border-box; } /* Dlouhé neděl(itel)né řetězce (BTC adresa, tokeny, URL) — zalamovat po znacích jen tam */ #donate_addr { word-break: break-all; } /* Akční řádky a tabulky nesmí přetékat sekci */ #settings .form-actions { flex-wrap: wrap; } #settings .pull-row { flex-wrap: wrap; } #settings .pull-row .field { flex: 1 1 10rem; } #en_table { overflow-x: auto; } .changelog-body { max-height: 24rem; overflow-y: auto; font-size: 0.85rem; padding-right: 0.4rem; } .changelog-body h3 { font-size: 0.95rem; color: var(--accent); margin: 0.8rem 0 0.3rem; } /* ## verze */ .changelog-body h4 { font-size: 0.85rem; margin: 0.5rem 0 0.2rem; } /* ### sekce */ .changelog-body ul { margin: 0.2rem 0 0.5rem; padding-left: 1.2rem; } .changelog-body li { margin: 0.15rem 0; } /* #341 audit changelogu */ .changelog-audit { margin-top: 0.6rem; font-size: 0.82rem; } .cl-audit-head { font-weight: 600; margin-bottom: 0.4rem; } .cl-audit-head.ok { color: var(--ok, #2e9e4f); } .cl-audit-head.bad { color: var(--danger, #d9534f); } .cl-audit-list { list-style: none; margin: 0; padding: 0; max-height: 20rem; overflow-y: auto; } .cl-audit-list li { margin: 0.15rem 0; line-height: 1.35; } .cl-audit-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 0 0.35rem; border-radius: 0.3rem; margin-right: 0.35rem; vertical-align: baseline; } .sev-err .cl-audit-badge { background: var(--danger, #d9534f); color: #fff; } .sev-warn .cl-audit-badge { background: var(--warn, #e0a800); color: #222; } /* Chat/vibe: na moc širokých omez šířku zpráv, ať se neroztáhnou přes celou obrazovku */ @media (min-width: 1800px) { .chat-main, #vibecoding .chat-main { max-width: 1400px; margin: 0 auto; width: 100%; } } /* Tablet */ @media (max-width: 1024px) { main { padding: 0.6rem; } .history { width: 190px; } } /* Telefon (laděno na ~412 px — Nothing Phone 1 apod.) */ @media (max-width: 760px) { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* žádné auto-zvětšování textu */ header { gap: 0.5rem; flex-wrap: wrap; padding: calc(0.5rem + env(safe-area-inset-top)) calc(0.6rem + env(safe-area-inset-right)) 0.5rem calc(0.6rem + env(safe-area-inset-left)); } header h1 { font-size: 0.95rem; } nav#tabs { padding: 0.3rem 0.5rem 0; overflow-x: auto; } main { padding: 0.4rem; } .chat-wrap { flex-direction: column; gap: 0.4rem; } /* Historie chatů = vysouvací drawer (jako ChatGPT) — otevírá hamburger ☰ */ .history { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: 82%; max-width: 300px; resize: none; min-width: 0; flex-direction: column; flex-wrap: nowrap; max-height: none; overflow-y: auto; background: var(--panel); box-shadow: 2px 0 14px rgba(0, 0, 0, 0.35); padding: 0.8rem; transform: translateX(-100%); transition: transform 0.22s ease; } .history.open { transform: none; } .history-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.45); } .history-backdrop[hidden] { display: none; } .history-toggle { display: inline-flex; align-self: flex-start; margin: 0 0 0.4rem; } .events-panel { width: calc(100vw - 1rem); right: 0.5rem; top: 3.5rem; } #settings .scroll { grid-template-columns: 1fr; } .model-select { max-width: 8rem; } /* větší dotykové cíle + composer, který se vejde (ikony se nezalamují mimo) */ #chat-form { flex-wrap: wrap; } #chat-form textarea { flex: 1 1 100%; order: -1; } /* pole přes celou šířku, tlačítka pod ním */ .icon-btn, #chat_send { min-height: 44px; } /* doporučený tap target */ input, select, textarea, button { font-size: 16px; } /* <16px na iOS/Androidu zoomuje do pole */ .msg-actions { flex-wrap: wrap; } .tmpl-menu { left: 0; right: 0; min-width: 0; } .settings-nav { position: static; } /* sticky lišta nežere půlku výšky */ } /* #160 Mobilní Quick Action bar — fixní spodní lišta rychlých akcí (ovládání jednou rukou). Default SKRYTÁ (desktop) → objeví se JEN na mobilu a jen když ji uživatel nevypnul (body.quickbar-off) a nepíše (body.kb-open → schová se, ať nepřekáží nad klávesnicí). */ .mobile-quickbar { display: none; } @media (max-width: 760px) { body:not(.quickbar-off):not(.kb-open) .mobile-quickbar { display: flex; justify-content: space-around; align-items: stretch; gap: 0.15rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: var(--panel); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.28); padding: 0.25rem calc(0.3rem + env(safe-area-inset-right, 0px)) calc(0.25rem + env(safe-area-inset-bottom, 0px)) calc(0.3rem + env(safe-area-inset-left, 0px)); } /* Hlavní obsah nesmí končit pod lištou — prostor dole (jen když je lišta reálně vidět). */ body:not(.quickbar-off):not(.kb-open) main { padding-bottom: 4.4rem; } .qb-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.12rem; min-height: 44px; padding: 0.25rem 0.1rem; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.62rem; line-height: 1.1; border-radius: 8px; -webkit-tap-highlight-color: transparent; } .qb-btn .qb-ico { font-size: 1.25rem; line-height: 1; } .qb-btn .qb-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qb-btn.active { color: var(--accent); } .qb-btn:active { background: color-mix(in srgb, var(--accent) 14%, transparent); } .qb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } } /* #244 Mobilní „⚡ Rychlé akce" — plovoucí tlačítko (FAB) + spodní panel task-zkratek. Vše SKRYTÉ na desktopu → objeví se JEN na mobilu (@media 760px). FAB je vidět, když uživatel featuru nevypnul (body.qa-off) a nepíše (body.kb-open). Panel/backdrop jen když je otevřený (body.qa-open). FAB se posadí NAD #160 spodní lištu, pokud je zapnutá. */ .qa-fab, .qa-sheet, .qa-backdrop { display: none; } @media (max-width: 760px) { body:not(.qa-off):not(.kb-open) .qa-fab { display: flex; align-items: center; justify-content: center; position: fixed; right: calc(0.9rem + env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 66; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); -webkit-tap-highlight-color: transparent; } /* Když je #160 spodní lišta reálně vidět, posaď FAB nad ni (ať se nepřekrývají). */ body:not(.qa-off):not(.kb-open):not(.quickbar-off) .qa-fab { bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); } .qa-fab-ico { font-size: 1.4rem; line-height: 1; } body:not(.qa-off) .qa-fab:active { transform: scale(0.94); } body:not(.qa-off) .qa-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Ztmavené pozadí pod panelem (klik zavře). */ body.qa-open .qa-backdrop { display: block; position: fixed; inset: 0; z-index: 74; background: rgba(0, 0, 0, 0.45); } /* Spodní panel (bottom sheet) — vyjede zdola, když je qa-open. */ body.qa-open .qa-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; background: var(--panel); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); padding: 0.6rem calc(0.6rem + env(safe-area-inset-right, 0px)) calc(0.7rem + env(safe-area-inset-bottom, 0px)) calc(0.6rem + env(safe-area-inset-left, 0px)); } .qa-sheet-head { font-weight: 600; font-size: 0.95rem; color: var(--text); text-align: center; padding: 0.2rem 0 0.6rem; } .qa-actions { display: flex; flex-direction: column; gap: 0.35rem; } .qa-item { display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 0.95rem; text-align: left; -webkit-tap-highlight-color: transparent; } .qa-item .qa-ico { font-size: 1.3rem; line-height: 1; flex: 0 0 auto; } .qa-item .qa-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qa-item:active { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); } .qa-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } } /* Sbalená sekce — větší, čitelnější nadpis (ať „neplave" v půlce rámečku) */ #settings fieldset.collapsible:not(.open) > legend { font-size: 1.05rem; } /* Sbalovací sekce nastavení (jednorázová) — legend = přepínač, default sbaleno */ #settings fieldset.collapsible > legend { cursor: pointer; user-select: none; } #settings fieldset.collapsible > legend::before { content: "▸ "; display: inline-block; transition: transform 0.15s; } #settings fieldset.collapsible.open > legend::before { transform: rotate(90deg); } #settings fieldset.collapsible:not(.open) { padding-bottom: 0.4rem; } #settings fieldset.collapsible:not(.open) > *:not(legend) { display: none; } /* #124 — sbalovací sekce Návrhů v Šichtě: legend = přepínač, default ROZBALENO (glyf z JS ▾/▸, nezávisle na settings mechanismu výše). Sbalení skryje tělo (vč. dlouhého seznamu návrhů). */ .legend-toggle { cursor: pointer; user-select: none; } .collapse-ind { display: inline-block; font-size: 0.8em; opacity: 0.65; } #shift fieldset.collapsible.collapsed { padding-bottom: 0.4rem; } #shift fieldset.collapsible.collapsed > *:not(legend) { display: none; } /* Oddělovač uvnitř sloučených sekcí */ .sec-div { border: none; border-top: 1px solid var(--border); margin: 0.8rem 0 0.6rem; } /* Masonry: nic nesmí vyčuhovat z úzké sekce (slidery, .grid2, selecty) */ #settings fieldset > *, #settings fieldset label { max-width: 100%; box-sizing: border-box; } #settings fieldset input[type=range] { width: 100%; } #settings fieldset .grid2 { grid-template-columns: 1fr; } /* v úzkém sloupci 1 pole pod druhým */ /* Nadpis sekce posunout dovnitř (ať nesedí napůl na horní hraně / nepřetéká) */ #settings fieldset, #agents fieldset { padding-top: 0.4rem; } #settings fieldset > legend, #agents fieldset > legend { float: left; width: 100%; margin: 0 0 0.6rem; padding: 0; } #settings fieldset > legend + *, #agents fieldset > legend + * { clear: both; } /* Výčet logů v sekci Logy */ .log-view { max-height: 16rem; overflow: auto; background: var(--code-bg); color: var(--text); font-family: ui-monospace, monospace; font-size: 0.72rem; padding: 0.5rem; border-radius: 6px; white-space: pre-wrap; word-break: break-all; margin: 0.4rem 0 0; } /* Podsekce (sloučené sekce jako rozbalovací details) */ #settings .subsec { margin-top: 0.3rem; border-top: 0; } #settings .subsec > summary { cursor: pointer; font-weight: 700; color: var(--accent); font-size: 0.98rem; padding: 0.3rem 0; list-style: none; } #settings .subsec > summary::before { content: "▸ "; } #settings .subsec[open] > summary::before { content: "▾ "; } /* Banner ztráty spojení (živá stránka) */ .offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--err); color: #fff; text-align: center; padding: 0.45rem; font-size: 0.85rem; font-weight: 600; box-shadow: var(--shadow); } .offline-banner[hidden] { display: none; } .offline-queue-badge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: rgba(0,0,0,0.28); font-size: 0.78rem; font-weight: 700; } .offline-queue-badge[hidden] { display: none; } /* Verze aplikace v headeru */ .app-version { color: var(--muted); font-size: 0.7rem; opacity: 0.75; align-self: center; } /* #207 — verzní drift (běžící orchestrátor ≠ kód na disku): zvýraznit varovně, ať je hned vidět. */ /* #230 — drift banner je klikací (klik = rovnou restart SmarTea) → pointer + náznak podtržení. */ .app-version.drift { color: var(--warn); opacity: 1; font-weight: 600; cursor: pointer; white-space: nowrap; animation: versionDriftPulse 1.6s ease-in-out infinite; text-decoration: underline dotted; } .app-version.drift:hover { text-decoration-style: solid; } .app-version.drift:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; border-radius: 4px; } @keyframes versionDriftPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } } .topbar-clock { color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; } @media (max-width: 640px) { .topbar-clock { font-size: 0.75rem; } } /* Hledání v historii hovorů */ .history-search { width: 100%; padding: 0.42rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.85rem; box-sizing: border-box; } .history-search:focus { outline: none; border-color: var(--accent); } /* Import zálohy — tlačítko-label */ .backup-import-lbl { display: inline-block; padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 0.85rem; } .backup-import-lbl:hover { border-color: var(--accent); } /* ─── Markdown v chatu ─── */ .msg-text h2 { font-size: 1.15rem; margin: 0.5rem 0 0.3rem; } .msg-text h3 { font-size: 1.05rem; margin: 0.5rem 0 0.3rem; } .msg-text h4 { font-size: 0.98rem; margin: 0.4rem 0 0.2rem; color: var(--accent); } .msg-text h5 { font-size: 0.92rem; margin: 0.4rem 0 0.2rem; color: var(--accent); } /* #367 #### */ .msg-text h6 { font-size: 0.88rem; margin: 0.4rem 0 0.2rem; color: var(--muted); } /* #367 #####/###### */ .msg-text del { text-decoration: line-through; opacity: 0.65; } /* #367 ~~přeškrtnutí~~ */ .msg-text ul, .msg-text ol { margin: 0.3rem 0; padding-left: 1.2rem; } .msg-text ol { list-style-type: decimal; } /* #365 číslované seznamy (1. 2. …) */ .msg-text li { margin: 0.1rem 0; } .msg-text a { color: var(--accent); } .md-inline { background: var(--code-bg); padding: 0.05rem 0.3rem; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 0.88em; } .md-code { position: relative; background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.7rem; margin: 0.4rem 0; overflow-x: auto; } .md-code code { font-family: ui-monospace, monospace; font-size: 0.82rem; white-space: pre; display: block; } .md-copy, .msg-copy { position: absolute; top: 0.3rem; right: 0.3rem; padding: 0.1rem 0.35rem; font-size: 0.78rem; background: var(--elevated); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; opacity: 0.7; } .md-copy:hover, .msg-copy:hover { opacity: 1; } .line.assist { position: relative; } /* #382 — akce odpovědi (📋 📌 🔊) sedí POD zprávou (à la Open WebUI), ne v pravém rohu; na hover-schopných zařízeních se vynoří až při najetí na zprávu (na dotyku stále vidět). */ .msg-copy { top: auto; bottom: 0; right: auto; left: 0; border-radius: 7px; } /* #350 — „🔊 Přečíst nahlas" vedle 📋. Skryté, dokud není TTS dostupné (body.voice-tts); „playing" = právě čte tuhle odpověď (⏹). */ .msg-speak { position: absolute; top: auto; bottom: 0; right: auto; left: 4.6rem; padding: 0.1rem 0.35rem; font-size: 0.78rem; background: var(--elevated); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; opacity: 0.7; display: none; } .msg-speak:hover { opacity: 1; } .msg-speak.playing { opacity: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); } body.voice-tts .msg-speak { display: inline-block; } /* #351 — 📌 uložit připomínku (vedle 📋 kopírovat) */ .msg-remind { position: absolute; top: auto; bottom: 0; right: auto; left: 2.3rem; padding: 0.1rem 0.35rem; font-size: 0.78rem; background: var(--elevated); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; opacity: 0.7; } .msg-remind:hover { opacity: 1; } @media (hover: hover) { .line.assist .msg-copy, .line.assist .msg-remind, body.voice-tts .line.assist .msg-speak { opacity: 0; transition: opacity 0.15s ease; } .line.assist:hover .msg-copy, .line.assist:hover .msg-remind { opacity: 0.85; } body.voice-tts .line.assist:hover .msg-speak { opacity: 0.85; } .line.assist .msg-copy:hover, .line.assist .msg-remind:hover { opacity: 1; } body.voice-tts .line.assist .msg-speak:hover { opacity: 1; } .line.assist .msg-speak.playing { opacity: 1; } } /* Akce pod odpovědí (znovu / upravit) */ .msg-actions { display: flex; gap: 0.4rem; margin: 0.2rem 0 0.4rem; } .msg-actions button { padding: 0.15rem 0.55rem; font-size: 0.78rem; } /* Připnutý hovor */ .history-item.pinned { border-left: 2px solid var(--accent); } .history-item .h-check { margin-right: 0.4rem; vertical-align: top; cursor: pointer; accent-color: var(--accent); } .history-bulk { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; padding: 0.4rem 0.5rem; margin-bottom: 0.4rem; background: var(--elevated); border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; } .history-bulk span { flex: 1; color: var(--muted); } .history-bulk button { padding: 0.25rem 0.5rem; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-size: 0.78rem; } .history-bulk button.danger { background: var(--err); color: #fff; border-color: var(--err); } .history-bulk button.ghost { background: transparent; color: var(--text); } /* Hodnocení odpovědi */ .msg-actions .rated { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); } /* ─── Command palette (Ctrl+K) ─── */ .cmd-palette { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.45); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; } .cmd-palette[hidden] { display: none; } .cmd-box { width: min(620px, 92vw); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } #cmd-input { width: 100%; padding: 0.8rem 1rem; border: none; border-bottom: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 1rem; } #cmd-input:focus { outline: none; } .cmd-list { list-style: none; margin: 0; padding: 0.3rem; max-height: 50vh; overflow-y: auto; } .cmd-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.7rem; border-radius: 6px; cursor: pointer; } .cmd-item.sel, .cmd-item:hover { background: var(--elevated); } .cmd-kind { font-size: 0.72rem; color: var(--muted); } /* Nápověda klávesových zkratek (#344) — overlay se seznamem zkratek */ .kbd-help-box { padding: 0; } .kbd-help-head { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); } .kbd-help-body { padding: 0.4rem 1rem 0.6rem; max-height: 60vh; overflow-y: auto; } .kbd-help-group { margin-top: 0.7rem; } .kbd-help-group:first-child { margin-top: 0.2rem; } .kbd-help-group h4 { margin: 0 0 0.35rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .kbd-help-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.3rem 0; } .kbd-help-keys { display: flex; gap: 0.25rem; flex-shrink: 0; } .kbd-help-desc { color: var(--text); font-size: 0.9rem; } .kbd-help-foot { padding: 0.6rem 1rem; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--muted); } kbd { display: inline-block; padding: 0.1rem 0.45rem; min-width: 1.4em; text-align: center; font-family: inherit; font-size: 0.8rem; line-height: 1.4; color: var(--text); background: var(--elevated); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; box-shadow: 0 1px 0 var(--border); } /* Příloha v chatu */ .attach-chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem; margin-bottom: 0.4rem; background: var(--elevated); border: 1px solid var(--border); border-radius: 6px; font-size: 0.82rem; width: fit-content; } .brief-out { margin-top: 0.6rem; padding: 0.7rem 0.9rem; background: var(--elevated); border: 1px solid var(--border); border-radius: 8px; white-space: pre-wrap; line-height: 1.5; font-size: 0.9rem; } .brief-days { display: flex; flex-wrap: wrap; gap: 0.4rem; } .brief-day { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; padding: 0.35rem 0.45rem; border: 1px solid var(--border); border-radius: 8px; background: var(--elevated); } .brief-day input[type=time] { font-size: 0.85rem; } .brief-secs { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; } .attach-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; } .attach-x:hover { color: var(--err); } .attach-thumb { height: 2rem; width: 2rem; object-fit: cover; border-radius: 4px; vertical-align: middle; } .msg-altmodel { font-size: 0.78rem; padding: 0.15rem 0.3rem; max-width: 12rem; } .tmpl-menu { position: absolute; bottom: 3.2rem; left: 0.5rem; z-index: 40; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.3rem; min-width: 15rem; max-height: 50vh; overflow-y: auto; } .tmpl-row { display: flex; align-items: center; gap: 0.3rem; } .tmpl-use { flex: 1; text-align: left; background: none; border: none; color: var(--text); padding: 0.35rem 0.5rem; border-radius: 6px; cursor: pointer; } .tmpl-use:hover { background: var(--panel); } .tmpl-del { background: none; border: none; color: var(--muted); cursor: pointer; } .tmpl-del:hover { color: var(--err); } .tmpl-add { width: 100%; text-align: left; margin-top: 0.3rem; padding: 0.35rem 0.5rem; background: none; border: 1px dashed var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 0.82rem; } .tmpl-add:hover { color: var(--text); border-color: var(--accent); } /* #186 Prompt Recipes — inline formulář pojmenovaných proměnných v menu šablon */ .tmpl-vars { padding: 0.25rem 0.15rem; } .tmpl-vars-h { font-size: 0.82rem; color: var(--muted); padding: 0.2rem 0.4rem 0.35rem; } .tmpl-var-row { display: flex; align-items: center; gap: 0.4rem; margin: 0.25rem 0; } .tmpl-var-lbl { flex: 0 0 auto; min-width: 4.5rem; max-width: 8rem; font-size: 0.8rem; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tmpl-var-in { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 0.3rem 0.45rem; font-size: 0.85rem; } .tmpl-var-in:focus { outline: none; border-color: var(--accent); } .tmpl-vars-bar { display: flex; gap: 0.4rem; margin-top: 0.45rem; } .tmpl-var-back { flex: 0 0 auto; background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 0.3rem 0.55rem; cursor: pointer; font-size: 0.82rem; } .tmpl-var-back:hover { color: var(--text); border-color: var(--accent); } .tmpl-var-ok { flex: 1; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 6px; padding: 0.3rem 0.55rem; cursor: pointer; font-weight: 600; } .tmpl-var-ok:hover { opacity: 0.92; } /* #286 Kapitolový systém — navigace v dlouhém hovoru (panel stejný vzor jako .tmpl-menu) */ .chapters-panel { position: absolute; bottom: 3.2rem; left: 0.5rem; z-index: 40; background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.4rem; min-width: 17rem; max-width: min(28rem, 92vw); max-height: 55vh; overflow-y: auto; } .chapters-head { font-weight: 600; font-size: 0.82rem; color: var(--muted); padding: 0.1rem 0.4rem 0.4rem; } .chapters-list { display: flex; flex-direction: column; gap: 0.15rem; } .chapter-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%; text-align: left; background: none; border: none; border-radius: 6px; padding: 0.4rem 0.5rem; cursor: pointer; color: var(--text); } .chapter-item:hover { background: var(--panel); } .chapter-title { font-size: 0.88rem; line-height: 1.25; } .chapter-meta { font-size: 0.72rem; color: var(--muted); } /* #286 klíčová slova kapitoly (téma úseku) — drobné štítky pod metadaty */ .chapter-kw { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.15rem; } .chapter-kw-tag { font-size: 0.66rem; line-height: 1.4; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 0.02rem 0.4rem; } /* krátké zvýraznění cílového tahu po skoku na kapitolu */ .line.chapter-target { animation: chapterFlash 1.6s ease; border-radius: 8px; } @keyframes chapterFlash { 0% { background: color-mix(in srgb, var(--accent) 38%, transparent); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .line.chapter-target { animation: none; } } /* #287 Fáze 2 — banner „Zapomínáš?" (kontextový reminder při otevření staršího hovoru) */ .resume-hint { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0.5rem 0.7rem; background: color-mix(in srgb, var(--accent) 12%, var(--elevated)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: var(--radius); font-size: 0.86rem; color: var(--text); } .resume-hint[hidden] { display: none; } .resume-hint-body { flex: 1; min-width: 0; line-height: 1.3; } .resume-hint-icon { margin-right: 0.35rem; } .resume-hint-topic { font-weight: 600; } .resume-hint-close { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0.1rem 0.3rem; border-radius: 6px; line-height: 1; } .resume-hint-close:hover { background: var(--panel); color: var(--text); } body.anim-ui .resume-hint { animation: resumeIn 0.35s ease; } @keyframes resumeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .resume-hint { animation: none !important; } } /* #284 — nenápadný štítek s tónem hovoru (emoční/profesní „barva" fáze) nad výpisem */ .tone-chip { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.5rem; padding: 0.2rem 0.55rem; background: color-mix(in srgb, var(--accent) 8%, var(--elevated)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 999px; font-size: 0.78rem; color: var(--muted); } .tone-chip[hidden] { display: none; } .tone-chip-icon { font-size: 0.9rem; line-height: 1; } .tone-chip-label { font-weight: 600; color: var(--text); } /* #260 Kontextový okruh — „📌 Aktuální kontext" z minulého hovoru nad prázdným chatem */ .context-ring { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; padding: 0.4rem 0.6rem; background: color-mix(in srgb, var(--accent) 10%, var(--elevated)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--radius); font-size: 0.8rem; color: var(--text); } .context-ring[hidden] { display: none; } .context-ring-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; flex: 1; min-width: 0; } .context-ring-icon { line-height: 1; } .context-ring-lead { color: var(--muted); font-weight: 600; } .context-ring-chip { display: inline-flex; align-items: center; gap: 0.28rem; max-width: min(20rem, 55vw); padding: 0.16rem 0.5rem; background: color-mix(in srgb, var(--accent) 8%, var(--elevated)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 999px; } .context-ring-chip.ctxr-date { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .ctxr-chip-icon { font-size: 0.85rem; line-height: 1; } .ctxr-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .context-ring-open { flex: none; background: none; border: 1px solid var(--border); color: var(--accent); cursor: pointer; font-size: 0.76rem; padding: 0.15rem 0.5rem; border-radius: 999px; line-height: 1.2; } .context-ring-open:hover { background: var(--panel); } .context-ring-close { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0.1rem 0.3rem; border-radius: 6px; line-height: 1; } .context-ring-close:hover { background: var(--panel); color: var(--text); } body.anim-ui .context-ring { animation: resumeIn 0.35s ease; } @media (prefers-reduced-motion: reduce) { .context-ring { animation: none !important; } } /* #285 Transkriptivní markery — klikatelná klíčová slova hovoru (téma/datum) nad výpisem */ .transcript-markers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.5rem; padding: 0.4rem 0.6rem; background: color-mix(in srgb, var(--accent) 8%, var(--elevated)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--radius); font-size: 0.8rem; color: var(--text); } .transcript-markers[hidden] { display: none; } .tmark-lead { color: var(--muted); font-weight: 600; flex: none; } .tmark-chip { display: inline-flex; align-items: center; gap: 0.28rem; max-width: min(18rem, 50vw); padding: 0.16rem 0.5rem; background: color-mix(in srgb, var(--accent) 8%, var(--elevated)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 999px; color: var(--text); cursor: pointer; font-size: 0.78rem; line-height: 1.2; } .tmark-chip:hover { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); } .tmark-chip.tmark-date { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .tmark-chip-icon { font-size: 0.85rem; line-height: 1; } .tmark-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.anim-ui .transcript-markers { animation: resumeIn 0.35s ease; } @media (prefers-reduced-motion: reduce) { .transcript-markers { animation: none !important; } } /* #117 Session piny — dočasně přikotvené fakty hovoru (chips nad inputem) */ .session-pins { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.4rem; } .session-pins[hidden] { display: none; } .session-pins-label { font-size: 0.9rem; line-height: 1; margin-right: 0.15rem; } .session-pin-chip { display: inline-flex; align-items: center; gap: 0.3rem; max-width: min(22rem, 60vw); padding: 0.18rem 0.3rem 0.18rem 0.55rem; background: color-mix(in srgb, var(--accent) 8%, var(--elevated)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 999px; font-size: 0.78rem; color: var(--text); } .session-pin-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .session-pin-x { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0 0.15rem; border-radius: 50%; } .session-pin-x:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, transparent); } /* #255 Fáze 2 — nenápadná lišta „přidat úkol z chatu" (nad inputem) */ .todo-suggest { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.5rem; padding: 0.4rem 0.6rem; background: color-mix(in srgb, var(--accent) 10%, var(--elevated)); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: var(--radius); font-size: 0.84rem; } .todo-suggest[hidden] { display: none; } .todo-suggest .ts-lead { color: var(--muted); flex: none; } .todo-suggest .ts-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; flex: 1; min-width: 0; } .todo-suggest .ts-chip { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.82rem; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .todo-suggest .ts-chip:hover { background: color-mix(in srgb, var(--accent) 28%, var(--panel)); } .todo-suggest .ts-chip.added { opacity: 0.65; cursor: default; } .todo-suggest .ts-close { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 0.1rem 0.3rem; border-radius: 6px; line-height: 1; } .todo-suggest .ts-close:hover { background: var(--panel); color: var(--text); } body.anim-ui .todo-suggest { animation: resumeIn 0.35s ease; } /* #356 — nenápadné počítadlo znaků/slov nad composerem (jen u delších zpráv) */ .char-count { display: flex; justify-content: flex-end; margin: 0 0.2rem 0.3rem; color: var(--muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; pointer-events: none; user-select: none; } .char-count[hidden] { display: none; } /* #259 — lišta „přidat událost do kalendáře z chatu" (analogická .todo-suggest) */ .cal-suggest { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.5rem; padding: 0.4rem 0.6rem; background: color-mix(in srgb, var(--accent) 10%, var(--elevated)); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: var(--radius); font-size: 0.84rem; } .cal-suggest[hidden] { display: none; } .cal-suggest .cs-lead { color: var(--muted); flex: none; } .cal-suggest .cs-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; flex: 1; min-width: 0; } .cal-suggest .cs-chip { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); cursor: pointer; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.82rem; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-suggest .cs-chip:hover { background: color-mix(in srgb, var(--accent) 28%, var(--panel)); } .cal-suggest .cs-chip.added { opacity: 0.65; cursor: default; } .cal-suggest .cs-gcal { flex: none; background: color-mix(in srgb, var(--accent) 22%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--text); cursor: pointer; padding: 0.2rem 0.42rem; border-radius: 999px; font-size: 0.82rem; line-height: 1.2; } .cal-suggest .cs-gcal:hover { background: color-mix(in srgb, var(--accent) 34%, var(--panel)); } .cal-suggest .cs-gcal.added { opacity: 0.7; cursor: default; } .cal-suggest .cs-close { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 0.1rem 0.3rem; border-radius: 6px; line-height: 1; } .cal-suggest .cs-close:hover { background: var(--panel); color: var(--text); } body.anim-ui .cal-suggest { animation: resumeIn 0.35s ease; } @media (prefers-reduced-motion: reduce) { .todo-suggest { animation: none !important; } } /* #258 — filtr zpráv v chatu podle role (Vše / 👤 Já / 🤖 Asistent). Klient-side zobrazovací filtr; skrytí přes třídu na #log (robustní :not — přežije re-render). */ .role-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.5rem; font-size: 0.82rem; } .role-filter[hidden] { display: none; } .role-filter .rf-lead { color: var(--muted); flex: none; margin-right: 0.1rem; } .role-filter .rf-btn { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--text); cursor: pointer; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.82rem; line-height: 1.25; display: inline-flex; align-items: center; gap: 0.3rem; } .role-filter .rf-btn:hover { background: color-mix(in srgb, var(--accent) 20%, var(--panel)); } .role-filter .rf-btn.active { background: color-mix(in srgb, var(--accent) 32%, var(--panel)); border-color: var(--accent); font-weight: 600; } .role-filter .rf-count { color: var(--muted); font-size: 0.75rem; } .role-filter .rf-btn.active .rf-count { color: var(--text); } /* aplikace filtru na chat log — skryje vše kromě zvolené role */ #log.rolefilter-user > *:not(.user) { display: none !important; } #log.rolefilter-assist > *:not(.assist) { display: none !important; } body.anim-ui .role-filter { animation: resumeIn 0.35s ease; } @media (prefers-reduced-motion: reduce) { .role-filter { animation: none !important; } } .msg-media { display: block; margin-top: 0.4rem; max-width: min(420px, 90%); border-radius: 8px; } audio.msg-media { width: min(360px, 90%); } #chat.drag-over { position: relative; outline: 2px dashed var(--accent); outline-offset: -6px; } #chat.drag-over::after { content: "📎 Pusť obrázek / soubor sem"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 70%, transparent); font-size: 1.1rem; pointer-events: none; z-index: 5; } .msg-image { display: block; max-width: min(320px, 80%); max-height: 320px; margin-top: 0.4rem; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; } /* #254: klik → lightbox */ /* Průvodce importem z AI exportu (#135) */ .import-wizard { border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem 1.4rem; max-width: 460px; background: var(--panel, var(--bg)); color: var(--fg); } .import-wizard::backdrop { background: rgba(0, 0, 0, 0.45); } .import-wizard h3 { margin: 0 0 0.5rem; } .import-wizard .hint { margin: 0 0 0.9rem; font-size: 0.88rem; } .import-wizard .import-opt { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.45rem 0; cursor: pointer; } .import-wizard-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem; flex-wrap: wrap; } /* Projekty (#135 Fáze 2) */ .projects-panel { margin: 0.4rem 0 0.6rem; } .importfiles-bottom { margin-top: 0.7rem; border-top: 1px solid var(--border); padding-top: 0.6rem; } .projects-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; font-weight: 600; opacity: 0.85; margin-bottom: 0.3rem; } .projects-list { list-style: none; margin: 0; padding: 0; } .project-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: 8px; cursor: pointer; } .project-item:hover { background: var(--hover, rgba(127,127,127,0.12)); } .project-item .h-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* #151: koš smazaných chatů */ .trash-item { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.3rem 0.4rem; border-radius: 8px; } .trash-item:hover { background: var(--hover, rgba(127,127,127,0.12)); } .trash-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; } .trash-acts { display: inline-flex; gap: 0.25rem; flex: none; } .trash-acts button { font-size: 0.72rem; padding: 0.1rem 0.4rem; } .trash-panel .muted.small { font-size: 0.75rem; opacity: 0.7; } /* #314: štítky/tagy kontaktů v Adresáři — klikací „chips" (klik → filtr podle štítku) */ .tag-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; } .tag-chip { font: inherit; font-size: 0.72rem; line-height: 1; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg, transparent); color: var(--muted); cursor: pointer; white-space: nowrap; } .tag-chip:hover { border-color: var(--accent); color: var(--accent); } /* Osobní CRM — profily osob + detail (vztahy/zážitky) — #166 */ .person-item { flex-direction: column; align-items: stretch; cursor: default; } /* #277 Fáze 2: nepovýšený kontakt v adresáři lidí — lehčí, s tečkovaným pruhem vlevo */ .contact-lite { flex-direction: column; align-items: stretch; cursor: default; border-left: 2px dotted var(--border); } .contact-lite .h-title { opacity: 0.85; } .person-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; cursor: pointer; } .contact-lite .person-head { cursor: default; } .person-head .h-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person-detail { margin-top: 0.5rem; padding: 0.5rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; } .person-info { display: flex; flex-direction: column; gap: 0.15rem; } .person-section { display: flex; flex-direction: column; gap: 0.25rem; } .person-sec-title { font-weight: 600; font-size: 0.8rem; opacity: 0.85; margin-top: 0.2rem; } .person-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } /* Narozeniny + svátek v detailu osoby (#307) */ .person-occ { display: flex; flex-direction: column; gap: 0.15rem; } .occ-row { font-size: 0.85rem; } .occ-when { color: var(--accent); font-weight: 600; } .occ-date, .occ-age { color: var(--muted); } .occ-sep { color: var(--muted); opacity: 0.7; } /* Klikací kontaktní údaje mailto:/tel: (#310) */ .ch-link { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; } .ch-link:hover, .ch-link:focus-visible { text-decoration: underline; } .ch-phone::before { content: "📞 "; } .ch-email::before { content: "✉️ "; } /* Odznak blížícího se výročí u osoby v seznamu Adresáře (#311) */ .person-name-cell { display: flex; align-items: center; gap: 0.35rem; min-width: 0; } .person-name-cell .h-title { overflow: hidden; text-overflow: ellipsis; } .occ-badge { flex: none; font-size: 0.72rem; color: var(--accent); white-space: nowrap; padding: 0.04rem 0.4rem; border: 1px solid var(--accent); border-radius: 999px; opacity: 0.92; } .person-addrel, .person-addnote, .person-addint { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.2rem; } .person-addrel select, .person-addrel input, .person-addnote input, .person-addint select, .person-addint input { flex: 1; min-width: 90px; } /* Rozpoznání osob z textu (#166 Fáze 2a) */ #person-extract { margin: 0.4rem 0 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; } #person-extract textarea { width: 100%; resize: vertical; min-height: 3.2em; } .person-extract-out { display: flex; flex-direction: column; gap: 0.4rem; } .person-suggest { padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); } .person-suggest.done { opacity: 0.6; } .person-suggest-name { font-weight: 600; } .person-suggest-note { font-size: 0.85rem; opacity: 0.85; margin: 0.15rem 0; } /* #330 C: odkaz „z chatu, kde se osoba identifikovala" → proklik zpět do hovoru */ .person-suggest-src { display: inline-flex; align-items: center; gap: 0.2rem; margin: 0.1rem 0 0.15rem; padding: 0.05rem 0.35rem; font-size: 0.8rem; color: var(--accent, #6c8cff); background: none; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person-suggest-src:hover { border-color: var(--accent, #6c8cff); text-decoration: underline; } .person-suggest-acts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; } .person-suggest-ok { color: var(--ok, #4caf50); font-weight: 600; font-size: 0.85rem; } /* #331: inline picker „Spojit s existující osobou" (select + tlačítka) v kartě návrhu detekce */ .person-suggest-picker { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; width: 100%; } .person-suggest-picker select { flex: 1 1 12rem; min-width: 8rem; } /* Vizuální graf vztahů (#166 Fáze 3) — SVG kruhový layout uzlů + hran. */ .person-graph-box { margin: 0.4rem 0 0.6rem; } .person-graph { margin-top: 0.3rem; border: 1px solid var(--border); border-radius: 12px; padding: 0.3rem; background: color-mix(in srgb, var(--bg) 92%, transparent); overflow: hidden; } .person-graph-svg { display: block; width: 100%; height: auto; max-height: 360px; } .pg-edge { stroke: var(--border); stroke-width: 1.4; opacity: 0.8; } .pg-edge-label { fill: var(--fg); opacity: 0.6; font-size: 8px; text-anchor: middle; dominant-baseline: middle; } .pg-node { cursor: pointer; } .pg-node:focus { outline: none; } .pg-node:focus .pg-dot, .pg-node:hover .pg-dot { stroke: var(--accent, #6ab); stroke-width: 2.5; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent, #6ab) 60%, transparent)); } .pg-dot { fill: color-mix(in srgb, var(--accent, #6ab) 22%, var(--card, #223)); stroke: var(--accent, #6ab); stroke-width: 1.4; transition: stroke-width 0.12s, filter 0.12s; } /* Ruční hrany + vybraný uzel (mapa paměti #332, Fáze B) */ .pg-edge-manual { stroke: var(--accent, #6ab); stroke-width: 2; opacity: 0.95; stroke-dasharray: 5 3; } .pg-node.pg-sel .pg-dot { stroke: var(--accent, #6ab); stroke-width: 3.2; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent, #6ab) 75%, transparent)); } .pg-node.pg-linking { cursor: crosshair; } .pg-glyph { font-size: 13px; text-anchor: middle; dominant-baseline: central; pointer-events: none; } .pg-name { fill: var(--fg); font-size: 9px; text-anchor: middle; dominant-baseline: hanging; pointer-events: none; } /* Dějová linie tématu (#288) — svislá časová osa zmínek konceptu */ .ctl-box { margin: 0.4rem 0 0.6rem; } #ctl_concept { min-width: 12rem; } .ctl-line { list-style: none; margin: 0.5rem 0 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--border); } .ctl-day { position: relative; margin: 0 0 0.7rem; } .ctl-day::before { content: ""; position: absolute; left: -1.32rem; top: 0.28rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent, #6ab); box-shadow: 0 0 0 3px var(--card, #223); } .ctl-date { font-weight: 600; font-size: 0.9rem; } .ctl-count { margin-left: 0.4rem; font-weight: 400; opacity: 0.6; font-size: 0.8rem; } .ctl-items { list-style: none; margin: 0.2rem 0 0; padding: 0; } .ctl-item { display: flex; gap: 0.4rem; align-items: baseline; padding: 0.12rem 0; font-size: 0.85rem; } .ctl-role { flex: 0 0 auto; } .ctl-time { flex: 0 0 auto; opacity: 0.6; font-variant-numeric: tabular-nums; font-size: 0.78rem; } .ctl-snippet { flex: 1 1 auto; color: var(--fg); opacity: 0.92; overflow-wrap: anywhere; } .project-dialog { max-width: 520px; } .project-dialog .pd-field { display: block; margin: 0.6rem 0; } .project-dialog .pd-field > span { display: block; font-size: 0.83rem; opacity: 0.8; margin-bottom: 0.2rem; } .project-dialog .pd-field input, .project-dialog .pd-field textarea { width: 100%; box-sizing: border-box; } .project-dialog .pd-chats-wrap { max-height: 180px; overflow: auto; margin-top: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.5rem; } .project-dialog .pd-docs-wrap { max-height: 200px; overflow: auto; margin-top: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.5rem; } .project-dialog .pd-docs-wrap .project-item { align-items: center; } .project-dialog .pd-docs-wrap .icon-btn { margin-left: auto; } /* #371 Úkoly projektu (To-Do sekce v dialogu projektu) */ .project-dialog .pd-todos-wrap { max-height: 200px; overflow: auto; margin-top: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.5rem; } .project-dialog .pd-todos-wrap .project-item { align-items: center; gap: 0.4rem; } .project-dialog .pd-todos-wrap .icon-btn { margin-left: auto; } .project-dialog .todo-row.done .h-title { text-decoration: line-through; opacity: 0.6; } .project-dialog .pd-todos-wrap .todo-due { margin-left: auto; } .project-dialog .pd-todos-wrap .todo-due + .icon-btn { margin-left: 0.3rem; } /* #376: je-li v řádku i odznak opakování, doprava odsune až on */ .project-dialog .pd-todos-wrap .todo-due:has(+ .todo-rep) { margin-left: auto; } .project-dialog .pd-todos-wrap .todo-rep { margin-left: auto; } .project-dialog .pd-todos-wrap .todo-due + .todo-rep { margin-left: 0.3rem; } .project-dialog .pd-todos-wrap .todo-rep + .icon-btn { margin-left: 0.3rem; } /* #377: priorita jde za termínem/opakováním, doprava odsune první odznak v řádku */ .project-dialog .pd-todos-wrap .todo-prio { margin-left: 0.3rem; } .project-dialog .pd-todos-wrap .todo-prio + .icon-btn { margin-left: 0.3rem; } /* #378: odznak podúkolů je poslední odznak řádku, checklist se zalomí pod něj */ .project-dialog .pd-todos-wrap .project-item { flex-wrap: wrap; } .project-dialog .pd-todos-wrap .todo-steps-badge { margin-left: 0.3rem; } .project-dialog .pd-todos-wrap .todo-steps-badge + .icon-btn { margin-left: 0.3rem; } .project-dialog .pd-todo-add { display: flex; gap: 0.4rem; margin-top: 0.4rem; } .project-dialog .pd-todo-add input { flex: 1; min-width: 0; } .todo-item .todo-proj { margin-left: 0.35rem; font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font-family: inherit; } .todo-item .todo-proj:hover { text-decoration: underline; } .import-wizard .pd-danger { margin-right: auto; color: #c0392b; } /* Progress importu (velký ZIP) */ .import-progress { height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; margin-top: 0.55rem; } .import-progress-bar { height: 100%; width: 0; border-radius: 4px; background: var(--accent, #4aa3df); transition: width 0.2s ease; } .import-progress-bar.indeterminate { width: 100% !important; animation: imp-indet 1.2s ease-in-out infinite; } @keyframes imp-indet { 0% { opacity: 0.35; } 50% { opacity: 1; } 100% { opacity: 0.35; } } #import-status { display: block; margin-top: 0.4rem; font-size: 0.86rem; } .md-quote { border-left: 3px solid var(--border); margin: 0.4rem 0; padding: 0.2rem 0.7rem; opacity: 0.82; font-size: 0.94em; } .proj-badge { display: inline-block; font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 6px; background: var(--hover, rgba(127,127,127,0.15)); border: 1px solid var(--border); cursor: pointer; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* Historie běhů plánované úlohy */ .sched-runs { margin-top: 0.4rem; padding-left: 0.5rem; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 0.2rem; } .sched-run-line { display: flex; flex-direction: column; font-size: 0.78rem; } .sched-run-res { color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.72rem; } /* Uvítací průvodce */ .wizard-box { padding: 1.2rem 1.4rem; } .wizard-box h2 { margin: 0 0 0.3rem; } .wizard-row { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.7rem 0; font-size: 0.9rem; } .wizard-row select { padding: 0.45rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } /* Herní režim panel — pole pod sebou */ #gaming-box .field { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.5rem 0; font-size: 0.88rem; } #gaming-box .field input { padding: 0.4rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); } /* Univerzální sdílená schránka */ #clip-box textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); } .clip-hist { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; max-height: 16rem; overflow-y: auto; } .clip-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 8px; } .clip-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 0.85rem; } .clip-meta { flex: 0 0 auto; white-space: nowrap; } .clip-cp { flex: 0 0 auto; padding: 0.1rem 0.45rem; } /* Recall prohlížeč */ .rc-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; max-height: 26rem; overflow-y: auto; } .rc-item { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; } .rc-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .rc-thumb { width: 100%; max-height: 180px; object-fit: cover; border-radius: 6px; margin-top: 0.4rem; cursor: zoom-in; border: 1px solid var(--border); } .rc-desc { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; font-style: italic; } .rc-viewbar { margin-top: 0.5rem; } .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .seg-btn { background: var(--panel); color: var(--muted); border: none; padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.85rem; } .seg-btn + .seg-btn { border-left: 1px solid var(--border); } .seg-btn.active { background: var(--accent); color: #fff; } .rc-session { border-left: 3px solid var(--accent); } .rc-range { color: var(--accent); font-size: 0.82rem; font-weight: 500; white-space: nowrap; } .rc-wins { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; } /* PC zařízení (multi-device) */ .pc-dev-list { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.4rem 0; } .pc-dev-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; } /* Graf vytížení PC */ .pm-chart { width: 100%; max-width: 100%; height: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; margin: 0.5rem 0; } /* Znalostní báze */ .kb-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } .kb-card { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem; } .kb-head { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.3rem; } .kb-sol { font-size: 0.85rem; } .kb-badge { font-size: 0.7rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 4px; } .kb-resolved { background: color-mix(in srgb, var(--assist) 25%, transparent); } .kb-failed { background: color-mix(in srgb, var(--err) 25%, transparent); } .kb-open { background: color-mix(in srgb, var(--warn) 25%, transparent); } /* Podpora projektu (BTC QR) */ .donate-qr { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 8px; } /* KB varování / predikce */ .kb-warn { background: color-mix(in srgb, var(--warn) 15%, transparent); border: 1px solid var(--warn); border-radius: 8px; padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; font-size: 0.85rem; } .kb-warn-item { margin-top: 0.2rem; } /* 🌡️ Teplotní ochrana — realtime dlaždice teplot */ .thermal-tiles { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; margin: 0.4rem 0 0.8rem; } .thermal-tile { flex: 1 1 84px; min-width: 84px; background: var(--elevated, var(--panel)); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.55rem 0.6rem; text-align: center; } .thermal-tile .tt-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .thermal-tile .tt-val { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.2; } .thermal-tile.th-warn { border-color: #d9a022; } .thermal-tile.th-warn .tt-val { color: #e0a92a; } .thermal-tile.th-throttle { border-color: #e2711d; } .thermal-tile.th-throttle .tt-val { color: #ec7c22; } .thermal-tile.th-crit { border-color: #d9433f; box-shadow: 0 0 0 1px #d9433f55; } .thermal-tile.th-crit .tt-val { color: #e5514c; } /* #129 — živý sparkline graf historie teplot/vytížení (klientský kruhový buffer nad /thermal/status) */ .thermal-spark { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.8rem; } .thermal-spark .spark-cell { flex: 1 1 130px; min-width: 120px; background: var(--elevated, var(--panel)); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.4rem 0.55rem; } .thermal-spark .spark-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; } .thermal-spark .spark-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .thermal-spark .spark-now { font-size: 0.9rem; font-weight: 700; color: var(--text); } .thermal-spark svg { display: block; width: 100%; height: 32px; margin-top: 0.25rem; overflow: visible; } .thermal-spark svg polyline { fill: none; stroke: var(--accent, #6aa9ff); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .thermal-spark .spark-empty { font-size: 0.72rem; color: var(--muted); margin-top: 0.35rem; } .thermal-state { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.1rem; } .th-badge { font-size: 0.8rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--elevated, var(--panel)); border: 1px solid var(--border); color: var(--muted); } .th-badge.th-ok { color: #3fae6b; border-color: #3fae6b66; } .th-badge.th-warn { color: #e0a92a; border-color: #e0a92a66; } .th-badge.th-throttle { color: #ec7c22; border-color: #ec7c2266; } .th-badge.th-crit { color: #e5514c; border-color: #e5514c; } .thermal-toggles { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0.2rem 0 0.5rem; } /* 🔔 Per-typ matice upozornění (#01) */ .notify-matrix { overflow-x: auto; } .notify-tbl { border-collapse: collapse; width: 100%; font-size: 0.92em; } .notify-tbl th, .notify-tbl td { padding: 0.28rem 0.5rem; text-align: center; } .notify-tbl th { font-weight: 600; } .notify-tbl td.nm-name { text-align: left; white-space: nowrap; } .notify-tbl tr:nth-child(even) td { background: rgba(127, 127, 127, 0.06); } .notify-tbl .nm-cell input { cursor: pointer; } /* ⚙️ Rutiny */ .routines-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; } .routine-item { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; } .routine-item > div:first-child { min-width: 0; overflow: hidden; } .routine-acts { display: flex; gap: 0.3rem; flex: none; } .routine-acts button { padding: 0.25rem 0.5rem; } #rt_steps { width: 100%; margin: 0.4rem 0; resize: vertical; } /* 📊 Přehled / HUD */ .dash-wrap { padding: 0.5rem; max-width: 1100px; margin: 0 auto; width: 100%; } /* 📇 Adresář (#228) — sekce sdružující kontakty/lidi/kalendář */ .dir-section { margin-top: 1.1rem; } .dir-section:empty { display: none; } /* #294 — vyhledávání/filtr v Adresáři (kontakty + lidé) */ .dir-search-wrap { display: flex; align-items: center; gap: 0.5rem; } .dir-search { flex: 1; min-width: 0; padding: 0.45rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.9rem; } .dir-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } .dir-search-count { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.85rem; } /* #295 — export adresáře (vCard/CSV) */ .dir-export-wrap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .dir-export-label { font-weight: 600; font-size: 0.9rem; } .dir-cal-list { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .dir-cal-list li { display: flex; gap: 0.6rem; align-items: baseline; } .dir-cal-when { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* #297 — duplicitní kontakty + sloučení */ .dir-dupl-groups { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.3rem; } .dupl-group { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.75rem; background: var(--bg); } .dupl-head { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.35rem; } .dupl-list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .dupl-list label { display: flex; gap: 0.5rem; align-items: baseline; cursor: pointer; font-size: 0.9rem; } .dupl-merge { font-size: 0.85rem; } /* 🎂 Nadcházející narozeniny (#299) */ .dir-bday-wrap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .dir-bday-within { padding: 0.3rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.85rem; } .dir-bday-within:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); } .bday-list { flex-basis: 100%; list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } .bday-row { display: flex; gap: 0.55rem; align-items: baseline; flex-wrap: wrap; padding: 0.3rem 0.55rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); font-size: 0.9rem; } .bday-row.bday-soon { border-color: var(--accent); box-shadow: var(--glow); } .bday-when { color: var(--accent); font-weight: 600; white-space: nowrap; min-width: 4.5rem; } .bday-name { font-weight: 600; } .bday-rel, .bday-age { color: var(--muted); font-size: 0.85rem; } /* #324 přehled adresáře — statistiky (chips) + nekompletní kontakty */ .dir-stats-wrap { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; } .dir-stats-body { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; } .dir-stats-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; } .dir-stat { padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); font-size: 0.85rem; color: var(--muted); } .dir-stat b { color: var(--fg); font-variant-numeric: tabular-nums; margin-right: 0.15rem; } .dir-stats-line { font-size: 0.85rem; color: var(--muted); } .dir-stats-incomplete { color: var(--accent); } .dir-stats-incomplete .dir-stats-inc-names { color: var(--muted); font-weight: normal; } .dir-stats-empty { color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0; } /* #268 rekapitulace „Kde jsem byl?" — klikací řádky nejnovějších chatů */ .rcp-list { flex-basis: 100%; margin: 0.3rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; } .rcp-item { display: block; width: 100%; text-align: left; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: inherit; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .rcp-item:hover { border-color: var(--accent); box-shadow: var(--glow); } .rcp-top { display: flex; gap: 0.55rem; align-items: baseline; justify-content: space-between; flex-wrap: wrap; } .rcp-title { font-weight: 600; font-size: 0.9rem; } .rcp-meta { font-size: 0.8rem; white-space: nowrap; } .rcp-sum { margin-top: 0.15rem; font-size: 0.82rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* #255 dlaždice „Úkoly" (globální To-Do): vstup přidání + seznam s checkboxem + smazat + úklid */ .todo-add { display: flex; gap: 0.4rem; flex-basis: 100%; margin: 0.3rem 0 0.1rem; } .todo-input { flex: 1; min-width: 0; padding: 0.35rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; } .todo-input:focus { border-color: var(--accent); outline: none; box-shadow: var(--glow); } .todo-addbtn { flex: none; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; } .todo-addbtn:hover { border-color: var(--accent); } .todo-list { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.3rem; margin: 0.15rem 0; } .todo-item { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } .todo-check { flex: none; cursor: pointer; } .todo-text { flex: 1; min-width: 0; font-size: 0.9rem; word-break: break-word; } .todo-item.done .todo-text { text-decoration: line-through; color: var(--muted); } .todo-del { flex: none; border: none; background: none; color: inherit; cursor: pointer; opacity: 0.6; font-size: 0.9rem; padding: 0.1rem 0.25rem; } .todo-del:hover { opacity: 1; } /* #373 odznak termínu úkolu (dlaždice i To-Do projektu): barva podle naléhavosti */ .todo-due { flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--muted); cursor: pointer; font: inherit; font-size: 0.76rem; line-height: 1.4; padding: 0.02rem 0.45rem; white-space: nowrap; } .todo-due:hover { border-color: var(--accent); color: inherit; } .todo-due.empty { opacity: 0.45; } .todo-due.empty:hover { opacity: 1; } .todo-due.due-overdue { color: #c0392b; border-color: #c0392b; } .todo-due.due-today { color: #d35400; border-color: #d35400; } .todo-due.due-soon { color: var(--accent); border-color: var(--accent); } .todo-due-new, .todo-due-edit { flex: none; padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; font-size: 0.82rem; max-width: 9.5rem; } .todo-due-new:focus, .todo-due-edit:focus { border-color: var(--accent); outline: none; box-shadow: var(--glow); } /* #376 odznak opakování úkolu (dlaždice i To-Do projektu) + výběr série */ .todo-rep { flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--muted); cursor: pointer; font: inherit; font-size: 0.76rem; line-height: 1.4; padding: 0.02rem 0.45rem; white-space: nowrap; } .todo-rep:hover { border-color: var(--accent); color: inherit; } .todo-rep.empty { opacity: 0.45; } .todo-rep.empty:hover { opacity: 1; } .todo-rep-new, .todo-rep-edit { flex: none; padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; font-size: 0.82rem; max-width: 9.5rem; } .todo-rep-new:focus, .todo-rep-edit:focus { border-color: var(--accent); outline: none; box-shadow: var(--glow); } /* #377 odznak priority úkolu (dlaždice i To-Do projektu) + výběr stupně */ .todo-prio { flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--muted); cursor: pointer; font: inherit; font-size: 0.76rem; line-height: 1.4; padding: 0.02rem 0.45rem; white-space: nowrap; } .todo-prio:hover { border-color: var(--accent); color: inherit; } .todo-prio.empty { opacity: 0.45; } .todo-prio.empty:hover { opacity: 1; } .todo-prio.prio-high { border-color: var(--warn, #e0a800); color: var(--warn, #e0a800); } .todo-prio.prio-low { opacity: 0.7; } .todo-prio-new, .todo-prio-edit { flex: none; padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; font-size: 0.82rem; max-width: 9.5rem; } .todo-prio-new:focus, .todo-prio-edit:focus { border-color: var(--accent); outline: none; box-shadow: var(--glow); } /* #378 podúkoly (checklist uvnitř úkolu): odznak pokroku + rozbalený seznam kroků */ .todo-steps-badge { flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--muted); cursor: pointer; font: inherit; font-size: 0.76rem; line-height: 1.4; padding: 0.02rem 0.45rem; white-space: nowrap; } .todo-steps-badge:hover { border-color: var(--accent); color: inherit; } .todo-steps-badge.empty { opacity: 0.45; } .todo-steps-badge.empty:hover { opacity: 1; } .todo-steps-badge.steps-done { color: var(--accent); border-color: var(--accent); } /* checklist se zalomí pod řádek úkolu (proto flex-wrap na .todo-item) */ .todo-steps { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.2rem; margin: 0.15rem 0 0.05rem; padding-left: 1.4rem; } .todo-step { display: flex; align-items: center; gap: 0.4rem; } .todo-step-check { flex: none; cursor: pointer; } .todo-step-text { flex: 1; min-width: 0; font-size: 0.84rem; word-break: break-word; } .todo-step.done .todo-step-text { text-decoration: line-through; color: var(--muted); } .todo-step-del { flex: none; border: none; background: none; color: inherit; cursor: pointer; opacity: 0.55; font-size: 0.8rem; padding: 0 0.2rem; } .todo-step-del:hover { opacity: 1; } .todo-step-add { display: flex; gap: 0.3rem; margin-top: 0.15rem; } .todo-step-input { flex: 1; min-width: 0; padding: 0.22rem 0.45rem; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: inherit; font: inherit; font-size: 0.82rem; } .todo-step-input:focus { border-color: var(--accent); outline: none; box-shadow: var(--glow); } .todo-step-addbtn { flex: none; padding: 0.18rem 0.5rem; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: inherit; cursor: pointer; line-height: 1; } .todo-step-addbtn:hover { border-color: var(--accent); } .todo-badge { font-size: 0.78rem; background: var(--accent); color: #fff; border-radius: 999px; padding: 0.02rem 0.4rem; vertical-align: middle; } .todo-empty { color: var(--muted); font-size: 0.88rem; font-style: italic; padding: 0.2rem 0; flex-basis: 100%; } .todo-clear { flex-basis: 100%; border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.82rem; text-align: left; padding: 0.1rem 0; } .todo-clear:hover { color: var(--accent); text-decoration: underline; } /* #351 Dlaždice „Připomínky" (poznámky z konverzace) — vzor To-Do. */ .rem-add { display: flex; gap: 0.4rem; flex-basis: 100%; margin: 0.3rem 0 0.1rem; } .rem-input { flex: 1; min-width: 0; padding: 0.35rem 0.55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: inherit; font: inherit; } .rem-input:focus { border-color: var(--accent); outline: none; box-shadow: var(--glow); } .rem-addbtn { flex: none; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; } .rem-addbtn:hover { border-color: var(--accent); } .rem-list { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.3rem; margin: 0.15rem 0; } .rem-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } .rem-check { flex: none; cursor: pointer; } .rem-text { flex: 1; min-width: 0; font-size: 0.9rem; word-break: break-word; white-space: pre-wrap; } .rem-item.done .rem-text { text-decoration: line-through; color: var(--muted); } .rem-copy, .rem-share, .rem-del { flex: none; border: none; background: none; color: inherit; cursor: pointer; opacity: 0.6; font-size: 0.9rem; padding: 0.1rem 0.25rem; } .rem-copy:hover, .rem-share:hover, .rem-del:hover { opacity: 1; } .rem-empty { color: var(--muted); font-size: 0.88rem; font-style: italic; padding: 0.2rem 0; flex-basis: 100%; } .rem-clear { flex-basis: 100%; border: none; background: none; color: var(--muted); cursor: pointer; font-size: 0.82rem; text-align: left; padding: 0.1rem 0; } .rem-clear:hover { color: var(--accent); text-decoration: underline; } /* #261 Dlaždice „Nálada komunikace" (sentiment dashboard) — rozpad nálady/zaměření bary. */ .mood-body { color: var(--muted); font-size: 0.88rem; font-style: italic; padding: 0.2rem 0; } .mood-summary { font-size: 0.82rem; margin: 0.1rem 0 0.35rem; } .mood-sub { font-size: 0.76rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0.4rem 0 0.2rem; } .mood-list { display: flex; flex-direction: column; gap: 0.28rem; } .mood-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; } .mood-name { flex: none; width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mood-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; } .mood-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.4s ease; } .mood-pct { flex: none; width: 3rem; text-align: right; font-variant-numeric: tabular-nums; } .mood-cnt { flex: none; width: 1.8rem; text-align: right; font-size: 0.78rem; font-variant-numeric: tabular-nums; } .mood-row.dominant .mood-name { font-weight: 700; color: var(--accent); } .mood-row.dominant .mood-fill { background: color-mix(in srgb, var(--accent) 85%, #fff); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent); } @media (max-width: 560px) { .mood-name { width: 6.5rem; } } @media (prefers-reduced-motion: reduce) { .mood-fill { transition: none; } } /* #216 Dlaždice „Denní přehled" (Doporučovací dashboard) — přetrvávající témata + úkoly. */ .digest-body { color: var(--muted); font-size: 0.88rem; font-style: italic; padding: 0.2rem 0; } .digest-sub { font-size: 0.76rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0.4rem 0 0.2rem; } .digest-list { display: flex; flex-direction: column; gap: 0.28rem; } .digest-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; } .digest-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .digest-meta { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; } .bday-date { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; } .bday-empty { color: var(--muted); font-size: 0.88rem; font-style: italic; list-style: none; } /* 👋 Ozvi se / keep-in-touch (#279) — reuse .bday-* + tlačítko „v kontaktu" vpravo */ .recon-row .recon-touch { margin-left: auto; padding: 0.15rem 0.5rem; font-size: 0.82rem; white-space: nowrap; } .recon-row .recon-touch:disabled { opacity: 0.5; cursor: default; } .person-kit { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.35rem 0; font-size: 0.88rem; } .person-kit-info { color: var(--muted); } /* 📌 Follow-up (#279) — naplánovaná příští akce: info + form (datum/o čem) v detailu osoby */ .person-followup { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; margin: 0.35rem 0; font-size: 0.88rem; } .person-followup-info { color: var(--muted); flex-basis: 100%; } .person-followup input[type="text"] { flex: 1; min-width: 90px; } .followup-row .followup-clear { margin-left: auto; padding: 0.15rem 0.5rem; font-size: 0.82rem; white-space: nowrap; } .followup-row .followup-clear:disabled { opacity: 0.5; cursor: default; } .bday-when.fu-overdue { color: var(--err, #e0533d); } /* po splatnosti = zvýrazněno */ /* 🗓️ Výhled — sjednocená časová osa napříč zdroji (#164) */ .outlook-body { flex-basis: 100%; } .out-month { margin-top: 0.35rem; } .out-month-head { font-weight: 700; color: var(--text); text-transform: capitalize; margin: 0.5rem 0 0.3rem; display: flex; align-items: center; gap: 0.45rem; } .out-month-count { color: var(--muted); font-weight: 500; font-size: 0.8rem; background: var(--elevated); border-radius: 999px; padding: 0 0.5rem; } .out-src { color: var(--muted); font-size: 0.76rem; border: 1px solid var(--border); border-radius: 999px; padding: 0 0.45rem; white-space: nowrap; } .bday-row.out-overdue { border-color: var(--err, #e0533d); } .bday-row.out-overdue .bday-when { color: var(--err, #e0533d); } /* barevný levý pruh dle typu události (rychlá orientace na ose) */ .bday-row.out-kind-birthday { border-left: 3px solid #e0533d; } .bday-row.out-kind-nameday { border-left: 3px solid #d98a2b; } .bday-row.out-kind-anniversary { border-left: 3px solid #c264d9; } .bday-row.out-kind-followup { border-left: 3px solid var(--accent); } .bday-row.out-kind-task { border-left: 3px solid #4a9edf; } .bday-row.out-kind-calendar { border-left: 3px solid #46b16b; } /* 💰 Finance (#274) */ .fin-summary { margin: 0.4rem 0 1.1rem; } .fin-net-title { margin-bottom: 0.4rem; } .fin-net-cards { display: flex; flex-wrap: wrap; gap: 0.7rem; } .fin-net-card { flex: 1 1 180px; min-width: 160px; padding: 0.7rem 0.9rem; border-radius: var(--radius, 10px); background: var(--card-bg, rgba(127,127,127,0.08)); border: 1px solid var(--border, rgba(127,127,127,0.2)); } .fin-net-total { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; } .fin-net-cur { font-size: 0.9rem; color: var(--muted); font-weight: 500; } .fin-net-sub { margin-top: 0.2rem; } /* Fáze 2a (#274) — přepočtený celek + editor kurzů */ .fin-net-inbase { margin-top: 0.7rem; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; } .fin-net-approx { font-weight: 400; } /* Fáze 2d (#274) — rozložení / diverzifikace jmění po typech aktiv */ .fin-allocation:not(:empty) { margin: 0 0 1.1rem; } .fin-alloc-list { list-style: none; margin: 0.3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .fin-alloc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .fin-alloc-label { font-weight: 600; } .fin-alloc-val { font-variant-numeric: tabular-nums; white-space: nowrap; } .fin-alloc-pct { color: var(--muted); font-size: 0.9rem; margin-left: 0.3rem; } .fin-alloc-bar { margin-top: 0.25rem; height: 8px; border-radius: 5px; background: var(--border, rgba(127,127,127,0.2)); overflow: hidden; } .fin-alloc-bar > span { display: block; height: 100%; background: var(--accent, #4a9); border-radius: 5px; transition: width 0.4s ease; } .fin-alloc-approx { margin-top: 0.5rem; } .fin-rate-base { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0 0.6rem; font-size: 0.9rem; color: var(--muted); } .fin-rate-base input { flex: 0 0 80px; } .fin-rates { display: flex; flex-direction: column; gap: 0.4rem; } .fin-rate-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .fin-rate-row .fin-rate-cur { flex: 0 0 80px; max-width: 90px; } .fin-rate-eq { color: var(--muted); } .fin-rate-row .fin-rate-val { flex: 0 1 120px; min-width: 90px; font-variant-numeric: tabular-nums; } .fin-rates-acts { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; } .fin-box { margin-top: 1rem; } .fin-row { display: flex; align-items: center; gap: 0.6rem; justify-content: space-between; flex-wrap: wrap; } .fin-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .fin-row-name { font-weight: 600; } .fin-row-meta { font-size: 0.85rem; } .fin-row-amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .fin-row-acts { display: flex; gap: 0.2rem; } .fin-form { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; align-items: center; } .fin-form input, .fin-form select { flex: 1 1 120px; min-width: 90px; } .fin-form .fin-cur { flex: 0 0 70px; min-width: 60px; max-width: 80px; } .fin-form-title { flex-basis: 100%; font-weight: 600; color: var(--accent, #4a9); } /* Fáze 2b (#274) — historie/vývoj jmění (snapshoty + trend + sparkline) */ .fin-hist-acts { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0.6rem; flex-wrap: wrap; } .fin-trend { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0.2rem 0 0.5rem; } .fin-trend-up { color: #3fae6b; } .fin-trend-down { color: #e5514c; } .fin-trend-flat { color: var(--muted); } .fin-spark-wrap:not(:empty) { margin: 0.2rem 0 0.7rem; } .fin-spark { max-width: 100%; height: 44px; display: block; } .fin-snap-row .fin-row-name { font-weight: 500; } .fin-snap-delta { font-weight: 600; margin-left: 0.4rem; font-size: 0.9rem; } /* Fáze 2e (#274) — cíle spoření (progress bar + tempo) */ .fin-goal-prog { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0.15rem; } .fin-goal-track { flex: 1 1 auto; height: 8px; border-radius: 5px; background: var(--border, rgba(127,127,127,0.2)); overflow: hidden; } .fin-goal-bar { height: 100%; background: var(--accent, #4a9); border-radius: 5px; transition: width 0.3s ease; } .fin-goal-bar-done { background: #3fae6b; } .fin-goal-pct { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--muted); flex: 0 0 auto; } .fin-goal-pace { display: block; font-size: 0.82rem; margin-top: 0.1rem; } .fin-form .fin-deadline { flex: 0 0 130px; min-width: 110px; max-width: 150px; } /* #379 — pohyby peněz (výdaje/příjmy): souhrn měsíce + rozpad podle kategorií */ .fin-tx-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.2rem 0 0.6rem; } .fin-tx-month { min-width: 140px; } .fin-tx-cards { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .fin-tx-card { flex: 1 1 190px; min-width: 170px; border: 1px solid var(--border, rgba(127,127,127,0.2)); border-radius: 10px; padding: 0.6rem 0.7rem; background: var(--elevated, transparent); } .fin-tx-card-head { font-weight: 600; margin-bottom: 0.35rem; } .fin-tx-card-row { display: flex; justify-content: space-between; gap: 0.6rem; font-variant-numeric: tabular-nums; font-size: 0.92rem; padding: 0.1rem 0; } .fin-tx-balance { border-top: 1px solid var(--border, rgba(127,127,127,0.2)); margin-top: 0.25rem; padding-top: 0.3rem; } .fin-tx-plus b { color: #3fae6b; } .fin-tx-minus b { color: #e5514c; } .fin-tx-cats-head { margin: 0.2rem 0 0.3rem; } .fin-tx-cats { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; } .fin-tx-cat { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .fin-tx-cat-name { flex: 0 0 130px; min-width: 100px; font-size: 0.9rem; } .fin-tx-cat-bar { flex: 1 1 auto; height: 8px; border-radius: 5px; min-width: 80px; background: var(--border, rgba(127,127,127,0.2)); overflow: hidden; } .fin-tx-cat-fill { display: block; height: 100%; background: var(--accent, #4a9); border-radius: 5px; transition: width 0.3s ease; } .fin-tx-cat-val { flex: 0 0 auto; font-size: 0.83rem; color: var(--muted); font-variant-numeric: tabular-nums; } .fin-tx-income .fin-row-amount { color: #3fae6b; } /* #380 — rozpočty (limity na kategorii): bar čerpání + barva podle stavu */ .fin-bud-bar { height: 100%; border-radius: 5px; background: var(--accent, #4a9); transition: width 0.3s ease; } .fin-bud-bar-warn { background: #e8a33d; } .fin-bud-bar-over { background: #e5514c; } .fin-bud-over .fin-row-name { color: #e5514c; } .fin-bud-row .fin-row-meta { font-variant-numeric: tabular-nums; } /* #381 — pravidelné platby: barva částky dle směru, pozastavené zešednou */ .fin-rec-row .fin-row-meta { font-variant-numeric: tabular-nums; } .fin-rec-amount { font-variant-numeric: tabular-nums; } .fin-rec-amount.fin-tx-income { color: #3fae6b; } .fin-rec-overdue .fin-row-name { color: #e5514c; } .fin-rec-due .fin-row-name { color: #e8a33d; } .fin-rec-off { opacity: 0.55; } .fin-rec-auto { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); } .dash-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.8rem; gap: 0.5rem; flex-wrap: wrap; } .dash-head h2 { margin: 0; } .dash-clock { color: var(--muted); font-size: 0.9rem; text-transform: capitalize; } .dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; } .dash-tile { background: linear-gradient(160deg, color-mix(in srgb, var(--elevated) 90%, var(--accent) 9%), var(--elevated)); border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); border-radius: 12px; padding: 0.8rem; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .dash-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 45%, transparent); } .dash-tile.wide { grid-column: span 2; } .dt-label { font-size: 0.76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 0.3rem; } .dt-big { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1.1; } .dt-list { font-size: 0.9rem; line-height: 1.55; } /* #161 čerstvost dat: tlumený řádek "🕓 aktualizováno před X" pod externí dlaždicí */ .dt-fresh { font-size: 0.7rem; color: var(--muted); opacity: 0.8; margin-top: 0.35rem; } .dash-tile.dt-ok .dt-big { color: #3fae6b; } .dash-tile.dt-warn { border-color: #d9a022; } .dash-tile.dt-warn .dt-big { color: #e0a92a; } .dash-tile.dt-crit { border-color: #d9433f; box-shadow: 0 0 0 1px #d9433f44; } .dash-tile.dt-crit .dt-big { color: #e5514c; } @media (max-width: 560px) { .dash-tile.wide { grid-column: span 1; } } /* #145 Layout widgetů — režim uspořádání dlaždic (drag & drop) */ .dash-reorder-tools { display: inline-flex; gap: 0.35rem; margin-left: auto; } .dash-reorder-btn.active { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); color: var(--text); } .dash-tiles.dash-reordering .dash-tile, .dash-tiles.dash-reordering > * { cursor: grab; } .dash-draggable { position: relative; } .dash-tiles.dash-reordering .dash-draggable { outline: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; } .dash-dragging { opacity: 0.5; cursor: grabbing; } .dash-drop-to { outline: 2px solid var(--accent) !important; outline-offset: 2px; } /* #115 Skrývání dlaždic — přepínač 👁/🙈 (jen v režimu uspořádání) + ztlumení skryté dlaždice */ .dash-hide-btn { position: absolute; top: 4px; right: 4px; z-index: 3; font-size: 0.82rem; line-height: 1; padding: 0.1rem 0.34rem; border-radius: 8px; background: color-mix(in srgb, var(--elevated) 82%, transparent); border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); cursor: pointer; } .dash-hide-btn:hover { border-color: var(--accent); } .dash-tiles.dash-reordering .dash-tile.dash-hidden { opacity: 0.42; } .dash-tiles.dash-reordering .dash-tile.dash-hidden::after { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; outline: 1px dashed color-mix(in srgb, var(--muted) 60%, transparent); outline-offset: -3px; } /* #155 Kontext dne: dlaždice s pozdravem podle denní doby + klikací „focus" chip-y */ .daypart-tile { background: linear-gradient(160deg, color-mix(in srgb, var(--elevated) 82%, var(--accent) 16%), var(--elevated)); } .daypart-tile .dt-label { font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 600; } .daypart-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } .daypart-chip { font: inherit; font-size: 0.82rem; cursor: pointer; background: color-mix(in srgb, var(--accent) 14%, var(--elevated)); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 999px; padding: 0.28rem 0.7rem; transition: background .14s ease, border-color .14s ease, transform .14s ease; } .daypart-chip:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); transform: translateY(-1px); } /* HA dlaždice: řádek entity + ovládací toggle (#109 fáze 2) */ /* Fitness dlaždice (#275) — barový ukazatel pokroku týdne */ .fit-bar { height: 6px; border-radius: 3px; background: var(--border); margin-top: 0.3rem; overflow: hidden; } .fit-bar-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.4s ease; } .ha-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.12rem 0; } .ha-toggle { font-size: 0.72rem; padding: 0.14rem 0.55rem; margin-left: auto; } .ha-toggle:disabled { opacity: 0.5; cursor: default; } /* Hlídač domácnosti (#109 fáze 3a): tlačítko kontroly + nálezy reportu */ .ha-check { font-size: 0.72rem; padding: 0.12rem 0.5rem; margin-left: 0.4rem; vertical-align: middle; } .ha-check:disabled { opacity: 0.6; cursor: default; } .ha-report { margin-top: 0.45rem; display: flex; flex-direction: column; gap: 0.22rem; } .ha-report.ok { color: var(--muted); font-size: 0.82rem; } .ha-finding { font-size: 0.82rem; padding: 0.22rem 0.5rem; border-radius: 8px; background: color-mix(in srgb, var(--fg) 6%, transparent); border-left: 3px solid var(--muted); } .ha-finding.warn { border-left-color: #e0803a; background: color-mix(in srgb, #e0803a 12%, transparent); } /* #109 fáze 3b — návrhy automatizací (jen náhled, nic se nevytvoří bez svolení) */ .ha-suggest { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; } .ha-suggestion { font-size: 0.82rem; padding: 0.3rem 0.5rem; border-radius: 8px; border-left: 3px solid var(--accent, #6ea8fe); background: color-mix(in srgb, var(--accent, #6ea8fe) 8%, transparent); } .ha-sug-title { font-weight: 600; } .ha-sug-config { margin-top: 0.2rem; } .ha-sug-config summary { cursor: pointer; color: var(--muted); font-size: 0.78rem; } .ha-sug-config pre { margin: 0.3rem 0 0; padding: 0.4rem; overflow-x: auto; font-size: 0.72rem; white-space: pre-wrap; word-break: break-word; background: color-mix(in srgb, var(--fg) 6%, transparent); border-radius: 6px; } /* #109 fáze 3c — schválit návrh → vytvořit v HA + seznam vytvořených */ .ha-create-auto { margin-top: 0.35rem; font-size: 0.74rem; padding: 0.16rem 0.55rem; } .ha-create-auto:disabled { opacity: 0.6; cursor: default; } .ha-created { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; } .ha-created-row { font-size: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 8px; border-left: 3px solid #4caf7d; background: color-mix(in srgb, #4caf7d 10%, transparent); } /* Dashboard — krypto změna + odkazy + config */ .dt-up { color: #3fae6b; font-weight: 600; } .dt-down { color: #e5514c; font-weight: 600; } .dt-list a { color: var(--accent); text-decoration: none; } .dt-list a:hover { text-decoration: underline; } /* Mini progress-bar v dlaždicích (RAM / disk / VRAM využití) */ .dt-bar { height: 6px; border-radius: 4px; margin-top: 0.45rem; background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; } .dt-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .3s ease; } .dt-bar.dt-warn > span { background: #e0a92a; } .dt-bar.dt-crit > span { background: #e5514c; } .dt-sub { font-size: 0.82rem; color: var(--muted); margin-top: 0.25rem; } /* HUD režim — radiální gauge (#10 D2, „Stark") */ .hud-gauges { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.7rem; } .dash-gauge { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 12%, var(--elevated)), var(--elevated) 72%); border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); border-radius: 14px; padding: 0.5rem; } .gauge-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .gauge-track { fill: none; stroke: color-mix(in srgb, var(--border) 70%, transparent); stroke-width: 7; } .gauge-fill { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1), stroke .3s ease; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent)); } .gauge-deco { fill: none; stroke: color-mix(in srgb, var(--accent) 22%, transparent); stroke-width: 1; stroke-dasharray: 2 5; transform-origin: 50% 50%; animation: gauge-spin 24s linear infinite; } .dash-gauge.dt-warn .gauge-fill { stroke: #e0a92a; filter: drop-shadow(0 0 4px #e0a92a88); } .dash-gauge.dt-crit .gauge-fill { stroke: #e5514c; filter: drop-shadow(0 0 5px #e5514c99); } .dash-gauge.dt-warn { border-color: #d9a022; } .dash-gauge.dt-crit { border-color: #d9433f; box-shadow: 0 0 0 1px #d9433f44; } .gauge-center { position: relative; z-index: 1; text-align: center; line-height: 1.05; } .gauge-val { display: block; font-size: 1.6rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .gauge-label { display: block; font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 0.15rem; } .gauge-sub { position: absolute; bottom: 0.45rem; left: 0; right: 0; text-align: center; font-size: 0.72rem; color: var(--muted); } @keyframes gauge-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .gauge-fill { transition: none; } .gauge-deco { animation: none; } } /* ─── Glow line/area sparkline (#334 fáze b) ────────────────────────────────── Spojnicový/plošný graf „jako na referenci" (hero glow křivka + wave). Barvy z --accent → sedne do všech 22 motivů; v „Jarvis" motivu je glow silnější (níž). preserveAspectRatio=none roztáhne křivku přes šířku dlaždice → čára drží stálou tloušťku přes vector-effect (jinak by se stroke protáhl s viewBoxem). */ .glow-spark { display: block; width: 100%; height: 64px; overflow: visible; } .gs-stop-top { stop-color: color-mix(in srgb, var(--accent) 42%, transparent); } .gs-stop-bot { stop-color: color-mix(in srgb, var(--accent) 2%, transparent); } .gs-area { opacity: 0.9; } .gs-line { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent)); } .gs-dot { fill: var(--accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent)); } .activity-tile .glow-spark { margin-top: 0.5rem; } /* Návyky / odvykání (#119) */ .habits-wrap { margin-top: 1.2rem; } .habits-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; } .habits-head h3 { margin: 0; font-size: 1rem; } .habits-head button { margin-left: auto; } .habit-form { background: var(--elevated); border: 1px solid var(--border); border-radius: 12px; padding: 0.8rem; margin-bottom: 0.8rem; } .habit-form-title { font-weight: 600; color: var(--accent); margin-bottom: 0.5rem; } .habits-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.7rem; } .habit-card { background: linear-gradient(160deg, color-mix(in srgb, var(--elevated) 90%, var(--accent) 9%), var(--elevated)); border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); border-radius: 12px; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; } .habit-top { display: flex; align-items: center; gap: 0.4rem; } .habit-name { font-weight: 600; } .habit-edit { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 0 0.2rem; line-height: 1; } .habit-edit:hover { color: var(--accent); } .habit-del { margin-left: 0.15rem; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0 0.2rem; line-height: 1; } .habit-del:hover { color: #e5514c; } .habit-timer { font-size: 1.5rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15; } .habit-timer.habit-over { color: #e5514c; } .habit-big { font-size: 1.7rem; font-weight: 700; } .habit-sub, .habit-note { font-size: 0.8rem; } .habit-actions { margin-top: 0.3rem; } .habit-actions button { font-size: 0.82rem; padding: 0.3rem 0.6rem; } /* 🧭 Návyky používání (učení návyků A8, #04) */ .usage-wrap { margin-top: 1.2rem; } .up-chart { display: flex; align-items: flex-end; gap: 2px; height: 64px; padding: 0.3rem 0.2rem 0; border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); border-radius: 10px; background: var(--elevated); } .up-bar { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--accent) 55%, var(--border)); transition: height 0.4s ease; } .up-bar.up-peak { background: var(--accent); } .up-axis { display: flex; justify-content: space-between; font-size: 0.7rem; padding: 0.15rem 0.2rem 0; } .up-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; margin-top: 0.7rem; } .up-card { background: linear-gradient(160deg, color-mix(in srgb, var(--elevated) 90%, var(--accent) 9%), var(--elevated)); border: 1px solid color-mix(in srgb, var(--border) 85%, transparent); border-radius: 12px; padding: 0.7rem; } .up-card-h { font-weight: 600; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.4rem; } .up-act { margin-left: auto; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 6px; padding: 0.05rem 0.35rem; } .dash-config { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.6rem; } .dash-config summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; } .dash-config .field { display: inline-block; margin-right: 0.6rem; } /* Náhled souborů šichty (plán/deník/changelog) */ .shift-doc { max-height: 460px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--code-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem; margin: 0.6rem 0 0; font-size: 0.8rem; line-height: 1.55; } #shift-doc-tabs .btn.active { background: var(--accent); color: var(--accent-fg); } /* Řízení směny + frekvence schované do rozklikávacího bloku (#108 přehlednost) */ .shift-advanced { margin-bottom: 1rem; } .shift-advanced > summary { cursor: pointer; font-weight: 700; color: var(--accent); font-size: 0.98rem; padding: 0.4rem 0; list-style: none; } .shift-advanced > summary::-webkit-details-marker { display: none; } .shift-advanced > summary::before { content: "▸ "; } .shift-advanced[open] > summary::before { content: "▾ "; } /* INBOX položky s tlačítkem smazat (#108) */ #shift-inbox ul { list-style: none; padding-left: 0; } .shift-inbox-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid var(--border); } .shift-inbox-item:last-child { border-bottom: none; } .shift-inbox-item > span { flex: 1; min-width: 0; word-break: break-word; } .shift-del-btn { flex: 0 0 auto; padding: 0.1rem 0.5rem; height: auto; line-height: 1.4; font-size: 0.9rem; } /* #141 Hromadné operace INBOXu — checkbox + lišta akcí nad vybranými položkami */ .shift-inbox-check { flex: 0 0 auto; margin-top: 0.25rem; cursor: pointer; } .shift-bulk-bar { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; padding: 0.4rem 0.5rem; margin-bottom: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--elevated); } .shift-bulk-bar .shift-bulk-info { flex: 1; color: var(--muted); } .shift-bulk-bar button { padding: 0.25rem 0.5rem; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-size: 0.78rem; } .shift-bulk-bar button.danger { background: var(--err); color: #fff; border-color: var(--err); } .shift-bulk-bar button.ghost { background: transparent; color: var(--text); } .shift-bulk-bar .shift-bulk-target { padding: 0.2rem 0.4rem; border-radius: 6px; border: 1px solid var(--border); font-size: 0.78rem; } /* OUTBOX šichty — otázky šichty + odpovědi uživatele */ .shift-outbox-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.6rem; margin: 0.4rem 0; background: var(--elevated); } .shift-outbox-item.answered { opacity: 0.85; } .shift-outbox-q { margin-bottom: 0.35rem; word-break: break-word; display: flex; align-items: flex-start; gap: 0.5rem; } .shift-outbox-q > .shift-del-btn { margin-left: auto; } /* Ideabot — karty návrhů ke schválení */ .ideabot-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem; margin: 0.5rem 0; background: var(--elevated); } .ideabot-card input, .ideabot-card textarea { width: 100%; margin-bottom: 4px; box-sizing: border-box; } .ideabot-card .ideabot-title { font-weight: 600; } .ideabot-card .ideabot-comment { font-size: 0.85rem; } .ideabot-log { background: var(--code-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.7rem; margin: 0.4rem 0; font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; } /* Pull-to-refresh (tažení dolů → obnovit; hlavně pro telefon/WebView) */ #ptr-indicator { position: fixed; top: -46px; left: 50%; transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; z-index: 9998; background: var(--panel, #222); color: var(--text, #eee); border: 1px solid var(--border, rgba(255,255,255,.15)); box-shadow: 0 2px 10px rgba(0,0,0,.35); pointer-events: none; opacity: 0; will-change: transform; } #ptr-indicator.ptr-active { opacity: 1; } #ptr-indicator.ptr-ready { background: var(--accent, #4a9); color: var(--accent-fg, #fff); border-color: transparent; } #ptr-indicator.ptr-refreshing { opacity: 1; } #ptr-indicator.ptr-snap { transition: transform .22s ease, opacity .22s ease; } #ptr-indicator .ptr-glyph { display: block; line-height: 1; } #ptr-indicator.ptr-refreshing .ptr-glyph { animation: ptr-spin .8s linear infinite; } @keyframes ptr-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* ─── Skleněný efekt (glass / „liquid glass") — přepínatelný v Nastavení → Vzhled ─ Poloprůhledné panely s rozostřením pozadí (backdrop-filter). Míra rozostření je v proměnné --glass-blur (nastavuje JS z posuvníku). Barvy se odvozují z aktivního motivu přes color-mix, takže glass funguje se všemi skiny. */ /* Glass aktivují DVA nezávislé stavy: ruční přepínač [data-glass="on"] (funguje se všemi motivy) NEBO motiv „Jarvis" [data-theme="jarvis"] (#334 — glass „z krabice"). Sdílená pravidla přes :is() = žádná duplicita blur logiky, stejná specificita = žádná regrese. */ :is([data-glass="on"], [data-theme="jarvis"]) { --glass-bg: color-mix(in srgb, var(--panel) 58%, transparent); --glass-elev: color-mix(in srgb, var(--elevated) 58%, transparent); --glass-border: color-mix(in srgb, var(--text) 16%, transparent); } /* Jemný barevný podklad, ať je rozostření vůbec vidět (jinak by se panely bluroval jen do jednolité barvy pozadí). */ [data-glass="on"] body { background: radial-gradient(60vw 60vw at 12% -8%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), radial-gradient(55vw 55vw at 108% 10%, color-mix(in srgb, var(--assist) 16%, transparent), transparent 60%), var(--bg); background-attachment: fixed; } :is([data-glass="on"], [data-theme="jarvis"]) .card, :is([data-glass="on"], [data-theme="jarvis"]) main fieldset, :is([data-glass="on"], [data-theme="jarvis"]) #settings fieldset, :is([data-glass="on"], [data-theme="jarvis"]) #agents fieldset, :is([data-glass="on"], [data-theme="jarvis"]) #voice-settings, :is([data-glass="on"], [data-theme="jarvis"]) .history, :is([data-glass="on"], [data-theme="jarvis"]) header { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur, 14px)) saturate(150%); backdrop-filter: blur(var(--glass-blur, 14px)) saturate(150%); border-color: var(--glass-border); } :is([data-glass="on"], [data-theme="jarvis"]) .events-panel, :is([data-glass="on"], [data-theme="jarvis"]) .events-panel .ev-head { background: var(--glass-elev); -webkit-backdrop-filter: blur(var(--glass-blur, 14px)) saturate(150%); backdrop-filter: blur(var(--glass-blur, 14px)) saturate(150%); border-color: var(--glass-border); } :is([data-glass="on"], [data-theme="jarvis"]) .tab.active { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur, 14px)); backdrop-filter: blur(var(--glass-blur, 14px)); } /* Prohlížeč bez podpory backdrop-filter (starší WebView): degradace na neprůhledné panely — glass se prostě neprojeví, layout zůstává čitelný. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :is([data-glass="on"], [data-theme="jarvis"]) .card, :is([data-glass="on"], [data-theme="jarvis"]) main fieldset, :is([data-glass="on"], [data-theme="jarvis"]) #settings fieldset, :is([data-glass="on"], [data-theme="jarvis"]) #agents fieldset, :is([data-glass="on"], [data-theme="jarvis"]) #voice-settings, :is([data-glass="on"], [data-theme="jarvis"]) .history, :is([data-glass="on"], [data-theme="jarvis"]) header, :is([data-glass="on"], [data-theme="jarvis"]) .events-panel { background: var(--panel); } } /* ─── Avatar-robůtek (levitující, proaktivní; WS /avatar/ws) ─────────────────── */ /* DŮLEŽITÉ: atribut [hidden] má nižší specificitu než #id/.class s display → explicitně ho vynutit, jinak by šel „zavřít" jen v JS a CSS by prvek držel viditelný (rozbitý křížek). */ #avatar-root[hidden], .avatar-bubble[hidden], #avatar-status[hidden] { display: none !important; } #avatar-root { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } /* Stav připojení: tečka v hlavičce (šedá=offline, zelená=online) + ztlumený robot offline. */ .avatar-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); vertical-align: middle; transition: background .2s; } .avatar-dot.on { background: var(--ok, #3fbf7f); box-shadow: 0 0 6px var(--ok, #3fbf7f); } #avatar-orb.avatar-offline { opacity: .55; filter: grayscale(.5); } .avatar-status { align-self: center; color: var(--muted); font-size: 12px; padding: 6px 0; } #avatar-orb { width: 60px; height: 60px; border-radius: 18px; cursor: pointer; border: 1px solid var(--accent); background: var(--panel); color: var(--text); box-shadow: var(--shadow); position: relative; padding: 0; perspective: 340px; /* #276 3D naklonění tváře */ display: flex; align-items: center; justify-content: center; animation: avatar-float 4s ease-in-out infinite; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } #avatar-orb:hover { transform: translateY(-2px) scale(1.04); } /* #276 „živý pohyb": tvář se naklání za kurzorem (JS nastavuje --avatar-rx/ry na téhle vrstvě, nekonfliktuje s levitací orbu, která žije na #avatar-orb). --avatar-scale zvětší při probuzení. */ #avatar-orb .avatar-face { font-size: 30px; line-height: 1; pointer-events: none; display: inline-block; transform: rotateX(var(--avatar-rx, 0deg)) rotateY(var(--avatar-ry, 0deg)) scale(var(--avatar-scale, 1)); transition: transform .18s ease-out, filter .25s ease; will-change: transform; } /* #276 probuzení: když se kurzor přiblíží → glow + zvětšení tváře (box-shadow/border nekonfliktuje s float). */ #avatar-orb.avatar-awake { box-shadow: 0 0 0 4px var(--glow), var(--shadow); border-color: var(--accent); } #avatar-orb.avatar-awake .avatar-face { --avatar-scale: 1.12; } @keyframes avatar-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* #276 Fáze 2 — reakce na aktivitu: psaní → „naslouchá" (pulzující ring, zachová levitaci); skrytý tab → „usnul" (ztlumení + zmenšená tvář). JS třídy sedí za gate „živý avatar". */ #avatar-orb.avatar-listening { animation: avatar-float 4s ease-in-out infinite, avatar-glow 1.1s ease-in-out infinite; } #avatar-orb.avatar-drowsy { opacity: .55; filter: grayscale(.35); } #avatar-orb.avatar-drowsy .avatar-face { --avatar-scale: .9; } /* #273 emoce: barevný nádech tváře dle nálady (drop-shadow glow na .avatar-face). Statická změna výrazu (emoji) i glow fungují i při „omezit pohyb" — reduced-motion níž jen zruší přechod (filter skočí bez animace), žádný pohyb se nekoná. */ #avatar-orb.avatar-emo-happy .avatar-face { filter: drop-shadow(0 0 6px #34d399); } #avatar-orb.avatar-emo-excited .avatar-face { filter: drop-shadow(0 0 7px #a78bfa); } #avatar-orb.avatar-emo-thinking .avatar-face { filter: drop-shadow(0 0 6px #60a5fa); } #avatar-orb.avatar-emo-concerned .avatar-face { filter: drop-shadow(0 0 6px #fb923c); } /* #276 respekt k „omezit pohyb": žádná levitace/naklánění/pulz — robůtek zůstane klidný. */ @media (prefers-reduced-motion: reduce) { #avatar-orb, #avatar-orb.avatar-listening { animation: none; } #avatar-orb .avatar-face { transition: none; transform: none; } .avatar-pulse { animation: none !important; } } .avatar-pulse { animation: avatar-float 4s ease-in-out infinite, avatar-glow 1.2s ease-in-out infinite !important; } @keyframes avatar-glow { 0%,100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 6px var(--glow); } } .avatar-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--err); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .avatar-bubble { width: min(360px, 86vw); max-height: 72vh; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; } .avatar-bubble-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--elevated); border-bottom: 1px solid var(--border); } .avatar-bubble-title { font-weight: 600; font-size: 14px; color: var(--text); margin-right: auto; } .avatar-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px; } .avatar-x:hover { color: var(--text); background: var(--border); } .avatar-speak.on { color: var(--accent, var(--text)); } .avatar-log { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 96px; } .avatar-line { padding: 7px 10px; border-radius: 12px; font-size: 13px; line-height: 1.4; max-width: 88%; word-wrap: break-word; } .avatar-bot { align-self: flex-start; background: var(--assist); color: var(--text); border-bottom-left-radius: 3px; } .avatar-me { align-self: flex-end; background: var(--user); color: var(--accent-fg); border-bottom-right-radius: 3px; } .avatar-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); align-items: flex-end; } /* Textarea, co roste s obsahem (JS nastavuje výšku 1→~5 řádků; resize vypnutý). */ .avatar-form textarea { flex: 1; padding: 8px 10px; border-radius: 10px; resize: none; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; line-height: 1.4; max-height: 130px; overflow-y: auto; } .avatar-send { border: 0; background: var(--accent); color: var(--accent-fg); cursor: pointer; border-radius: 10px; padding: 0 12px; font-size: 15px; align-self: stretch; } /* Mobil (#137): menší kroužek vpravo dole; bublina = celoobrazovkový spodní „sheet", přizpůsobený displeji. Fixed left/right/bottom 0 ⇒ nemůže způsobit horizontální overflow (dřív úzká plovoucí bublina v `position:fixed` rootu ve WebView přetékala/skákala se scrollem). Když je otevřená, orb schováme (sheet ho stejně překrývá). #139: orb respektuje safe-area (pravý/spodní inset — notch/zaoblený roh/gesture bar) a root/bublina se drží uvnitř viewportu. `viewport-fit=cover` (index.html) totiž `100vw` roztáhne až do fyzického kraje pod notch → orb bez insetu sedí za hranou a `width/max-width: 100vw` způsobovalo horizontální scroll doprava. `env(...)` má fallback 0px (kde safe-area není → chová se jako dřív). */ @media (max-width: 640px) { #avatar-root { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: auto; max-width: calc(100vw - 24px); /* nikdy nepřeteče přes okraj → žádný horizontální scroll */ } #avatar-orb { width: 48px; height: 48px; border-radius: 50%; } #avatar-orb .avatar-face { font-size: 24px; } .avatar-bubble { /* left/right pinují bublinu na okraje viewportu (bez `width:100vw`, které pod viewport-fit=cover přetéká do notche) → sheet nikdy nezpůsobí horizontální scroll. */ position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 82vh; max-height: 82dvh; /* dvh kvůli mizející adresní liště */ border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); /* gesture bar / notch */ } #avatar-root.avatar-open #avatar-orb { display: none; } /* sheet překrývá orb */ } .avatar-typing { opacity: .6; font-size: 18px; letter-spacing: 2px; animation: avatar-blink 1.1s ease-in-out infinite; } @keyframes avatar-blink { 0%,100% { opacity: .3; } 50% { opacity: .8; } } /* ─── Spotify přehrávač ─────────────────────────────────────────────── */ .sp-player { display: flex; gap: 14px; align-items: center; background: var(--elevated, var(--panel)); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin: 10px 0; } .sp-art { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; flex: none; background: var(--panel); box-shadow: 0 2px 8px rgba(0,0,0,.3); } .sp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .sp-track { font-weight: 600; font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-artist { font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .muted { color: var(--muted); } .sp-seek-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .sp-time { font-size: .78em; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; } .sp-time:last-child { text-align: right; } .sp-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .sp-barfill { height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width .9s linear; } .sp-controls { display: flex; align-items: center; gap: 6px; margin-top: 2px; } .sp-ctl { background: transparent; border: none; color: var(--text); font-size: 1.15em; cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; } .sp-ctl:hover { background: var(--panel); } .sp-pp { background: var(--accent); color: var(--accent-fg); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .sp-pp:hover { filter: brightness(1.1); } .sp-vol { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: .9em; } .sp-vol input[type=range] { width: 90px; accent-color: var(--accent); } .sp-device { font-size: .8em; margin-top: 2px; } @media (max-width: 480px) { .sp-art { width: 72px; height: 72px; } .sp-vol input[type=range] { width: 60px; } } /* ─── Spotify dock (levý dolní roh, perzistentní) ───────────────────── */ #sp-dock[hidden], .sp-dock-panel[hidden] { display: none !important; } .sp-dock { position: fixed; left: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .sp-dock-orb { width: 60px; height: 60px; border-radius: 18px; cursor: pointer; border: 1px solid var(--accent); background: var(--panel); color: var(--text); box-shadow: var(--shadow); padding: 0; font-size: 28px; display: flex; align-items: center; justify-content: center; transition: transform .15s ease; } .sp-dock-orb:hover { transform: translateY(-2px) scale(1.04); } .sp-dock-panel { width: 300px; max-width: 82vw; background: var(--elevated, var(--panel)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 8px; } .sp-dock-top { display: flex; gap: 12px; align-items: center; } .sp-dock-art { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; background: var(--panel); } .sp-dock-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .sp-dock-track { font-weight: 600; font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-dock-artist { font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-dock-seek { display: flex; align-items: center; gap: 6px; } .sp-dock-bar { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin: 3px 0; } .sp-seekable { cursor: pointer; height: 7px; } .sp-seekable:hover .sp-barfill { filter: brightness(1.15); } .sp-dock-ctl { display: flex; align-items: center; gap: 2px; } .sp-dock-hide { margin-left: auto; font-size: .95em; opacity: .7; } .sp-dock-row { display: flex; align-items: center; gap: 8px; } .sp-dock-dev { flex: 1; min-width: 0; font-size: .82em; padding: 4px 6px; } .sp-dock-search { flex: 1; min-width: 0; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: .85em; } .sp-dock-results { max-height: 168px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 6px; } .sp-res { text-align: left; background: transparent; border: none; color: var(--text); padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: .84em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-res:hover { background: var(--panel); } .sp-res-empty { padding: 6px; font-size: .82em; } .sp-dock-webplay { width: 100%; font-size: .84em; padding: 6px 8px; } /* #236 Galerie přednastavených rolí (persona) — chips; klik vyplní pole stylu osobnosti. */ .pe-presets-wrap { margin: 8px 0 4px; } .pe-presets-label { display: block; font-size: .84em; color: var(--muted); margin-bottom: 6px; } .persona-presets { display: flex; flex-wrap: wrap; gap: 6px; } .persona-preset { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: .86em; line-height: 1.2; } .persona-preset:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .persona-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .persona-preset .pp-emoji { font-size: 1.05em; } body.anim-ui .persona-preset { transition: border-color .15s ease, background .15s ease; } /* ══════════════════════════════════════════════════════════════════════════ Jarvis motiv (#334, fáze a) — vizuální „shell". Glassmorphism KARET reusuje sdílenou glass vrstvu výše: motiv „jarvis" je druhý aktivátor ([data-glass="on"] | [data-theme="jarvis"]) přes :is() → žádná duplicita blur logiky. Tady jsou jen jarvis-SPECIFICKÉ věci, které glass sekce neřeší: charakteristické gradientové pozadí, glass dlaždic Přehledu, glow. VŠE scoped pod [data-theme="jarvis"] → nula dopadu na ostatních 20 motivů. ══════════════════════════════════════════════════════════════════════════ */ /* Pozadí: tmavá navy základna + jemná modrá záře vpravo nahoře + teplá (oranžová) záře v pravém dolním rohu — jako na referenci. Fixed = nescrolluje s obsahem. */ [data-theme="jarvis"] body { background: radial-gradient(900px 620px at 85% 4%, rgba(77, 159, 255, 0.13), transparent 60%), radial-gradient(1100px 720px at 97% 94%, rgba(240, 138, 74, 0.10), transparent 55%), linear-gradient(160deg, #0a1224, #070b16 55%, #090f1e); background-attachment: fixed; } /* Dlaždice Přehledu (.dash-tile) — sdílená glass vrstva je nepokrývá, tady jim dáme stejný glass look (reuse glass proměnných --glass-bg/-border/-blur = konzistence). */ [data-theme="jarvis"] .dash-tile { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur, 14px)) saturate(150%); backdrop-filter: blur(var(--glass-blur, 14px)) saturate(150%); border-color: var(--glass-border); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-theme="jarvis"] .dash-tile { background: var(--panel); } } /* Silnější modrý glow při najetí (HUD pocit) + svítící velká čísla dlaždic. */ [data-theme="jarvis"] :is(.card, main fieldset):hover, [data-theme="jarvis"] .dash-tile:hover { box-shadow: 0 14px 44px -16px color-mix(in srgb, var(--accent) 52%, transparent); } [data-theme="jarvis"] .dt-big { text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 34%, transparent); } /* Jarvis: silnější glow křivky + sytější plocha (HUD pocit jako na referenci). */ [data-theme="jarvis"] .gs-line { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 78%, transparent)); } [data-theme="jarvis"] .gs-stop-top { stop-color: color-mix(in srgb, var(--accent) 55%, transparent); } /* ── #334 fáze (c): Přehled v motivu Jarvis — layout „jako na referenci" ───────── Velké glass karty ve strukturovaném gridu + HERO zóna nahoře (pozdrav + dominantní glow křivka). Čistě opt-in ([data-theme="jarvis"]) — ostatních 22 motivů drží původní auto-fill grid (0 regrese). Karty mají glass z fáze (a), graf z fáze (b). */ [data-theme="jarvis"] .dash-tiles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } /* HERO: pozdrav (kontext dne) + Aktivita (glow křivka) přes celou šířku nahoře. Vyšší specificita (.dash-tile.) spolehlivě přebije globální .dash-tile.wide. */ [data-theme="jarvis"] .dash-tile.daypart-tile, [data-theme="jarvis"] .dash-tile.activity-tile { grid-column: 1 / -1; } /* Dominantní hero křivka + větší číslo (jako uvítací graf na referenci). */ [data-theme="jarvis"] .dash-tile.activity-tile { padding: 1.1rem 1.2rem; } [data-theme="jarvis"] .activity-tile .glow-spark { height: 120px; } [data-theme="jarvis"] .activity-tile .dt-big { font-size: 2.6rem; } /* Responzivita: úzký viewport → jeden sloupec (hero už je full-width). */ @media (max-width: 560px) { [data-theme="jarvis"] .dash-tiles { grid-template-columns: 1fr; } } /* ─── #203 Režim vysokého kontrastu (přístupnost) ───────────────────────────── A11y overlay přes html.hc — aplikuje se NAD aktivním motivem. Specificita html.hc (0,1,1) přebíjí [data-theme] (0,1,0), takže funguje ve VŠECH motivech (dark i light) bez hardcodu barev — jen theme-relativní var(--text)/var(--accent). Zapíná přepínač „Vysoký kontrast" v Nastavení → Vzhled (app.js applyUiContrast). */ html.hc { --muted: var(--text); /* odmutovat sekundární text → plný kontrast */ --border: var(--text); /* okraje na plný kontrast (panely/inputy/karty) */ --shadow: none; /* stíny rozostřují vjem kontrastu → pryč */ --glow: 0 0 0 3px var(--accent); /* focus prsten plnou barvou akcentu (ne průhledný) */ } /* Zvýrazněný focus pro klávesnici — a11y overlay musí přebít lokální outline:none, proto !important (legitimní výjimka pro přístupnostní režim). */ html.hc *:focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 2px !important; } /* Odkazy vždy podtržené (nespoléhat na odlišení jen barvou). */ html.hc a { text-decoration: underline; } /* ─── #219 Úsporný režim (body.power-save) ────────────────────────────────────── Ruční „low-power" volba pro slabé HW / telefon s vybitou baterií. Filozofie jako prefers-reduced-motion (vypnout pohyb), ale ruční a agresivnější: navíc potlačí nejnáročnější GPU efekt — rozostření (backdrop-filter/blur), které kompozitor překresluje při každém scrollu. Doplňuje pauzu periodických pollingů v JS (setPowerSave). Vypnutí je čistě kosmetické → obsah zůstává plně čitelný. `animation: none` (ne 0s) je záměr: nechat fill-mode aktivní by mohlo skrýt řádky animované přes `from{opacity:0}` (viz anim-ui). box-shadow/outline NEsaháme (focus indikátor a11y). */ body.power-save *, body.power-save *::before, body.power-save *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } body.power-save * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Diarizace (#267) — výsledek „kdo mluvil kdy" v Nastavení → Hlas */ .diar-result { margin-top: 8px; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--panel); } .diar-sum { margin: 0 0 6px; } .diar-row { padding: 2px 0; line-height: 1.45; } .diar-who { color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ─── #382 — tenké scrollbary hlavních ploch (chat, historie, nastavení) à la Open WebUI: nenápadný úzký thumb z barvy textu, bez tracku; Firefox přes scrollbar-width. ─── */ .log, .history, .scroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; } .log::-webkit-scrollbar, .history::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 8px; } .log::-webkit-scrollbar-track, .history::-webkit-scrollbar-track, .scroll::-webkit-scrollbar-track { background: transparent; } .log::-webkit-scrollbar-thumb, .history::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 20%, transparent); border-radius: 8px; } .log::-webkit-scrollbar-thumb:hover, .history::-webkit-scrollbar-thumb:hover, .scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 34%, transparent); }