/* JZ icon utility — używana w pływającym panelu i menu akcji */
.jz-icon { width: 1em !important; height: 1em !important; vertical-align: -0.15em !important; flex-shrink: 0 !important; }

/* ===========================================================================
   DEFENSIVE STYLE ISOLATION (od v3.2.14)
   --------------------------------------------------------------------------
   Content script współdzieli DOM ze stroną → generyczne reguły CSS strony
   lecą w nasze elementy. Najgorszy przypadek: strona ma własny styling
   checkboxów typu:
     input[type=checkbox]{ appearance:none; ... }
     input[type=checkbox]:checked::after { content:''; background:#0078d4 }
   To kompletnie rozwala nasze checkboxy (np. w TEMP Output Console filter row).
   Tutaj wymuszamy natywne renderowanie + neutralizujemy pseudo-elementy strony
   na każdym <input>/<select>/<textarea> wewnątrz wszystkich naszych root-ów UI.
   Wysoka specyficzność (#id w :is() = 1,0,0) + !important → przebija większość
   page !important. Patrz też: lib/onboarding-front.css ma własny defensive
   reset (jz-obf- prefix, działa na dowolnej stronie).
   =========================================================================== */
/* Appearance reset: TYLKO checkbox/radio (gdzie typowo następuje leak strony
   z appearance:none + ::after = custom checkmark). Range/color/file MUSZĄ
   mieć appearance:none, by nasze własne reguły (.jz-range-track itd.) zadziałały
   — dlatego ich tu NIE ruszamy. */
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu) :is(input[type="checkbox"], input[type="radio"]) {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  background-image: none !important;
  border-image: none !important;
  box-shadow: none !important;
}
/* Pseudo-element neutralization na WSZYSTKICH form-elementach w naszych root-ach.
   Bezpieczne — my sami nie używamy ::before/::after na input/select/textarea/button
   (custom rendering robimy w obejmujących wrapperach jak .jz-range-track::before). */
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu) :is(input, select, textarea, button)::before,
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu) :is(input, select, textarea, button)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
}

/* Tag-level „ozdoby" które strony lubią ustawiać generycznie (np. `pre {
   background:#f5f5f5; border:1px solid #ccc; padding:10px }` rozwala URL-e
   w Network → expanded row w Output Console). Reset robimy z :where() = 0
   specyficzności, dzięki czemu NASZE własne klasy z explicit background/border
   (np. .jz-ai-code) WYGRYWAJĄ specyficzność. Dotyczy stron BEZ !important na
   tagach — w sytuacjach z !important na tagach potrzebny byłby Shadow DOM
   dla pełnej izolacji. (od v3.2.17) */
:where(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
       .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
       .jz-ai-font-menu) :is(pre, code, blockquote,
                              h1, h2, h3, h4, h5, h6) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font-weight: inherit !important;
}

/* Brand accent na checkboxach w pływającym panelu (zamiast platformowego niebieskiego) */
#justzix-floating-panel input[type="checkbox"] { accent-color: #006870 !important; }

/* ===========================================================================
   SCROLLBAR STYLING (od v3.2.26)
   --------------------------------------------------------------------------
   Spójne, cienkie, ciemne scrollbary w obrębie naszych root-ów UI. Pasują do
   dark-tła #1F2937 paneli. Track transparent (nie rozbija tła), thumb
   półprzezroczyste białe z hoverem. Stosujemy do każdego elementu w naszych
   root-ach (`*` w selektorze) — scrollbary applyują się tylko tam, gdzie i tak
   jest overflow, więc nie ma kosztu dla elementów bez scrolla.
   Chromium-based: `::-webkit-scrollbar*`. Firefox: `scrollbar-width` +
   `scrollbar-color`. Bezpieczne — strona obok zostaje nietknięta (selektory
   scoped do naszych root-ów).
   =========================================================================== */
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu),
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu) * {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,255,255,0.20) transparent !important;
}
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu)::-webkit-scrollbar,
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu) *::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  background: transparent !important;
}
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu)::-webkit-scrollbar-track,
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu) *::-webkit-scrollbar-track {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu)::-webkit-scrollbar-thumb,
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu) *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.20) !important;
  border-radius: 5px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu)::-webkit-scrollbar-thumb:hover,
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu) *::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.35) !important;
}
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu)::-webkit-scrollbar-thumb:active,
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu) *::-webkit-scrollbar-thumb:active {
  background: rgba(255,255,255,0.55) !important;
}
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu)::-webkit-scrollbar-corner,
:is(#justzix-floating-btn, #justzix-floating-panel, .jz-pane, .jz-actions-bar,
    .jz-bar-panel, .jz-menu, .jz-label-editor, .jz-output-api-help-overlay,
    .jz-ai-font-menu, .jz-ai-style-panel, #justzix-actions-menu) *::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* ===========================================================================
   SCREENSHOT HIDING (od v3.2.28)
   --------------------------------------------------------------------------
   Klasa `.jz-screenshot-hide` na <html> chowa CAŁY UI JustZixa przed
   `chrome.tabs.captureVisibleTab`. visibility:hidden (nie display:none) —
   layout zachowany, brak reflow, szybsze restore. AI Helper widzi stronę
   "jak user" bez naszych własnych nakładek na screenshocie.
   =========================================================================== */
.jz-screenshot-hide #justzix-floating-btn,
.jz-screenshot-hide #justzix-floating-panel,
.jz-screenshot-hide .jz-pane,
.jz-screenshot-hide .jz-actions-bar,
.jz-screenshot-hide .jz-bar-panel,
.jz-screenshot-hide .jz-menu,
.jz-screenshot-hide .jz-label-editor,
.jz-screenshot-hide .jz-output-api-help-overlay,
.jz-screenshot-hide .jz-ai-font-menu,
.jz-screenshot-hide .jz-ai-style-panel,
.jz-screenshot-hide #justzix-actions-menu,
.jz-screenshot-hide #justzix-toast,
.jz-screenshot-hide .jz-edit-banner,
.jz-screenshot-hide .jz-ob-root,
.jz-screenshot-hide .jz-obf-root {
  visibility: hidden !important;
}

/* Miniatura screenshota w toolchipie — od v3.2.28. */
.jz-ai-screen-thumb {
  display: inline-block !important;
  max-width: 240px !important;
  max-height: 135px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  margin-top: 6px !important;
  cursor: zoom-in !important;
  background: #0F172A !important;
}
.jz-ai-screen-modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.85) !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  cursor: zoom-out !important;
}
.jz-ai-screen-modal img {
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* === Główny pływający przycisk === */
#justzix-floating-btn {
  position: fixed !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 11px !important;
  font-weight: bold !important;
  cursor: move !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  z-index: 2147483647 !important;
  user-select: none !important;
  transition: transform 0.15s, background 0.2s !important;
  border: 2px solid white !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #6b7280, #4b5563) !important;
}

/* Stany kolorystyczne — paleta brand JustZix */
#justzix-floating-btn.jz-on {
  /* Inject Green (#2D9D53) — wszystkie reguły działają */
  background: linear-gradient(135deg, #2D9D53, #1F7E3F) !important;
}
#justzix-floating-btn.jz-mixed {
  /* Syntax Orange (#D65D0E) — stan mieszany */
  background: linear-gradient(135deg, #D65D0E, #B04C0B) !important;
}
#justzix-floating-btn.jz-off {
  /* Muted Gray (#888888) — wyłączone */
  background: linear-gradient(135deg, #888888, #6E6E6E) !important;
}
#justzix-floating-btn.jz-globally-off {
  /* Halt Red (#CC3333) — globalna pauza */
  background: linear-gradient(135deg, #CC3333, #9F2828) !important;
  opacity: 0.7 !important;
}
/* W trybie globally-off etykieta przycisku ma ramkę pauzy renderowaną przez SVG content w pseudo-elemencie nie jest możliwy — content.js może opcjonalnie zamienić tekst na pause-icon. Pomijamy ::after by uniknąć emoji. */

/* Kolor katalogu jako tło — wyższa specyficzność niż klasy stanu */
#justzix-floating-btn.jz-custom-color.jz-on {
  background: var(--jz-folder-color) !important;
}
#justzix-floating-btn.jz-custom-color.jz-mixed {
  background: var(--jz-folder-color) !important;
  filter: saturate(0.55) brightness(0.9) !important;
}
#justzix-floating-btn.jz-custom-color.jz-off {
  background: var(--jz-folder-color) !important;
  filter: grayscale(0.85) brightness(0.65) !important;
}

#justzix-floating-btn:hover {
  transform: scale(1.08) !important;
}

#justzix-floating-btn span {
  pointer-events: none !important;
  color: white !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

/* === Panel z zestawami (prawy klik) === */
#justzix-floating-panel {
  position: fixed !important;
  background: white !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
  padding: 8px !important;
  min-width: 240px !important;
  max-width: 320px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  z-index: 2147483647 !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  color: #1f2937 !important;
  box-sizing: border-box !important;
}

#justzix-floating-panel * { box-sizing: border-box !important; }

#justzix-floating-panel .jz-folder-block {
  margin-bottom: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

#justzix-floating-panel .jz-folder-block:last-of-type {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#justzix-floating-panel .jz-folder-row {
  display: flex !important;
  align-items: center !important;
  padding: 6px 8px !important;
  background: #f3f4f6 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  margin-bottom: 4px !important;
}

#justzix-floating-panel .jz-folder-row strong {
  margin-left: 8px !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

#justzix-floating-panel .jz-rules { padding-left: 12px !important; }

#justzix-floating-panel .jz-group-block {
  margin-top: 4px !important;
  padding-left: 6px !important;
}

#justzix-floating-panel .jz-group-row {
  display: flex !important;
  align-items: center !important;
  padding: 3px 6px !important;
  margin-bottom: 2px !important;
  cursor: pointer !important;
  border-radius: 3px !important;
}

#justzix-floating-panel .jz-group-row:hover { background: #f9fafb !important; }

#justzix-floating-panel .jz-group-name {
  margin-left: 6px !important;
  color: #4b5563 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

#justzix-floating-panel .jz-rule-row {
  display: flex !important;
  align-items: center !important;
  padding: 4px 6px !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  font-size: 12px !important;
}

#justzix-floating-panel .jz-rule-row:hover { background: #f9fafb !important; }

#justzix-floating-panel .jz-rule-name {
  margin-left: 8px !important;
  flex: 1 !important;
  color: #374151 !important;
}

#justzix-floating-panel .jz-badge {
  font-size: 10px !important;
  color: #16a34a !important;
  margin-left: 6px !important;
}

#justzix-floating-panel .jz-badge-inactive { color: #9ca3af !important; }

#justzix-floating-panel .jz-empty {
  font-size: 11px !important;
  color: #9ca3af !important;
  padding: 4px 6px !important;
  font-style: italic !important;
}

#justzix-floating-panel input[type="checkbox"] {
  margin: 0 !important;
  width: 14px !important;
  height: 14px !important;
  cursor: pointer !important;
}

#justzix-floating-panel .jz-panel-section {
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px solid #e5e7eb !important;
}

#justzix-floating-panel .jz-section-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #6b7280 !important;
  margin-bottom: 4px !important;
  padding: 0 4px !important;
}

#justzix-floating-panel .jz-bars-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#justzix-floating-panel .jz-bar-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 4px !important;
  cursor: pointer !important;
  border-radius: 3px !important;
}

#justzix-floating-panel .jz-bar-row:hover { background: #f9fafb !important; }

#justzix-floating-panel .jz-bar-row-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
#justzix-floating-panel .jz-bar-row-disabled:hover { background: transparent !important; }

#justzix-floating-panel .jz-bar-name {
  font-size: 12px !important;
  color: #111827 !important;
  flex: 1 !important;
}

#justzix-floating-panel .jz-conns-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#justzix-floating-panel .jz-disconnect-btn {
  width: 100% !important;
  padding: 5px 8px !important;
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 11px !important;
  font-family: inherit !important;
  text-align: left !important;
}

#justzix-floating-panel .jz-disconnect-btn:hover {
  background: #fde68a !important;
}

#justzix-floating-panel .jz-disconnect-btn.jz-disconnect-all {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}

#justzix-floating-panel .jz-disconnect-btn.jz-disconnect-all:hover {
  background: #fecaca !important;
}

/* === Paski akcji (przyciski JS) === */
/* Wspólne selektory dla legacy `#justzix-actions-panel` (singleton) i `.jz-actions-bar`
   (od v2.10 — wielo-paskowy renderer Fazy 3). Każdy bar w storage może mieć własny color
   tła ustawiany inline z bar.color — domyślny (rgba ciemny) używany jeśli kolor nieustawiony. */
#justzix-actions-panel,
.jz-actions-bar {
  position: fixed !important;
  background: rgba(31, 41, 55, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
  z-index: 2147483647 !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  box-sizing: border-box !important;
  max-width: 90vw !important;
  flex-direction: column !important;
}

#justzix-actions-panel.jz-horizontal,
.jz-actions-bar.jz-horizontal {
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

#justzix-actions-panel *,
.jz-actions-bar * { box-sizing: border-box !important; }

#justzix-actions-panel .jz-actions-handle,
.jz-actions-bar .jz-actions-handle {
  cursor: move !important;
  color: rgba(255,255,255,0.5) !important;
  padding: 4px 8px !important;
  font-size: 14px !important;
  user-select: none !important;
  letter-spacing: -2px !important;
  font-weight: bold !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

#justzix-actions-panel.jz-horizontal .jz-actions-handle,
.jz-actions-bar.jz-horizontal .jz-actions-handle {
  width: auto !important;
  padding: 6px 4px !important;
}

#justzix-actions-panel .jz-actions-handle:hover,
.jz-actions-bar .jz-actions-handle:hover {
  color: rgba(255,255,255,0.9) !important;
}

#justzix-actions-panel .jz-actions-buttons,
.jz-actions-bar .jz-actions-buttons {
  display: flex !important;
  gap: 4px !important;
  flex-direction: column !important;
  width: 100% !important;
  position: relative !important;
}

#justzix-actions-panel.jz-horizontal .jz-actions-buttons,
.jz-actions-bar.jz-horizontal .jz-actions-buttons {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: auto !important;
}

/* Custom layout (od v2.13.94) — pasek 'custom': kontener = płótno, elementy
   pozycjonowane absolutnie wg action.layout/action.size.
   UWAGA (od v2.13.103): `position:absolute` NIE jest ustawiane przez tę regułę —
   robią to inline applyCustomLayout/convertBarPanelToCustom razem z left/top.
   Dzięki temu element nigdy nie jest `absolute` bez pozycji (brak piętrzenia w 0,0);
   gdy pozycjonowanie zawiedzie, element spada do czytelnego układu flow. */
.jz-actions-bar.jz-layout-custom .jz-actions-buttons {
  display: block !important;
  position: relative !important;
  flex: 0 0 auto !important;
}
.jz-actions-bar.jz-layout-custom .jz-actions-buttons > * {
  margin: 0 !important;
}

/* Tryb edycji paska (od v2.13.94) — Ctrl+Alt+S. */
html.jz-edit-mode .jz-actions-bar .jz-actions-buttons > * {
  cursor: move !important;
}
html.jz-edit-mode .jz-actions-bar .jz-action-el-selected {
  outline: 2px solid #00b4c8 !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 4px rgba(0,180,200,0.25) !important;
}
/* Kolizja (od v2.13.98) — element nachodzi na inny: czerwona ramka, po puszczeniu wraca. */
html.jz-edit-mode .jz-actions-bar .jz-edit-invalid {
  outline: 2px solid #ff3b30 !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 4px rgba(255,59,48,0.35) !important;
}
.jz-edit-banner {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2147483646 !important;
  background: #00b4c8 !important;
  color: #06262b !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
  letter-spacing: 0.02em !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* Ramka resize elementu akcji (od v2.13.95) — 8 uchwytów nad pojedynczym
   zaznaczonym elementem. Ciało ramki przepuszcza klik (move), uchwyty łapią. */
.jz-resize-frame {
  position: absolute !important;
  z-index: 7 !important;
  pointer-events: none !important;
  outline: 1px dashed rgba(0,180,200,0.85) !important;
}
.jz-resize-handle {
  position: absolute !important;
  background: #00b4c8 !important;
  border: 1px solid #06262b !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}
.jz-resize-handle-nw, .jz-resize-handle-ne,
.jz-resize-handle-sw, .jz-resize-handle-se { width: 9px !important; height: 9px !important; }
.jz-resize-handle-nw { top: -5px !important;    left: -5px !important;  cursor: nwse-resize !important; }
.jz-resize-handle-ne { top: -5px !important;    right: -5px !important; cursor: nesw-resize !important; }
.jz-resize-handle-sw { bottom: -5px !important; left: -5px !important;  cursor: nesw-resize !important; }
.jz-resize-handle-se { bottom: -5px !important; right: -5px !important; cursor: nwse-resize !important; }
.jz-resize-handle-n, .jz-resize-handle-s {
  left: 50% !important; margin-left: -4px !important;
  width: 8px !important; height: 8px !important; cursor: ns-resize !important;
}
.jz-resize-handle-n { top: -5px !important; }
.jz-resize-handle-s { bottom: -5px !important; }
.jz-resize-handle-e, .jz-resize-handle-w {
  top: 50% !important; margin-top: -4px !important;
  width: 8px !important; height: 8px !important; cursor: ew-resize !important;
}
.jz-resize-handle-e { right: -5px !important; }
.jz-resize-handle-w { left: -5px !important; }

/* Resize płótna paska (od v2.13.95) — uchwyty E/S/SE, widoczne tylko w edycji+custom. */
.jz-bar-resize {
  display: none !important;
  position: absolute !important;
  z-index: 5 !important;
  background: transparent !important;
}
html.jz-edit-mode .jz-actions-bar > .jz-bar-resize { display: block !important; }
.jz-bar-resize-e  { top: 0 !important;  right: 0 !important; bottom: 0 !important; width: 7px !important;  cursor: ew-resize !important; }
.jz-bar-resize-s  { left: 0 !important; right: 0 !important; bottom: 0 !important; height: 7px !important; cursor: ns-resize !important; }
.jz-bar-resize-se { right: 0 !important; bottom: 0 !important; width: 14px !important; height: 14px !important; cursor: nwse-resize !important; }

/* Prostokąt zaznaczenia zakresowego (Shift+przeciągnięcie, od v2.13.95). */
.jz-rubber-band {
  position: absolute !important;
  z-index: 6 !important;
  background: rgba(0,180,200,0.15) !important;
  border: 1px solid rgba(0,180,200,0.85) !important;
  pointer-events: none !important;
}

/* Przycisk „+ Label" (od v2.13.99) — widoczny tylko w trybie edycji, nad paskiem. */
.jz-bar-add-label {
  display: none !important;
  position: absolute !important;
  top: -24px !important;
  left: 0 !important;
  z-index: 8 !important;
  background: #00b4c8 !important;
  color: #06262b !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.jz-bar-add-label:hover { filter: brightness(1.12) !important; }
html.jz-edit-mode .jz-actions-bar > .jz-bar-add-label { display: block !important; }

/* Przycisk „Reset paska" (od v2.13.100) — nad paskiem, po prawej. */
.jz-bar-reset {
  display: none !important;
  position: absolute !important;
  top: -24px !important;
  right: 0 !important;
  z-index: 8 !important;
  background: #f59e0b !important;
  color: #3a2400 !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.jz-bar-reset:hover { filter: brightness(1.12) !important; }
html.jz-edit-mode .jz-actions-bar > .jz-bar-reset { display: block !important; }

/* Edytor labelki (od v2.13.99) — pływające okienko tekst/font/rozmiar/kolor. */
.jz-label-editor {
  position: fixed !important;
  z-index: 2147483646 !important;
  width: 236px !important;
  background: #1F2937 !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
  padding: 10px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
}
.jz-label-editor .jz-le-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 7px !important;
}
.jz-label-editor .jz-le-row label { flex: 0 0 auto !important; opacity: 0.85 !important; }
.jz-label-editor .jz-le-row input,
.jz-label-editor .jz-le-row select {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: #0F172A !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 4px !important;
  padding: 3px 5px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}
.jz-label-editor .jz-le-row input[type="color"] { padding: 1px !important; height: 24px !important; max-width: 48px !important; }
.jz-label-editor .jz-le-row input[type="number"] { max-width: 64px !important; flex: 0 0 auto !important; }
.jz-label-editor .jz-le-actions {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
.jz-label-editor .jz-le-actions button {
  border: none !important;
  border-radius: 4px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
}
.jz-label-editor .jz-le-delete { background: #ff3b30 !important; color: #fff !important; }
.jz-label-editor .jz-le-close  { background: #00b4c8 !important; color: #06262b !important; }

#justzix-actions-panel .jz-action-btn,
.jz-actions-bar .jz-action-btn {
  min-width: 38px !important;
  width: 100% !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 5px !important;
  border: none !important;
  color: white !important;
  font-weight: bold !important;
  font-size: 11px !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: transform 0.1s, filter 0.1s !important;
  text-transform: uppercase !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
  line-height: 1 !important;
}

#justzix-actions-panel.jz-horizontal .jz-action-btn,
.jz-actions-bar.jz-horizontal .jz-action-btn {
  width: auto !important;
}

#justzix-actions-panel .jz-action-btn:hover,
.jz-actions-bar .jz-action-btn:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-1px) !important;
}

#justzix-actions-panel .jz-action-btn:active,
.jz-actions-bar .jz-action-btn:active {
  transform: translateY(0) !important;
  filter: brightness(0.9) !important;
}

/* SELECT element (od v2.12.1, redesign v2.12.5) — w pasku akcji. Custom dropdown
   <button> + popup panel dla 'static' variant; <select> dla 'js' variant. Oba style
   dopasowane do .jz-action-btn (ten sam rozmiar, padding, font, kolory). */
#justzix-actions-panel .jz-action-select,
.jz-actions-bar .jz-action-select {
  min-width: 60px !important;
  width: 100% !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 5px !important;
  border: none !important;
  background-color: #006870 !important;
  color: white !important;
  font-weight: bold !important;
  font-size: 11px !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  text-align: left !important;
}
#justzix-actions-panel.jz-horizontal .jz-action-select,
.jz-actions-bar.jz-horizontal .jz-action-select {
  width: auto !important;
}
#justzix-actions-panel .jz-action-select:hover,
.jz-actions-bar .jz-action-select:hover {
  filter: brightness(1.15) !important;
}
#justzix-actions-panel .jz-action-select:active,
.jz-actions-bar .jz-action-select:active {
  filter: brightness(0.9) !important;
}
.jz-action-select-text {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
.jz-action-select-arrow {
  flex-shrink: 0 !important;
  font-size: 9px !important;
  opacity: 0.85 !important;
}

/* JS variant — natywny <select> z wbudowaną strzałką (user code zarządza opcjami) */
.jz-action-select.jz-variant-js {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0 22px 0 8px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='white'><path d='M0 0l5 6 5-6z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 8px !important;
}
.jz-action-select.jz-variant-js option {
  background: #1f2937 !important;
  color: white !important;
}

/* INPUT element (od v2.13.0) — pole tekstowe w pasku akcji. Stylowane spójnie
   z .jz-action-btn i .jz-action-select (ten sam rozmiar, font, kolory). */
#justzix-actions-panel .jz-action-input,
.jz-actions-bar .jz-action-input {
  min-width: 80px !important;
  width: 100% !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 5px !important;
  border: none !important;
  background-color: #1f2937 !important;
  color: white !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.08) !important;
  line-height: 1 !important;
  outline: none !important;
}
#justzix-actions-panel .jz-action-input::placeholder,
.jz-actions-bar .jz-action-input::placeholder {
  /* Kolor placeholdera (od v2.13.19) sterowany przez CSS variable —
     fallback do half-transparent białego. Ustawiany inline z item.colorPlaceholder. */
  color: var(--jz-placeholder-color, rgba(255,255,255,0.45)) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: bold !important;
}
#justzix-actions-panel .jz-action-input:focus,
.jz-actions-bar .jz-action-input:focus {
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 0 0 1.5px rgba(0,180,200,0.7) !important;
}
#justzix-actions-panel.jz-horizontal .jz-action-input,
.jz-actions-bar.jz-horizontal .jz-action-input {
  width: auto !important;
}

/* SLIDER element (od v2.13.17) — range slider z opcjonalnym labelem (po lewej) i value display
   (po prawej, z opcjonalną jednostką). Stylowane spójnie z innymi typami akcji: dark bg,
   accent-color overridowany kolorem akcji. */
#justzix-actions-panel .jz-action-slider-wrap,
.jz-actions-bar .jz-action-slider-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 120px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 5px !important;
  background-color: #1f2937 !important;
  color: white !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.08) !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.jz-action-slider-label {
  font-size: 10px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  /* `inherit` zamiast hardcoded białego — dziedziczy currentColor z .jz-action-slider-wrap,
     który dostaje override z item.colorText. Lekkie dimowanie labela (vs value) przez opacity. */
  color: inherit !important;
  opacity: 0.85 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
#justzix-actions-panel .jz-action-slider,
.jz-actions-bar .jz-action-slider {
  flex: 1 1 auto !important;
  min-width: 50px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  /* accent-color BIAŁY — kontrast z dowolnym brand-color tłem wrap (item.color).
     Inline override z item.color dawał regression: fill suwaka zlewał się z tłem. */
  accent-color: rgba(255,255,255,0.95) !important;
  background: transparent !important;
  border: none !important;
}
.jz-action-slider-value {
  font-size: 11px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  /* `inherit` — analogicznie jak w .jz-action-slider-label. Pełna opacity (vs 0.85 labela)
     żeby value był wizualnie mocniejszy niż jego label. */
  color: inherit !important;
  min-width: 28px !important;
  text-align: right !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
#justzix-actions-panel.jz-horizontal .jz-action-slider-wrap,
.jz-actions-bar.jz-horizontal .jz-action-slider-wrap {
  width: auto !important;
}

/* TEXTAREA element (od v2.13.21) — multi-line pole tekstowe w pasku akcji. Stylowane
   spójnie z .jz-action-input (ten sam font, kolory, dark bg), ale auto-height per `rows`
   attribute (browser respektuje rows × line-height). Resize wyłączony (vertical-resize
   psuje layout baru — user dostaje wysokość przez konfigurację `rows`). */
#justzix-actions-panel .jz-action-textarea,
.jz-actions-bar .jz-action-textarea {
  min-width: 120px !important;
  width: 100% !important;
  padding: 6px 8px !important;
  border-radius: 5px !important;
  border: none !important;
  background-color: #1f2937 !important;
  color: white !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  line-height: 1.4 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.08) !important;
  outline: none !important;
  resize: none !important;
  box-sizing: border-box !important;
}
#justzix-actions-panel .jz-action-textarea::placeholder,
.jz-actions-bar .jz-action-textarea::placeholder {
  /* Re-use CSS variable z INPUT (od v2.13.19) — kolor placeholdera z action.colorPlaceholder. */
  color: var(--jz-placeholder-color, rgba(255,255,255,0.45)) !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
#justzix-actions-panel .jz-action-textarea:focus,
.jz-actions-bar .jz-action-textarea:focus {
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 0 0 1.5px rgba(0,180,200,0.7) !important;
}
#justzix-actions-panel.jz-horizontal .jz-action-textarea,
.jz-actions-bar.jz-horizontal .jz-action-textarea {
  width: auto !important;
}

/* Labelka paska (bar-owned, od v2.13.99) — etykieta tekstowa na pasku akcji.
   Tekst/font/rozmiar/kolor z bar.labels[]; pozycjonowana absolutnie w trybie custom. */
.jz-actions-bar .jz-bar-label {
  display: block !important;
  position: absolute !important;
  padding: 3px 6px !important;
  color: #ffffff !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

/* TOGGLE3 element (od v2.13.25) — 3-stanowy segmented control. 3 mini-buttony
   (radio-style), tylko jeden aktywny. Aktywny używa CSS var --jz-active-bg/text
   ustawianych inline z item.color/colorText (fallback do brand teal). */
#justzix-actions-panel .jz-action-toggle3,
.jz-actions-bar .jz-action-toggle3 {
  display: inline-flex !important;
  gap: 2px !important;
  min-width: 110px !important;
  height: 32px !important;
  padding: 2px !important;
  border-radius: 5px !important;
  background-color: #1f2937 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.08) !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  box-sizing: border-box !important;
}
#justzix-actions-panel .jz-toggle3-state,
.jz-actions-bar .jz-toggle3-state {
  flex: 1 1 0 !important;
  min-width: 28px !important;
  padding: 0 6px !important;
  border: none !important;
  background: transparent !important;
  /* Kolor tekstu nieaktywnych — CSS variable z fallback do dimowanego białego.
     Aktywny stan override przez `.active` rule niżej (--jz-active-text). */
  color: var(--jz-inactive-text, rgba(255,255,255,0.55)) !important;
  font-size: 10px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  transition: background-color 0.12s, color 0.12s !important;
  font-family: inherit !important;
  outline: none !important;
}
#justzix-actions-panel .jz-toggle3-state:hover:not(.active),
.jz-actions-bar .jz-toggle3-state:hover:not(.active) {
  background: var(--jz-hover-bg, rgba(255,255,255,0.08)) !important;
  /* Hover używa inactive-text base (custom user color) zamiast hardcoded białego —
     żeby nie kolidowało z customowym colorem (np. czarny tekst na jasnym tle). */
  color: var(--jz-inactive-text, rgba(255,255,255,0.9)) !important;
  filter: brightness(1.4) !important;
}
#justzix-actions-panel .jz-toggle3-state.active,
.jz-actions-bar .jz-toggle3-state.active {
  background: var(--jz-active-bg, #006870) !important;
  color: var(--jz-active-text, #ffffff) !important;
}
#justzix-actions-panel.jz-horizontal .jz-action-toggle3,
.jz-actions-bar.jz-horizontal .jz-action-toggle3 {
  width: auto !important;
}

/* Popup panel dla static variant — pływający dropdown z opcjami stylowanymi
   jak bar buttony. Position fixed, wysoki z-index żeby przykryć stronę.
   Kolory sterowane przez CSS variables (od v2.13.19) ustawiane inline w renderSelectElement —
   pozwalają na customizację per akcja bez konfliktu z bazowymi !important stylami. */
.jz-action-select-panel {
  position: fixed !important;
  z-index: 2147483647 !important;
  background: var(--jz-dropdown-bg, rgba(31, 41, 55, 0.97)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  padding: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  backdrop-filter: blur(8px) !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.jz-action-select-item {
  min-width: 60px !important;
  padding: 6px 12px !important;
  background: transparent !important;
  color: var(--jz-option-color, white) !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: bold !important;
  font-size: 11px !important;
  font-family: inherit !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  text-align: left !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}
.jz-action-select-item:hover {
  background: var(--jz-hover-bg, rgba(255, 255, 255, 0.12)) !important;
}
.jz-action-select-item.selected {
  background: var(--jz-selected-bg, rgba(0, 104, 112, 0.6)) !important;
}

/* Etykieta nazwy baru (max 6 znaków) — wystający "tab" na środku górnej krawędzi.
   Tło dziedziczone z panelu przez --jz-bar-bg ustawiane inline w content.js.
   Cienkie obramowanie odpowiadające panelowi. Wyświetla się tylko gdy bar.name != "". */
.jz-actions-bar .jz-bar-name {
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--jz-bar-bg, rgba(31, 41, 55, 0.95)) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  user-select: none !important;
  cursor: move !important;
  z-index: 1 !important;
  backdrop-filter: blur(8px) !important;
}
/* Pasek poziomy: nazwa NAD uchwytem (lewy róg górnej krawędzi), 10px margines od lewej. */
.jz-actions-bar.jz-horizontal .jz-bar-name {
  top: -10px !important;
  left: 10px !important;
  transform: none !important;
}

/* Hide nazwy gdy bar ma połączenie po stronie top — label by przesłaniała sąsiada powyżej. */
.jz-actions-bar.jz-no-name .jz-bar-name { display: none !important; }

/* Snap edges (od v2.11.0) — czerwone podświetlenie krawędzi podczas drag, gdy bar jest
   blisko innego baru i może się skleić. Box-shadow inset zamiast border żeby nie zmieniać rozmiaru. */
/* Snap-edge highlight przy przyciąganiu okien. Czerwona krawędź `#DC2626`
   po stronie sklejania. Bary akcji + floating btn używają `box-shadow inset`
   (są małe, dzieci nie przykrywają krawędzi). Pane'y używają pseudo-elementu
   `::after` z position:absolute — `box-shadow inset` był przykryty przez
   kolorowe dzieci (header / body / log / textarea mają własne backgroundy).
   od v3.2.34. */
.jz-actions-bar.jz-snap-edge-top,
#justzix-floating-btn.jz-snap-edge-top    { box-shadow: inset 0 3px 0 #DC2626, 0 6px 16px rgba(0,0,0,0.3) !important; }
.jz-actions-bar.jz-snap-edge-bottom,
#justzix-floating-btn.jz-snap-edge-bottom { box-shadow: inset 0 -3px 0 #DC2626, 0 6px 16px rgba(0,0,0,0.3) !important; }
.jz-actions-bar.jz-snap-edge-left,
#justzix-floating-btn.jz-snap-edge-left   { box-shadow: inset 3px 0 0 #DC2626, 0 6px 16px rgba(0,0,0,0.3) !important; }
.jz-actions-bar.jz-snap-edge-right,
#justzix-floating-btn.jz-snap-edge-right  { box-shadow: inset -3px 0 0 #DC2626, 0 6px 16px rgba(0,0,0,0.3) !important; }

/* Pane'y — pseudo-element overlay, renderowany PONAD dziećmi (pane ma position:fixed,
   więc absolute jest względem pane). pointer-events:none żeby nie blokować interakcji. */
.jz-pane.jz-snap-edge-top::after,
.jz-pane.jz-snap-edge-bottom::after,
.jz-pane.jz-snap-edge-left::after,
.jz-pane.jz-snap-edge-right::after {
  content: '' !important;
  position: absolute !important;
  background: #DC2626 !important;
  pointer-events: none !important;
  z-index: 100 !important;
  border-radius: 2px !important;
}
.jz-pane.jz-snap-edge-top::after    { top: 0 !important;    left: 0 !important;   right: 0 !important;  height: 3px !important; }
.jz-pane.jz-snap-edge-bottom::after { bottom: 0 !important; left: 0 !important;   right: 0 !important;  height: 3px !important; }
.jz-pane.jz-snap-edge-left::after   { top: 0 !important;    bottom: 0 !important; left: 0 !important;   width: 3px !important; }
.jz-pane.jz-snap-edge-right::after  { top: 0 !important;    bottom: 0 !important; right: 0 !important;  width: 3px !important; }

/* Separator w menu kontekstowym */
#justzix-actions-menu .jz-menu-sep {
  height: 1px !important;
  background: #e5e7eb !important;
  margin: 4px 0 !important;
}

/* === Menu kontekstowe panelu akcji === */
#justzix-actions-menu {
  position: fixed !important;
  background: white !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
  z-index: 2147483647 !important;
  padding: 4px !important;
  min-width: 200px !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

#justzix-actions-menu .jz-menu-item {
  padding: 8px 12px !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  color: #1f2937 !important;
}

#justzix-actions-menu .jz-menu-item:hover {
  background: #f3f4f6 !important;
}

/* Font/size selectors w menu (od v2.13.70) — rząd label + select. */
#justzix-actions-menu .jz-menu-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  color: #1f2937 !important;
}
#justzix-actions-menu .jz-menu-row-label {
  font-size: 12px !important;
  color: #6b7280 !important;
  flex: 0 0 60px !important;
}
#justzix-actions-menu .jz-menu-row select {
  flex: 1 1 auto !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #1f2937 !important;
  cursor: pointer !important;
}

/* === Toast === */
#justzix-toast {
  position: fixed !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  background: rgba(31, 41, 55, 0.95) !important;
  color: white !important;
  padding: 10px 18px !important;
  border-radius: 6px !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  z-index: 2147483647 !important;
  opacity: 0 !important;
  transition: opacity 0.2s, transform 0.2s !important;
  pointer-events: none !important;
}

#justzix-toast.jz-show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* === Faza 2 "Okna na froncie" (v12, od v2.13.40) — CSS panes === */
.jz-pane {
  position: fixed !important;
  z-index: 2147483640 !important;
  background: #1F2937 !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  overflow: hidden !important;
}
.jz-pane-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  background: rgba(0,0,0,0.25) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  flex: 0 0 auto !important;
  user-select: none !important;
}
.jz-pane-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex: 0 0 10px !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
}
.jz-pane-title {
  flex: 1 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Persistent pane close button (od v3.2.34, restylowany v3.2.37) — spójny
   wyglądem z `.jz-pane-temp-close` (TEMP), klikalny na całej powierzchni
   (nie tylko na samym znaku ×). */
.jz-pane-close {
  background: transparent !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  color: rgba(239, 68, 68, 0.9) !important;
  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 0 8px !important;
  border-radius: 3px !important;
  line-height: 1 !important;
  margin: -4px 0 -4px 4px !important;
  align-self: stretch !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jz-pane-close:hover {
  color: #fff !important;
  background: rgba(239, 68, 68, 0.6) !important;
}
/* Resize handles (od v2.13.91, krawędzie od v2.13.93) — 8 uchwytów pane'a:
   4 narożniki (14x14) + 4 krawędzie (pasek 6px między narożnikami). */
.jz-pane-resize {
  position: absolute !important;
  z-index: 6 !important;
  background: transparent !important;
}
.jz-pane-resize-nw, .jz-pane-resize-ne,
.jz-pane-resize-sw, .jz-pane-resize-se {
  width: 14px !important;
  height: 14px !important;
}
.jz-pane-resize-nw { top: 0 !important;    left: 0 !important;  cursor: nwse-resize !important; }
.jz-pane-resize-ne { top: 0 !important;    right: 0 !important; cursor: nesw-resize !important; }
.jz-pane-resize-sw { bottom: 0 !important; left: 0 !important;  cursor: nesw-resize !important; }
.jz-pane-resize-se { bottom: 0 !important; right: 0 !important; cursor: nwse-resize !important; }
.jz-pane-resize-n, .jz-pane-resize-s {
  left: 14px !important;
  right: 14px !important;
  height: 6px !important;
  cursor: ns-resize !important;
}
.jz-pane-resize-n { top: 0 !important; }
.jz-pane-resize-s { bottom: 0 !important; }
.jz-pane-resize-e, .jz-pane-resize-w {
  top: 14px !important;
  bottom: 14px !important;
  width: 6px !important;
  cursor: ew-resize !important;
}
.jz-pane-resize-e { right: 0 !important; }
.jz-pane-resize-w { left: 0 !important; }
.jz-pane-resize-se::after {
  content: "" !important;
  position: absolute !important;
  right: 2px !important;
  bottom: 2px !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid rgba(255,255,255,0.35) !important;
  border-bottom: 2px solid rgba(255,255,255,0.35) !important;
}
.jz-pane:hover .jz-pane-resize-se::after { border-color: rgba(255,255,255,0.6) !important; }
.jz-pane-body {
  flex: 1 1 auto !important;
  background: #0F172A !important;
  color: #E5E7EB !important;
  border: none !important;
  outline: none !important;
  padding: 8px 10px !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  resize: none !important;
  tab-size: 2 !important;
}
/* JS pane (od v2.13.56) — wyróżnik kolorystyczny vs CSS pane (lekki amber accent w nagłówku) */
.jz-pane-js .jz-pane-header {
  border-bottom-color: rgba(214, 93, 14, 0.4) !important;
}
/* Error overlay w stopce JS pane — sync errors z eval. */
.jz-pane-error {
  flex: 0 0 auto !important;
  background: #2A0F0F !important;
  color: #FCA5A5 !important;
  border-top: 1px solid rgba(252, 165, 165, 0.3) !important;
  padding: 6px 10px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  max-height: 80px !important;
  overflow-y: auto !important;
}
/* Run button w headerze JS pane (od v2.13.58). v2.13.70: stretch do full header height +
   większa hit area, żeby user nie mylił drag z klikiem. */
.jz-pane-run {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.7) !important;
  cursor: pointer !important;
  font-size: 11px !important;
  padding: 0 10px !important;
  border-radius: 3px !important;
  line-height: 1 !important;
  margin: -4px 4px -4px 0 !important;     /* negatywne margin top/bottom = expand do bounds headera */
  align-self: stretch !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jz-pane-run:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}
.jz-pane.jz-dirty .jz-pane-run {
  color: #FCD34D !important;
  border-color: rgba(252, 211, 77, 0.6) !important;
  background: rgba(252, 211, 77, 0.12) !important;
}
/* Custom runColor (od v2.13.64, fix v2.13.65) — pane z `.jz-run-custom` ma własny kolor Run
   buttona zamiast domyślnego amber. CSS variables ustawiane przez content.js inline na pane'ie.
   Idle: ikona ▶ + border w custom kolorze (bg transparent). Dirty: full accent (też bg tinted). */
.jz-pane.jz-run-custom .jz-pane-run {
  color: var(--jz-run-text) !important;
  border-color: var(--jz-run-border) !important;
}
.jz-pane.jz-run-custom.jz-dirty .jz-pane-run {
  color: var(--jz-run-text) !important;
  border-color: var(--jz-run-border) !important;
  background: var(--jz-run-bg) !important;
}

/* JS Console (od v2.13.66) — split layout: output (rośnie, scroll) + input (fixed dół).
   Wyróżnik kolorystyczny: purpurowy header accent. */
.jz-pane-console .jz-pane-header {
  border-bottom-color: rgba(124, 58, 237, 0.4) !important;
}
.jz-console-output {
  flex: 1 1 auto !important;
  background: #0F172A !important;
  color: #E5E7EB !important;
  padding: 6px 10px !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  overflow-y: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  min-height: 60px !important;
}
.jz-console-line { display: block !important; padding: 1px 0 !important; }
.jz-console-line-in   { color: #93C5FD !important; }  /* command echo — niebieski */
.jz-console-line-ok   { color: #E5E7EB !important; }  /* result */
.jz-console-line-err  { color: #FCA5A5 !important; }  /* error / console.error */
.jz-console-line-log  { color: #9CA3AF !important; }  /* console.log capture (od v2.13.67) */
.jz-console-line-warn { color: #FCD34D !important; }  /* console.warn capture */
.jz-console-input {
  flex: 0 0 auto !important;
  background: #1F2937 !important;
  color: #E5E7EB !important;
  border: none !important;
  border-top: 1px solid rgba(124, 58, 237, 0.3) !important;
  outline: none !important;
  padding: 6px 10px !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  resize: none !important;
  tab-size: 2 !important;
  height: 60px !important;
}
/* Clear button w headerze JS Console (od v2.13.66). v2.13.70: stretch do full header height. */
.jz-console-clear {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.6) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  padding: 0 8px !important;
  border-radius: 3px !important;
  line-height: 1 !important;
  margin: -4px 4px -4px 0 !important;
  align-self: stretch !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jz-console-clear:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}
/* v2.13.71: Clear button też dziedziczy custom runColor (jeśli ustawiony na konsoli).
   JS Console nie ma dirty state, więc tylko text+border na idle, hover daje tinted bg. */
.jz-pane.jz-run-custom .jz-console-clear {
  color: var(--jz-run-text) !important;
  border-color: var(--jz-run-border) !important;
}
.jz-pane.jz-run-custom .jz-console-clear:hover {
  background: var(--jz-run-bg) !important;
}

/* === Output Console (od v2.13.72, Faza 2 finish) — read-only log viewer ===
   Single-area layout: tylko log (bez inputu, bo to view). Wyróżnik kolorystyczny:
   emerald header accent (odróżnia od JS Console purple, JS pane amber, CSS green). */
.jz-pane-output .jz-pane-header {
  border-bottom-color: rgba(16, 185, 129, 0.4) !important;
}
.jz-output-log {
  flex: 1 1 auto !important;
  background: #0F172A !important;
  color: #E5E7EB !important;
  padding: 6px 10px !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  overflow-y: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  min-height: 60px !important;
  outline: none !important;
}
.jz-output-line { display: block !important; padding: 1px 0 !important; }
.jz-output-line-log   { color: #9CA3AF !important; }  /* console.log */
.jz-output-line-info  { color: #93C5FD !important; }  /* console.info */
.jz-output-line-warn  { color: #FCD34D !important; }  /* console.warn */
.jz-output-line-error,
.jz-output-line-err   { color: #FCA5A5 !important; }  /* console.error */
.jz-output-empty {
  color: #6B7280 !important;
  font-style: italic !important;
  padding: 4px 0 !important;
}
/* Clear + autoscroll buttony — analogicznie do JS Console (stretch full header height + hit area). */
.jz-output-clear,
.jz-output-autoscroll {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.6) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  padding: 0 8px !important;
  border-radius: 3px !important;
  line-height: 1 !important;
  margin: -4px 4px -4px 0 !important;
  align-self: stretch !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jz-output-clear:hover,
.jz-output-autoscroll:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}
.jz-output-autoscroll.jz-active {
  color: #10B981 !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  background: rgba(16, 185, 129, 0.12) !important;
}
/* Custom runColor (od v2.13.71, rozszerzone v2.13.78) — wszystkie action buttons w Output
   Console przyjmują kolor (Clear / Mode / Filters / Search / Autoscroll). Wcześniej tylko
   Clear miał regułę — user reportował że "kolor buttonów działa tylko na jednym". */
.jz-pane.jz-run-custom .jz-output-clear,
.jz-pane.jz-run-custom .jz-output-mode,
.jz-pane.jz-run-custom .jz-output-filters,
.jz-pane.jz-run-custom .jz-output-search-toggle,
.jz-pane.jz-run-custom .jz-output-autoscroll {
  color: var(--jz-run-text) !important;
  border-color: var(--jz-run-border) !important;
}
.jz-pane.jz-run-custom .jz-output-clear:hover,
.jz-pane.jz-run-custom .jz-output-mode:hover,
.jz-pane.jz-run-custom .jz-output-filters:hover,
.jz-pane.jz-run-custom .jz-output-search-toggle:hover,
.jz-pane.jz-run-custom .jz-output-autoscroll:hover {
  background: var(--jz-run-bg) !important;
}
/* Active states (autoscroll/search ON) — accent zachowuje custom color zamiast emerald default. */
.jz-pane.jz-run-custom .jz-output-autoscroll.jz-active,
.jz-pane.jz-run-custom .jz-output-search-toggle.jz-active {
  color: var(--jz-run-text) !important;
  border-color: var(--jz-run-border) !important;
  background: var(--jz-run-bg) !important;
}

/* === Output Console — viewMode + filters + search (od v2.13.73) ===
   Mode toggle button: cycle 3 states (C+J / C / J) — single button labelem widocznym. */
.jz-output-mode,
.jz-output-filters,
.jz-output-search-toggle {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.6) !important;
  cursor: pointer !important;
  font-size: 11px !important;
  padding: 0 8px !important;
  border-radius: 3px !important;
  line-height: 1 !important;
  margin: -4px 4px -4px 0 !important;
  align-self: stretch !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  white-space: nowrap !important;
}
.jz-output-mode:hover,
.jz-output-filters:hover,
.jz-output-search-toggle:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}
.jz-output-search-toggle.jz-active {
  color: #10B981 !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  background: rgba(16, 185, 129, 0.12) !important;
}

/* viewMode: hide content/jz lines based on parent mode class.
   Klasy jz-output-mode-{standard|jz|both} dodawane przez _applyOutputModeClasses. */
.jz-pane.jz-output-mode-standard .jz-output-line[data-kind="jz"] { display: none !important; }
.jz-pane.jz-output-mode-jz .jz-output-line[data-kind="console"] { display: none !important; }
/* both — żadnych ukryć (default). */

/* Per-level filters: jz-output-hide-{level} obecna gdy level OFF. */
.jz-pane.jz-output-hide-log   .jz-output-line[data-level="log"]   { display: none !important; }
.jz-pane.jz-output-hide-info  .jz-output-line[data-level="info"]  { display: none !important; }
.jz-pane.jz-output-hide-warn  .jz-output-line[data-level="warn"]  { display: none !important; }
.jz-pane.jz-output-hide-error .jz-output-line[data-level="error"] { display: none !important; }
.jz-pane.jz-output-hide-debug .jz-output-line[data-level="debug"] { display: none !important; }

/* Search filter: na linię — gdy nie pasuje pattern. */
.jz-output-line.jz-output-search-no-match { display: none !important; }

/* debug level — szary gasł (mniej intensywny niż log, bardziej spammy w naturze). */
.jz-output-line-debug { color: #6B7280 !important; }

/* Search row pod headerem. */
.jz-output-search-row {
  flex: 0 0 auto !important;
  background: #111827 !important;
  border-top: 1px solid rgba(16, 185, 129, 0.3) !important;
  padding: 4px 8px !important;
}
.jz-output-search-input {
  width: 100% !important;
  background: #1F2937 !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 3px !important;
  padding: 4px 8px !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 11px !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.jz-output-search-input:focus {
  border-color: rgba(16, 185, 129, 0.6) !important;
}

/* Filters popover — anchored pod filtersBtn, fixed position. */
.jz-output-filters-popover {
  position: fixed !important;
  z-index: 2147483645 !important;
  background: #1F2937 !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  border-radius: 4px !important;
  padding: 8px !important;
  min-width: 180px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 12px !important;
}
.jz-output-filters-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #9CA3AF !important;
  padding-bottom: 4px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.jz-output-filters-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  cursor: pointer !important;
}
.jz-output-filters-row:hover {
  background: rgba(255,255,255,0.04) !important;
}
.jz-output-filters-row input[type="checkbox"] {
  margin: 0 !important;
  cursor: pointer !important;
}
.jz-output-filters-dot {
  font-size: 10px !important;
  display: inline-block !important;
  width: 10px !important;
  text-align: center !important;
}
.jz-output-filters-label {
  flex: 1 !important;
}

/* === Output Console — pasek zakładek z licznikami (od v2.13.117) === */
.jz-output-tabs {
  flex: 0 0 auto !important;
  display: flex !important;
  background: #111827 !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.jz-output-tab {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: rgba(255,255,255,0.55) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 10px !important;
  padding: 5px 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.jz-output-tab:hover { color: #fff !important; background: rgba(255,255,255,0.05) !important; }
.jz-output-tab.jz-active {
  color: #34D399 !important;
  border-bottom-color: #10B981 !important;
}
.jz-output-tab-label { overflow: hidden !important; text-overflow: ellipsis !important; }
.jz-output-tab-cnt {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.7) !important;
  border-radius: 8px !important;
  font-size: 9px !important;
  padding: 0 4px !important;
  min-width: 14px !important;
  text-align: center !important;
}
.jz-output-tab.jz-active .jz-output-tab-cnt {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #6EE7B7 !important;
}
.jz-pane.jz-run-custom .jz-output-tab.jz-active {
  color: var(--jz-run-text) !important;
  border-bottom-color: var(--jz-run-text) !important;
}

/* Output Console — wiersze: czas, tagi, rich rows (network / errors / dataLayer). */
.jz-output-line .jz-time { color: #64748B !important; margin-right: 6px !important; }
.jz-output-line .jz-tag {
  display: inline-block !important;
  padding: 0 5px !important;
  border-radius: 3px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  margin-right: 5px !important;
  vertical-align: baseline !important;
}
.jz-tag-lvl-log    { background: #334155 !important; color: #CBD5E1 !important; }
.jz-tag-lvl-info   { background: #1E3A5F !important; color: #93C5FD !important; }
.jz-tag-lvl-warn   { background: #854D0E !important; color: #FDE68A !important; }
.jz-tag-lvl-error  { background: #7F1D1D !important; color: #FECACA !important; }
.jz-tag-lvl-debug  { background: #1F2937 !important; color: #6B7280 !important; }
.jz-tag-err        { background: #991B1B !important; color: #FECACA !important; }
.jz-tag-pending    { background: #475569 !important; color: #CBD5E1 !important; }
.jz-tag-200        { background: #166534 !important; color: #BBF7D0 !important; }
.jz-tag-300        { background: #854D0E !important; color: #FEF08A !important; }
.jz-tag-400        { background: #991B1B !important; color: #FECACA !important; }
.jz-tag-500        { background: #7F1D1D !important; color: #FECACA !important; }
.jz-tag-ecom       { background: #7C2D12 !important; color: #FED7AA !important; }
.jz-tag-hist       { background: #1E293B !important; color: #94A3B8 !important; }
.jz-output-expandable { cursor: pointer !important; }
.jz-output-row-net .jz-net-method { color: #E5E7EB !important; font-weight: 700 !important; margin-right: 5px !important; }
.jz-output-row-net .jz-net-url { color: #93C5FD !important; }
.jz-output-row-net .jz-net-dur {
  color: #E5E7EB !important; margin-left: 6px !important;
  background: rgba(56,189,248,0.20) !important; padding: 0 4px !important; border-radius: 3px !important;
}
.jz-output-row-dl .jz-dl-event { color: #E5E7EB !important; font-weight: 700 !important; }
.jz-output-line .jz-out-loc { color: #64748B !important; font-size: 10px !important; margin-top: 2px !important; }
.jz-output-line .jz-stack {
  display: none !important;
  margin-top: 4px !important;
  padding: 4px 6px !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: 3px !important;
  white-space: pre-wrap !important;
  font-size: 10px !important;
  color: #94A3B8 !important;
}
.jz-output-line.expanded .jz-stack { display: block !important; }

/* === Output Console — filtr kontekstowy + bogate wiersze Network (od v2.13.118) === */
.jz-output-filterbar {
  flex: 0 0 auto !important;
  background: #0B1220 !important;
  border-bottom: 1px solid rgba(16,185,129,0.25) !important;
}
.jz-output-filterbar:empty { display: none !important; }
.jz-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 3px 8px !important;
  padding: 4px 8px !important;
}
.jz-filter-row + .jz-filter-row { border-top: 1px solid rgba(255,255,255,0.05) !important; }
.jz-filter-chk {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 10px !important;
  color: #CBD5E1 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.jz-filter-chk input[type="checkbox"] {
  margin: 0 !important; width: 12px !important; height: 12px !important;
  cursor: pointer !important; accent-color: #10B981 !important;
}
.jz-filter-row-ranges { gap: 6px 14px !important; }
.jz-range { display: flex !important; align-items: center !important; gap: 6px !important; flex: 1 1 200px !important; min-width: 180px !important; }
.jz-range-label { font-size: 10px !important; color: #94A3B8 !important; min-width: 30px !important; }
.jz-range-track { position: relative !important; height: 16px !important; flex: 1 1 auto !important; }
.jz-range-track::before {
  content: '' !important; position: absolute !important; left: 0 !important; right: 0 !important;
  top: 7px !important; height: 3px !important; background: #334155 !important; border-radius: 2px !important;
}
.jz-range-track input[type="range"] {
  -webkit-appearance: none !important; appearance: none !important;
  position: absolute !important; left: 0 !important; top: 0 !important;
  width: 100% !important; height: 16px !important; margin: 0 !important;
  background: transparent !important; pointer-events: none !important;
}
.jz-range-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important; appearance: none !important; pointer-events: auto !important;
  width: 12px !important; height: 12px !important; border-radius: 50% !important;
  background: #10B981 !important; border: 2px solid #0B1220 !important; cursor: pointer !important;
}
.jz-range-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto !important; width: 12px !important; height: 12px !important;
  border-radius: 50% !important; background: #10B981 !important; border: 2px solid #0B1220 !important; cursor: pointer !important;
}
.jz-range-track input[type="range"]::-webkit-slider-runnable-track { background: transparent !important; }
.jz-range-track input[type="range"]::-moz-range-track { background: transparent !important; }
.jz-range-readout { font-size: 10px !important; color: #CBD5E1 !important; min-width: 86px !important; text-align: right !important; }
/* Pola ręcznego wpisania wartości min/max obok suwaka (Network — Wielkość/Czas). */
.jz-range-num {
  flex: 0 0 auto !important; width: 52px !important;
  background: #0B1220 !important; color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 3px !important;
  font-size: 10px !important; padding: 1px 3px !important; text-align: right !important;
  -moz-appearance: textfield !important;
}
.jz-range-num::-webkit-outer-spin-button,
.jz-range-num::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.jz-range-lo { z-index: 3 !important; }
.jz-range-hi { z-index: 4 !important; }

/* Filtr — przyciski wszystkie/żadne + filtr po domenie. */
.jz-filter-bulk { display: inline-flex !important; gap: 2px !important; margin-right: 4px !important; }
.jz-filter-bulk-btn {
  font-size: 9px !important; padding: 1px 5px !important; cursor: pointer !important;
  background: #1E293B !important; color: #94A3B8 !important;
  border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 3px !important;
  font-family: inherit !important; line-height: 1.4 !important;
}
.jz-filter-bulk-btn:hover { color: #fff !important; background: #334155 !important; }
.jz-filter-domain { display: inline-flex !important; align-items: center !important; gap: 4px !important; flex: 1 1 160px !important; min-width: 150px !important; }
.jz-filter-domain > span { font-size: 10px !important; color: #94A3B8 !important; }
.jz-filter-domain-input {
  flex: 1 1 auto !important; min-width: 80px !important;
  background: #0F172A !important; color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 3px !important;
  padding: 0 5px !important; height: 16px !important; line-height: 14px !important;
  font-family: inherit !important; font-size: 10px !important;
  outline: none !important; box-sizing: border-box !important;
}
.jz-filter-domain-input:focus { border-color: rgba(16,185,129,0.6) !important; }

/* Console — wpis z obiektem: zwinięty jednoliniowy podgląd (od v2.13.121). */
.jz-out-head { display: flex !important; align-items: baseline !important; }
.jz-out-head .jz-out-text {
  flex: 1 1 auto !important; min-width: 0 !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.jz-output-line.expanded .jz-out-head .jz-out-text {
  white-space: pre-wrap !important; overflow: visible !important;
}

/* DataLayer — widok dzielony: nowe pushe / aktualny stan. */
.jz-dl-split { display: flex !important; height: 100% !important; min-height: 0 !important; }
.jz-dl-col {
  flex: 1 1 0 !important; min-width: 0 !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
}
.jz-dl-col + .jz-dl-col { border-left: 1px solid rgba(16,185,129,0.3) !important; }
.jz-dl-col-title {
  flex: 0 0 auto !important; padding: 3px 8px !important;
  font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: 0.5px !important; color: #6EE7B7 !important;
  background: #111827 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important;
}
.jz-dl-tree-btns { display: inline-flex !important; gap: 3px !important; flex: 0 0 auto !important; }
.jz-dl-col-body {
  flex: 1 1 auto !important; min-height: 0 !important;
  overflow-y: auto !important; overflow-x: hidden !important; padding: 2px 4px !important;
}

/* DataLayer — drzewo JSON (prawa kolumna): rozwijane węzły. */
/* font-size: inherit — by drzewo dziedziczyło rozmiar czcionki panelu Output
   (ustawienie fontu okna); bez tego reguła !important blokowała zmianę. */
.jz-dl-tree { font-size: inherit !important; line-height: 1.5 !important; }
.jz-tree-children {
  display: none !important; padding-left: 13px !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}
.jz-tree-node.jz-tree-open > .jz-tree-children { display: block !important; }
.jz-tree-row { display: flex !important; align-items: baseline !important; padding: 1px 0 !important; }
.jz-tree-row.jz-tree-expandable { cursor: pointer !important; }
.jz-tree-row.jz-tree-expandable:hover { background: rgba(255,255,255,0.05) !important; }
.jz-tree-toggle {
  flex: 0 0 auto !important; width: 12px !important; color: #64748B !important;
  font-size: 8px !important; display: inline-block !important;
}
.jz-tree-node.jz-tree-open > .jz-tree-row > .jz-tree-toggle { transform: rotate(90deg) !important; }
.jz-tree-toggle-empty { visibility: hidden !important; }
.jz-tree-key { color: #C792EA !important; flex: 0 0 auto !important; }
.jz-tree-preview {
  color: #64748B !important; flex: 1 1 auto !important; min-width: 0 !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.jz-tree-val {
  flex: 0 1 auto !important; min-width: 0 !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.jz-tree-val-string  { color: #C3E88D !important; }
.jz-tree-val-number  { color: #F78C6C !important; }
.jz-tree-val-boolean { color: #82AAFF !important; }
.jz-tree-val-null    { color: #64748B !important; }

/* Network — kolory tagów typu zasobu (analogicznie do statusu). */
.jz-tag-type { letter-spacing: 0.2px !important; }
.jz-tag-type-doc      { background:#1E3A5F !important; color:#BFDBFE !important; }
.jz-tag-type-css      { background:#3730A3 !important; color:#C7D2FE !important; }
.jz-tag-type-js       { background:#854D0E !important; color:#FDE68A !important; }
.jz-tag-type-xhr      { background:#0F766E !important; color:#99F6E4 !important; }
.jz-tag-type-img      { background:#7C2D12 !important; color:#FED7AA !important; }
.jz-tag-type-font     { background:#5B21B6 !important; color:#DDD6FE !important; }
.jz-tag-type-media    { background:#9D174D !important; color:#FBCFE8 !important; }
.jz-tag-type-socket   { background:#155E75 !important; color:#A5F3FC !important; }
.jz-tag-type-wasm     { background:#3F6212 !important; color:#D9F99D !important; }
.jz-tag-type-manifest { background:#1F2937 !important; color:#E5E7EB !important; }
.jz-tag-type-other    { background:#475569 !important; color:#CBD5E1 !important; }

/* Network — wiersz: domena / ścieżka / rozmiar. */
.jz-output-row-net .jz-net-domain { color:#93C5FD !important; }
.jz-output-row-net .jz-net-path   { color:#64748B !important; }
.jz-output-row-net .jz-net-size   { color:#94A3B8 !important; margin-left:6px !important; }
/* Rozmiar wyróżniony tłem tylko gdy ma realną wartość (jz-net-size-val). */
.jz-output-row-net .jz-net-size.jz-net-size-val {
  color:#E5E7EB !important; background: rgba(168,85,247,0.20) !important;
  padding: 0 4px !important; border-radius: 3px !important;
}

/* Rozwijany blok szczegółów (Network / Errors) — pary klucz/wartość. */
.jz-output-detail {
  display: none !important; margin-top: 4px !important; padding: 4px 6px !important;
  background: rgba(255,255,255,0.04) !important; border-radius: 3px !important;
}
.jz-output-line.expanded .jz-output-detail { display: block !important; }
.jz-kv { display: flex !important; gap: 8px !important; padding: 1px 0 !important; font-size: 10px !important; }
.jz-kv-k { color: #64748B !important; min-width: 104px !important; flex: 0 0 auto !important; }
.jz-kv-v { color: #CBD5E1 !important; word-break: break-all !important; }
.jz-kv-pre {
  color: #CBD5E1 !important; white-space: pre-wrap !important; word-break: break-all !important;
  margin: 0 !important; padding: 0 !important; font: inherit !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
}
/* Łamanie długich, nieprzerywalnych ciągów (URL-e, tokeny) w każdym miejscu. */
.jz-output-line .jz-out-text,
.jz-output-line .jz-stack,
.jz-output-row-net .jz-net-domain,
.jz-output-row-net .jz-net-path,
.jz-output-row-dl .jz-dl-event { overflow-wrap: anywhere !important; word-break: break-all !important; }
/* DataLayer — pasek między kolumnami; przeciąganie zmienia ich szerokość. */
.jz-dl-divider {
  flex: 0 0 5px !important; cursor: col-resize !important;
  background: rgba(16,185,129,0.3) !important;
}
.jz-dl-divider:hover { background: rgba(16,185,129,0.65) !important; }

/* === TEMP panes (od v2.13.81; rozszerzone v2.13.85) — distinct kolor pełnego pane'a
   per type, żeby visually odróżniać od persistent: orange (CSS) / red (JS) / pink (Console)
   / cyan (Output). Nie tylko dot — cały border + header accent. === */
.jz-pane.jz-pane-temp.jz-pane-css {
  border-color: rgba(249, 115, 22, 0.65) !important; /* orange */
}
.jz-pane.jz-pane-temp.jz-pane-css .jz-pane-header {
  border-bottom-color: rgba(249, 115, 22, 0.45) !important;
}
.jz-pane.jz-pane-temp.jz-pane-js {
  border-color: rgba(239, 68, 68, 0.65) !important; /* red */
}
.jz-pane.jz-pane-temp.jz-pane-js .jz-pane-header {
  border-bottom-color: rgba(239, 68, 68, 0.45) !important;
}
.jz-pane.jz-pane-temp.jz-pane-console {
  border-color: rgba(236, 72, 153, 0.65) !important; /* pink */
}
.jz-pane.jz-pane-temp.jz-pane-console .jz-pane-header {
  border-bottom-color: rgba(236, 72, 153, 0.45) !important;
}
.jz-pane.jz-pane-temp.jz-pane-output {
  border-color: rgba(6, 182, 212, 0.65) !important; /* cyan */
}
.jz-pane.jz-pane-temp.jz-pane-output .jz-pane-header {
  border-bottom-color: rgba(6, 182, 212, 0.45) !important;
}
.jz-pane.jz-pane-temp.jz-pane-output .jz-output-search-row {
  border-top-color: rgba(6, 182, 212, 0.45) !important;
}

/* Collapse-to-titlebar (od v3.2.9) — zwija okno do samej belki nagłówka.
   Dotyczy wszystkich okien front: persistent CSS/JS/JS-Console/Output, TEMP, AI Helper. */
.jz-pane.jz-pane-collapsed {
  height: auto !important;
  min-height: 0 !important;
}
.jz-pane.jz-pane-collapsed > *:not(.jz-pane-header) {
  display: none !important;
}
.jz-pane-collapse-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.7) !important;
  cursor: pointer !important;
  padding: 0 7px !important;
  border-radius: 3px !important;
  line-height: 1 !important;
  margin: -4px 0 -4px 4px !important;
  align-self: stretch !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jz-pane-collapse-btn:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
}
.jz-pane-collapse-btn svg { display: block !important; }

/* TEMP pane close button (od v2.13.81) — krzyżyk w prawym górnym rogu headera. */
.jz-pane-temp-close {
  background: transparent !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  color: rgba(239, 68, 68, 0.9) !important;
  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 0 8px !important;
  border-radius: 3px !important;
  line-height: 1 !important;
  margin: -4px 0 -4px 4px !important;
  align-self: stretch !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jz-pane-temp-close:hover {
  color: #fff !important;
  background: rgba(239, 68, 68, 0.6) !important;
}

/* TEMP pane clear button (od v3.2.3) — czyści edytor TEMP CSS/JS. Neutralny
   (biały) — odróżnia się wizualnie od czerwonego krzyżyka close. */
.jz-pane-temp-clear {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.65) !important;
  cursor: pointer !important;
  padding: 0 7px !important;
  border-radius: 3px !important;
  line-height: 1 !important;
  margin: -4px 0 -4px 4px !important;
  align-self: stretch !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jz-pane-temp-clear:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
}
.jz-pane-temp-clear svg { display: block !important; }

/* === API help popup (od v2.13.78, Ctrl+Shift+H; draggable od v2.13.80) === */
.jz-output-api-help-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  z-index: 2147483646 !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  /* NIE flex (od v2.13.80) — żeby modal mógł mieć absolute position dla draga.
     Centrowanie initial liczone w JS po appendChild. */
}
.jz-output-api-help-modal {
  position: absolute !important;
  background: #1F2937 !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  border-radius: 6px !important;
  width: min(1040px, 94vw) !important;
  max-height: 85vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}
.jz-output-api-help-header {
  cursor: grab !important;
  user-select: none !important;
}
.jz-output-api-help-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #111827 !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.jz-output-api-help-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #10B981 !important;
}
.jz-output-api-help-close {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 1 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jz-output-api-help-close:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.jz-output-api-help-body {
  padding: 14px !important;
  overflow-y: auto !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}
.jz-output-api-help-col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
@media (max-width: 720px) {
  .jz-output-api-help-body { flex-direction: column !important; }
}
.jz-output-api-help-section {
  margin: 0 !important;
  background: #161E2B !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
}
.jz-output-api-help-section-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #9CA3AF !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 6px !important;
}
.jz-output-api-help-modal pre {
  background: #0F172A !important;
  color: #93C5FD !important;
  padding: 8px 10px !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin: 0 0 6px 0 !important;
  white-space: pre !important;
  overflow-x: auto !important;
}
.jz-output-api-help-note {
  font-size: 11px !important;
  color: #9CA3AF !important;
  font-style: italic !important;
}
.jz-output-api-help-shortcut {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 4px 0 !important;
  line-height: 1.5 !important;
}
.jz-output-api-help-item {
  position: relative !important;
  padding: 4px 0 4px 16px !important;
  line-height: 1.55 !important;
  color: #D1D5DB !important;
}
.jz-output-api-help-item::before {
  content: "▸" !important;
  position: absolute !important;
  left: 2px !important;
  color: #10B981 !important;
}
.jz-output-api-help-sublabel {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #93C5FD !important;
  margin: 9px 0 5px !important;
}
.jz-output-api-help-footer {
  padding: 10px 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 11px !important;
  color: #9CA3AF !important;
}
.jz-output-api-help-modal kbd {
  display: inline-block !important;
  padding: 2px 6px !important;
  font-family: inherit !important;
  font-size: 11px !important;
  background: #0F172A !important;
  color: #FCD34D !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 3px !important;
  min-width: 110px !important;
  text-align: center !important;
}

/* ===== AI Helper — okno czatu (od v2.13.127) ===== */
.jz-pane-ai {
  border-left: 3px solid #8B5CF6 !important;
  min-width: 320px !important;
  /* v3.2.46 — bazowy font-family dla całego okna AI Helpera. Bez tego elementy
     nie objęte per-role stylingiem (welcome text, telemetry row, notice) dziedziczyły
     font ze strony pod spodem (każda inny). Per-role override (jz-ai-fs-style)
     i tak nadpisuje to dla user/assistant/tool/form. */
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
/* AI Helper — kursor na belce nagłówka (od v3.2.10), spójny z pozostałymi oknami. */
.jz-pane-ai .jz-pane-header { cursor: grab !important; }
.jz-pane-ai .jz-pane-header:active { cursor: grabbing !important; }
.jz-ai-bar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 6px !important;
  background: rgba(0,0,0,0.18) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  flex: 0 0 auto !important;
}
.jz-ai-bar select {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: #111827 !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  padding: 3px 4px !important;
  font-family: inherit !important;
}
/* v3.2.45 — telemetry row (timers + tokens, no costs). v3.2.46 — czytelniejszy
   font-size (11px) i mocniejszy kontrast (user zgłaszał nieczytelność). */
.jz-ai-telem {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 4px 8px !important;
  background: rgba(0,0,0,0.24) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  flex: 0 0 auto !important;
  font-family: 'Consolas', 'Menlo', 'Courier New', monospace !important;
  font-size: 11px !important;
  color: rgba(229,231,235,0.85) !important;
  line-height: 1.5 !important;
  user-select: none !important;
}
.jz-ai-telem-timers { color: #93C5FD !important; }
.jz-ai-telem-current { color: #C4B5FD !important; }
.jz-ai-telem-session { color: rgba(229,231,235,0.7) !important; }
.jz-ai-telem-sep { color: rgba(255,255,255,0.22) !important; }
/* v3.2.45 — per-message telemetry footer (assistant) */
.jz-ai-msg-telem {
  margin-top: 4px !important;
  font-family: 'Consolas', 'Menlo', monospace !important;
  font-size: 9.5px !important;
  color: rgba(148,163,184,0.55) !important;
  line-height: 1.3 !important;
  user-select: none !important;
}
.jz-ai-clear {
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.7) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  padding: 2px 6px !important;
}
.jz-ai-clear:hover { color: #fff !important; border-color: rgba(255,255,255,0.3) !important; }
.jz-ai-msgs {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.jz-ai-welcome, .jz-ai-notice {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #9CA3AF !important;
  padding: 6px 8px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 6px !important;
}
.jz-ai-notice { color: #FCD34D !important; background: rgba(252,211,77,0.1) !important; }
.jz-ai-msg { display: flex !important; flex-direction: column !important; gap: 2px !important; position: relative !important; /* od v3.2.38 — copy btn pozycjonowany absolutnie */ }

/* od v3.2.38 — pływająca ikona kopiowania w prawym dolnym rogu odpowiedzi
   assistanta. Po hover na msg widoczna (lekko przyciemniona), feedback po klik. */
.jz-ai-msg-copy {
  position: absolute !important;
  right: 6px !important;
  bottom: 6px !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 4px !important;
  color: rgba(255,255,255,0.55) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.15s, color 0.15s, background 0.15s !important;
  z-index: 2 !important;
}
.jz-ai-msg-assistant:hover .jz-ai-msg-copy { opacity: 1 !important; }
.jz-ai-msg-copy:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.18) !important;
}
.jz-ai-msg-copy.jz-ai-msg-copy-ok {
  color: #10B981 !important;
  background: rgba(16,185,129,0.18) !important;
  border-color: rgba(16,185,129,0.4) !important;
  opacity: 1 !important;
}

/* od v3.2.38 — counter wykorzystania kontekstu modelu w toolbarze AI Helpera.
   3 stany: normalny (≤70%), warn (70-85%, pomarańczowy), crit (>85%, czerwony +
   auto-trigger kompaktowania). */
.jz-ai-ctx-usage {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  padding: 2px 6px !important;
  margin-left: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 3px !important;
  cursor: help !important;
  user-select: none !important;
}
.jz-ai-ctx-usage.jz-ai-ctx-warn {
  color: #FCD34D !important;
  background: rgba(252,211,77,0.12) !important;
  border-color: rgba(252,211,77,0.32) !important;
}
.jz-ai-ctx-usage.jz-ai-ctx-crit {
  color: #FCA5A5 !important;
  background: rgba(239,68,68,0.18) !important;
  border-color: rgba(239,68,68,0.45) !important;
}

/* od v3.2.38 — alternatywne pole tekstowe w request_user_input form. */
.jz-ai-form-free {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed rgba(255,255,255,0.12) !important;
}
.jz-ai-form-free label {
  font-size: 10px !important;
  color: rgba(255,255,255,0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.jz-ai-form-free-text {
  width: 100% !important;
  resize: vertical !important;
  min-height: 40px !important;
  padding: 6px 8px !important;
  background: rgba(0,0,0,0.22) !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}
.jz-ai-form-free-text:focus {
  outline: none !important;
  border-color: rgba(139,92,246,0.5) !important;
  background: rgba(0,0,0,0.32) !important;
}
.jz-ai-msg-role {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #6B7280 !important;
}
.jz-ai-msg-body {
  /* font-size + font-family idą przez CSS variables (od v3.2.10) — pozwala na
     override bez przeganiania !important specificity. _aiApplyFontSize ustawia
     --jz-ai-fs / --jz-ai-ff na .jz-pane-ai. Fallback do dotychczasowych wartości. */
  font-size: var(--jz-ai-fs, 12px) !important;
  font-family: var(--jz-ai-ff, inherit) !important;
  line-height: 1.5 !important;
  border-radius: 6px !important;
  padding: 6px 9px !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.jz-ai-msg-user .jz-ai-msg-body { background: #312E81 !important; color: #E0E7FF !important; align-self: flex-start !important; }
.jz-ai-msg-assistant .jz-ai-msg-body { background: rgba(255,255,255,0.06) !important; color: #E5E7EB !important; }
.jz-ai-msg-user .jz-ai-msg-role { color: #818CF8 !important; }
.jz-ai-text { white-space: pre-wrap !important; }
.jz-ai-code {
  display: block !important;
  white-space: pre !important;
  overflow-x: auto !important;
  background: #0B1120 !important;
  color: #D1D5DB !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 5px !important;
  padding: 7px 9px !important;
  margin: 5px 0 !important;
  font-family: 'Consolas', 'Menlo', monospace !important;
  /* Skaluje się proporcjonalnie do bodyFontSize (od v3.2.10). */
  font-size: var(--jz-ai-code-fs, 11px) !important;
  line-height: 1.45 !important;
}
.jz-ai-pending { color: #9CA3AF !important; font-size: 11px !important; font-style: italic !important; }
.jz-ai-input-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 6px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  flex: 0 0 auto !important;
}
.jz-ai-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  resize: none !important;
  background: #111827 !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 5px !important;
  padding: 6px 8px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.jz-ai-input:focus { outline: none !important; border-color: #8B5CF6 !important; }
.jz-ai-input:disabled { opacity: 0.5 !important; }
.jz-ai-send {
  flex: 0 0 auto !important;
  background: #8B5CF6 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  padding: 0 12px !important;
}
.jz-ai-send:hover { background: #7C3AED !important; }
.jz-ai-send:disabled { opacity: 0.5 !important; cursor: default !important; }
.jz-ai-toolchip {
  font-family: 'Consolas', 'Menlo', monospace !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  color: #C4B5FD !important;
  background: rgba(139,92,246,0.12) !important;
  border: 1px solid rgba(139,92,246,0.3) !important;
  border-radius: 5px !important;
  padding: 4px 8px !important;
  margin-top: 3px !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
/* Wynik narzędzia (od v3.2.8; v3.2.10: domyślnie zwinięty, klik w nagłówek rozwija). */
.jz-ai-toolchip-result {
  color: #BBF7D0 !important;
  background: rgba(34,197,94,0.14) !important;
  border-color: rgba(34,197,94,0.45) !important;
  padding: 6px 9px !important;
  font-size: 11px !important;
}
.jz-ai-toolchip-head {
  font-weight: 700 !important;
  color: #BBF7D0 !important;
  margin-bottom: 4px !important;
  cursor: pointer !important;
  user-select: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.jz-ai-toolchip-caret { font-size: 9px !important; opacity: 0.7 !important; }
.jz-ai-toolchip-result:not(.jz-ai-toolchip-open) .jz-ai-toolchip-body { display: none !important; }
.jz-ai-toolchip-head:hover { color: #fff !important; }
.jz-ai-toolchip-body {
  margin: 0 !important;
  padding: 6px 8px !important;
  background: rgba(0,0,0,0.18) !important;
  border-radius: 4px !important;
  font-family: 'Consolas', 'Menlo', monospace !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: #DCFCE7 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  max-height: 360px !important;
  overflow-y: auto !important;
}
/* v3.2.40 — tool result envelope visual cues. */
.jz-ai-toolchip-error {
  background: rgba(239,68,68,0.10) !important;
  border-color: rgba(239,68,68,0.45) !important;
  color: #FECACA !important;
}
.jz-ai-toolchip-error .jz-ai-toolchip-head { color: #FECACA !important; }
.jz-ai-toolchip-badge {
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 0 4px !important;
  border-radius: 3px !important;
  background: rgba(245,158,11,0.20) !important;
  color: #FCD34D !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}
.jz-ai-toolchip-warnings {
  margin: 4px 0 !important;
  padding: 4px 6px !important;
  background: rgba(239,68,68,0.12) !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  color: #FCA5A5 !important;
}
.jz-ai-toolchip-warn { line-height: 1.4 !important; }
.jz-ai-toolchip-suggestions {
  margin-top: 4px !important;
  padding: 0 2px !important;
  font-size: 10.5px !important;
  color: rgba(220,252,231,0.6) !important;
  font-style: italic !important;
}
.jz-ai-toolchip-suggestion { line-height: 1.5 !important; }
/* v3.2.43 — stepId badge on tool-result chip header */
.jz-ai-toolchip-stepid {
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 0 5px !important;
  border-radius: 8px !important;
  background: rgba(34,197,94,0.18) !important;
  color: #BBF7D0 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  font-family: 'Consolas', 'Menlo', monospace !important;
  line-height: 1.4 !important;
}
/* v3.2.45 — per-toolchip duration stamp */
.jz-ai-toolchip-dur {
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 0 5px !important;
  border-radius: 8px !important;
  background: rgba(148,163,184,0.18) !important;
  color: #CBD5E1 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  font-family: 'Consolas', 'Menlo', monospace !important;
  line-height: 1.4 !important;
}

/* Bar buttons: copy / font / clear (od v3.2.8 — wcześniej tylko clear). */
.jz-ai-tool {
  background: transparent !important;
  border: 1px solid rgba(139,92,246,0.45) !important;
  color: #C4B5FD !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 8px !important;
  min-width: 26px !important;
  height: 24px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.jz-ai-tool:hover {
  color: #fff !important;
  background: rgba(139,92,246,0.32) !important;
}

/* Stop button — czerwony, zamiast Send gdy busy. */
.jz-ai-stop {
  background: #DC2626 !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 14px !important;
  border-radius: 5px !important;
  margin-left: 6px !important;
}
.jz-ai-stop:hover { background: #B91C1C !important; }
.jz-ai-stop[hidden] { display: none !important; }
.jz-ai-send[hidden] { display: none !important; }

/* Font/size popover (od v3.2.8). */
.jz-ai-font-menu {
  position: fixed !important;
  z-index: 2147483647 !important;
  background: #1F2937 !important;
  border: 1px solid rgba(139,92,246,0.45) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  color: #E5E7EB !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 220px !important;
}
.jz-ai-font-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.jz-ai-font-row span { color: #9CA3AF !important; }
.jz-ai-font-row select {
  background: #0F172A !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  padding: 3px 6px !important;
  font: inherit !important;
  min-width: 130px !important;
}
/* Inline forms w AI Helperze (od v3.2.11) — bubble do potwierdzeń / pytań / wyborów,
   zastępuje window.confirm i zapewnia tool request_user_input. */
.jz-ai-msg-form {
  background: rgba(139,92,246,0.10) !important;
  border-left: 3px solid #8B5CF6 !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.jz-ai-msg-form-title {
  font-weight: 700 !important;
  font-size: 12.5px !important;
  color: #DDD6FE !important;
}
.jz-ai-msg-form-desc {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #E5E7EB !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
.jz-ai-form-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.jz-ai-form-field label {
  font-size: 11px !important;
  color: #C4B5FD !important;
  font-weight: 600 !important;
}
.jz-ai-form-field .jz-ai-form-input {
  font: inherit !important;
  font-size: 12px !important;
  color: #E5E7EB !important;
  background: #111827 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  padding: 5px 7px !important;
}
.jz-ai-form-field textarea.jz-ai-form-input {
  min-height: 56px !important;
  font-family: 'Consolas', 'Menlo', monospace !important;
  resize: vertical !important;
}
.jz-ai-form-field input[type="color"].jz-ai-form-input {
  height: 30px !important;
  padding: 2px 4px !important;
  cursor: pointer !important;
}
.jz-ai-form-check {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #E5E7EB !important;
  cursor: pointer !important;
}
.jz-ai-form-check input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  cursor: pointer !important;
}
.jz-ai-form-actions {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  margin-top: 4px !important;
}
.jz-ai-form-actions button {
  font: inherit !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
}
.jz-ai-form-submit {
  background: #8B5CF6 !important;
  color: #fff !important;
}
.jz-ai-form-submit:hover { background: #7C3AED !important; }
.jz-ai-form-cancel {
  background: transparent !important;
  border-color: #4B5563 !important;
  color: #D1D5DB !important;
}
.jz-ai-form-cancel:hover { background: rgba(255,255,255,0.08) !important; }
.jz-ai-msg-form.jz-ai-msg-form-done {
  opacity: 0.85 !important;
}
.jz-ai-msg-form-done .jz-ai-form-field .jz-ai-form-input,
.jz-ai-msg-form-done .jz-ai-form-check input,
.jz-ai-msg-form-done .jz-ai-form-actions { display: none !important; }
.jz-ai-msg-form-result {
  font-size: 11.5px !important;
  color: #A78BFA !important;
  font-style: italic !important;
}

/* Panel ustawień wyglądu AI Helpera (od v3.2.18) — per-role styling
   (user / assistant / tool / form × font / size / color / bg). */
.jz-ai-style-panel {
  position: fixed !important;
  z-index: 2147483647 !important;
  background: #1F2937 !important;
  color: #E5E7EB !important;
  border: 1px solid rgba(139,92,246,0.55) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  min-width: 460px !important;
  max-width: calc(100vw - 32px) !important;
}
.jz-ai-sp-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: rgba(139,92,246,0.20) !important;
  border-bottom: 1px solid rgba(139,92,246,0.4) !important;
  border-radius: 8px 8px 0 0 !important;
  cursor: move !important;
  user-select: none !important;
}
.jz-ai-sp-title { font-weight: 700 !important; color: #DDD6FE !important; }
.jz-ai-sp-close {
  background: transparent !important; border: none !important;
  color: #9CA3AF !important; font-size: 18px !important; line-height: 1 !important;
  cursor: pointer !important; padding: 0 6px !important; border-radius: 4px !important;
}
.jz-ai-sp-close:hover { color: #fff !important; background: rgba(255,255,255,0.1) !important; }
.jz-ai-sp-tbl {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.jz-ai-sp-tbl th, .jz-ai-sp-tbl td {
  padding: 4px 6px !important;
  font-size: 11px !important;
  vertical-align: middle !important;
  text-align: left !important;
}
.jz-ai-sp-tbl thead th {
  color: #9CA3AF !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.jz-ai-sp-tbl tbody tr + tr td { border-top: 1px solid rgba(255,255,255,0.04) !important; }
.jz-ai-sp-role { color: #C4B5FD !important; font-weight: 600 !important; white-space: nowrap !important; }
.jz-ai-sp-tbl select {
  background: #111827 !important; color: #E5E7EB !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  padding: 3px 5px !important;
  font: inherit !important;
  font-size: 11px !important;
  min-width: 110px !important;
}
.jz-ai-sp-color-cell {
  display: flex !important; align-items: center !important; gap: 4px !important; padding: 4px 6px !important;
}
.jz-ai-sp-color-cell input[type="color"] {
  width: 32px !important; height: 22px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  cursor: pointer !important;
  background: transparent !important;
}
.jz-ai-sp-clear, .jz-ai-sp-row-reset {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #9CA3AF !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  font-size: 11px !important;
  width: 22px !important; height: 22px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.jz-ai-sp-clear:hover, .jz-ai-sp-row-reset:hover {
  color: #fff !important; background: rgba(255,255,255,0.08) !important;
}
.jz-ai-sp-auto {
  font-size: 9px !important; color: #6B7280 !important; font-style: italic !important;
  padding-left: 2px !important;
}
.jz-ai-sp-foot {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 8px 12px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.jz-ai-sp-reset-all {
  background: transparent !important;
  border: 1px solid #4B5563 !important;
  color: #D1D5DB !important;
  border-radius: 5px !important;
  padding: 6px 12px !important;
  font: inherit !important;
  font-size: 11px !important;
  cursor: pointer !important;
}
.jz-ai-sp-reset-all:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }

/* Menu kontekstowe AI Helper (od v3.2.10) — pozycje akcji + separator. */
.jz-ai-ctx-item {
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  color: #E5E7EB !important;
  font-size: 12px !important;
}
.jz-ai-ctx-item:hover { background: rgba(139,92,246,0.25) !important; color: #fff !important; }
.jz-ai-ctx-sep {
  height: 1px !important;
  margin: 2px 0 !important;
  background: rgba(255,255,255,0.1) !important;
}

/* Turn-limit bubble (od v3.2.8). */
.jz-ai-msg.jz-ai-turnlimit { border-left: 3px solid #FBBF24 !important; }
.jz-ai-turnlimit-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.jz-ai-turnlimit-actions button {
  font: inherit !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
}
.jz-ai-tl-yes {
  background: #10B981 !important;
  color: #fff !important;
}
.jz-ai-tl-yes:hover { background: #059669 !important; }
.jz-ai-tl-no {
  background: transparent !important;
  border-color: #4B5563 !important;
  color: #D1D5DB !important;
}
.jz-ai-tl-no:hover { background: rgba(255,255,255,0.08) !important; }

