/* ═══════════════════════════════════════════════════════════════════════
   PLETIVA OS — Design System (Aurora palette)
   Premium indigo→cyan gradient · Refined typography · Dual theme
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── DARK THEME (default) ──────────────────────────────────────────── */
:root,
html[data-theme="dark"] {
  /* Surfaces */
  --bg-0:         #11161a;   /* najtmavšie (page bg) */
  --bg:           #171d22;
  --bg-1:         #1c2329;
  --bg-2:         #212930;
  --bg-3:         #272f38;
  --bg-elev:      rgba(23, 29, 34, .96);

  /* Borders */
  --line:         rgba(255, 255, 255, .05);
  --line-soft:    rgba(255, 255, 255, .03);
  --line-strong:  rgba(255, 255, 255, .09);
  --line-acc:     rgba(74, 118, 74, .30);

  /* Text */
  --fg:           #F4F6F8;
  --fg-2:         #C3C8D5;
  --fg-3:         #9CA3AF;
  --fg-4:         #5a6472;
  --fg-mute:      #38424d;

  /* Accents — Green */
  --acc:          #4a764a;
  --acc-d:        #3a5c3a;
  --acc-2:        #4a764a;
  --acc-3:        #F0B429;
  --acc-4:        #5a9e6a;
  --acc-icon:     #8abf8a;
  --acc-soft:     rgba(74, 118, 74, .18);
  --acc-2-soft:   rgba(74, 118, 74, .14);
  --acc-glow:     rgba(74, 118, 74, .30);

  /* Semantic */
  --ok:           #34D399;
  --err:          #F87171;
  --warn:         #FBBF24;
  --info:         #60A5FA;

  /* Gradients */
  --grad-acc:     #4a764a;
  --grad-warm:    linear-gradient(135deg, #F0B429 0%, #5a9e6a 100%);
  --grad-mesh:    radial-gradient(at 0% 0%, rgba(74,118,74,.06), transparent 50%),
                  radial-gradient(at 100% 100%, rgba(74,118,74,.04), transparent 50%);

  /* Shadows */
  --sh-1:         0 1px 2px rgba(0,0,0,.5);
  --sh-2:         0 4px 16px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.2);
  --sh-3:         0 16px 40px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.18);
  --sh-glow:      0 0 0 1px var(--line-acc), 0 12px 32px var(--acc-glow);

  color-scheme: dark;
}

/* ─── LIGHT THEME ──────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg-0:         #e6ece6;   /* najtmavšie (kanvas pre full-screen sekcie) */
  --bg:           #f0f4f0;
  --bg-1:         #FFFFFF;
  --bg-2:         #eaf0ea;
  --bg-3:         #dce8dc;
  --bg-elev:      rgba(255, 255, 255, .9);

  --line:         rgba(74, 118, 74, .10);
  --line-soft:    rgba(74, 118, 74, .05);
  --line-strong:  rgba(74, 118, 74, .20);
  --line-acc:     rgba(74, 118, 74, .30);

  --fg:           #111a11;
  --fg-2:         #253525;
  --fg-3:         #3d5a3d;
  --fg-4:         #6a8a6a;
  --fg-mute:      #b0c8b0;

  --acc:          #4a764a;
  --acc-d:        #3a5c3a;
  --acc-2:        #4a764a;
  --acc-3:        #D97706;
  --acc-4:        #5a9e6a;
  --acc-icon:     #3a5c3a;
  --acc-soft:     rgba(74, 118, 74, .12);
  --acc-2-soft:   rgba(74, 118, 74, .08);
  --acc-glow:     rgba(74, 118, 74, .25);

  --ok:           #059669;
  --err:          #DC2626;
  --warn:         #D97706;
  --info:         #2563EB;

  --grad-acc:     #4a764a;
  --grad-warm:    linear-gradient(135deg, #D97706 0%, #5a9e6a 100%);
  --grad-mesh:    radial-gradient(at 0% 0%, rgba(74,118,74,.06), transparent 50%),
                  radial-gradient(at 100% 100%, rgba(74,118,74,.04), transparent 50%);

  --sh-1:         0 1px 2px rgba(23,29,34,.06);
  --sh-2:         0 4px 14px rgba(23,29,34,.08), 0 1px 3px rgba(23,29,34,.05);
  --sh-3:         0 20px 40px rgba(23,29,34,.12), 0 6px 14px rgba(23,29,34,.06);

  color-scheme: light;
}

/* ─── Common tokens ────────────────────────────────────────────────── */
:root {
  /* Radii */
  --r-xs:   6px;
  --r-sm:   8px;
  --r:      12px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 9999px;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  /* Layout */
  --top-h:    56px;
  --side-w:   320px;
  --bot-h:    66px;

  /* Motion */
  --e-out:    cubic-bezier(.16, 1, .3, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-1:      .12s;
  --d-2:      .22s;
  --d-3:      .35s;
  --d-4:      .55s;

  --safe-t:   env(safe-area-inset-top, 0px);
  --safe-b:   env(safe-area-inset-bottom, 0px);
}

/* ─── RESET + BASE ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body {
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: -0.005em;
  overflow: hidden;
  transition: background var(--d-3) var(--e-out), color var(--d-3) var(--e-out);
}
body {
  background: var(--bg);
  background-image: var(--grad-mesh);
  background-attachment: fixed;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { background: transparent; border: 0; cursor: pointer; }
a { color: var(--acc); text-decoration: none; transition: color var(--d-1); }
a:hover { color: var(--acc-d); }
img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Inter Variable', sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  line-height: 1.15;
}
h1 { font-size: 36px; letter-spacing: -0.035em; }
h2 { font-size: 26px; letter-spacing: -0.03em; }
h3 { font-size: 19px; }
h4 { font-size: 15px; }

.mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'ss01'; }
.grad { background: var(--grad-acc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.muted { color: var(--fg-3); }
.dim   { color: var(--fg-4); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--line-strong);
  background-clip: padding-box;
}
::selection { background: var(--acc-soft); color: var(--fg); }

/* ═══════════════════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════════════════ */
.app {
  display: grid;
  grid-template-rows: var(--top-h) 1fr;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}
.app__main {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  position: relative;
}

/* ═══ TOP BAR ═══════════════════════════════════════════════════════════ */
.top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--top-h);
  padding: 0 var(--s-4);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 50;
}
.top__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  color: var(--fg-2);
  transition: all var(--d-1) var(--e-out);
}
.top__menu:hover {
  background: var(--bg-2);
  color: var(--fg);
}
.top__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-2);
  height: 38px;
  border-radius: var(--r-sm);
  transition: background var(--d-1);
  cursor: pointer;
}
.top__logo:hover { background: var(--bg-2); }
.top__logo-mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--grad-acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 14px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.3);
}
.top__logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.top__crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 500;
  margin-left: var(--s-3);
  min-width: 0;
}
.top__crumb-sep { color: var(--fg-mute); }
.top__crumb-cur { color: var(--fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.top__search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg-3);
  font-size: 12.5px;
  cursor: pointer;
  min-width: 220px;
  max-width: 360px;
  transition: all var(--d-1);
}
.top__search:hover {
  background: var(--bg-3);
  border-color: var(--line-strong);
  color: var(--fg-2);
}
.top__search i { font-size: 12px; }
.top__search-text { flex: 1; }
.top__search-kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-3);
  background: var(--bg-1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.top__right {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: var(--s-2);
}

.top__icon {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--fg-2);
  position: relative;
  transition: all var(--d-1);
}
.top__icon:hover {
  background: var(--bg-2);
  color: var(--fg);
}
.top__icon-dot {
  position: absolute;
  top: 9px; right: 9px;
  width: 7px; height: 7px;
  background: var(--acc);
  border-radius: 50%;
  border: 1.5px solid var(--bg);
  box-shadow: 0 0 8px var(--acc);
}

.top__ai {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px 0 10px;
  background: var(--grad-acc);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 14px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.25);
  transition: all var(--d-1) var(--e-out);
}
.top__ai:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.top__ai i {
  font-size: 16px;
  color: #c8f0c8;
}
.top__ai-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: rgba(0,0,0,.22);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 2px;
  letter-spacing: 0;
}

.top__profile {
  display: inline-flex;
  align-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: all var(--d-1);
  border: 1px solid var(--line);
}
.top__profile:hover { border-color: var(--line-acc); }
.top__profile-ava {
  width: 100%; height: 100%;
  background: var(--grad-acc);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top__profile-ava img { width: 100%; height: 100%; object-fit: cover; }

/* ─── THEME SWITCH (UIverse-style sun/moon) ─────────────────────────── */
.switch {
  font-size: 14px;
  position: relative;
  display: inline-block;
  width: 3.4em;
  height: 1.9em;
  border-radius: 30px;
  box-shadow: var(--sh-1);
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #2a2a2a;
  transition: .4s var(--e-out);
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.slider:before {
  position: absolute;
  content: "";
  height: 1.15em;
  width: 1.15em;
  border-radius: 50%;
  left: 0.35em;
  bottom: 0.32em;
  transition: .4s;
  transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);
  box-shadow: inset 8px -4px 0px 0px #fff;
}
.switch input:checked + .slider { background-color: #4FB8FF; border-color: rgba(255,255,255,.2); }
.switch input:checked + .slider:before {
  transform: translateX(1.45em);
  box-shadow: inset 15px -4px 0px 15px #FFCF48;
}
.star {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  width: 4px;
  height: 4px;
  transition: all 0.4s;
}
.star_1 { left: 2.2em; top: 0.45em; }
.star_2 { left: 1.95em; top: 1.1em; }
.star_3 { left: 2.65em; top: 0.85em; width: 3px; height: 3px; }
.switch input:checked ~ .slider .star { opacity: 0; }
.cloud {
  width: 2.6em;
  position: absolute;
  bottom: -1em;
  left: -0.7em;
  opacity: 0;
  transition: all 0.4s;
}
.switch input:checked ~ .slider .cloud { opacity: .9; }

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR — komplexný overlay
   ═══════════════════════════════════════════════════════════════════════ */
.side-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 13, 20, .68);
  backdrop-filter: blur(12px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-3) var(--e-out);
}
.side-backdrop.open { opacity: 1; pointer-events: auto; }

.side {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--side-w);
  background: var(--bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 201;
  transform: translateX(-105%);
  transition: transform var(--d-3) var(--e-out);
  box-shadow: var(--sh-3);
  padding-top: var(--safe-t);
}
.side.open { transform: translateX(0); }
.side::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%, var(--acc-soft), transparent 60%),
    radial-gradient(circle at 100% 100%, var(--acc-2-soft), transparent 60%);
  pointer-events: none;
}
.side > * { position: relative; z-index: 1; }

/* Header */
.side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-5) var(--s-3);
}
.side__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.side__brand-mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--grad-acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 6px 18px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.3);
  position: relative;
}
.side__brand-mark::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: var(--grad-acc);
  filter: blur(12px);
  opacity: .35;
  z-index: -1;
}
.side__brand-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.side__brand-sub {
  font-size: 10.5px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-top: 2px;
}
.side__close {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  transition: all var(--d-1);
}
.side__close:hover {
  background: var(--bg-2);
  color: var(--fg);
}

/* Quick actions row */
.side__quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 var(--s-5) var(--s-3);
}
.side__quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1) var(--e-out);
}
.side__quick-btn i { font-size: 15px; color: var(--acc-icon); }
.side__quick-btn:hover {
  background: var(--bg-3);
  border-color: var(--line-acc);
  transform: translateY(-1px);
  color: var(--fg);
}
.side__quick-btn:active { transform: translateY(0); }

/* Sidebar search */
.side__search {
  margin: 0 var(--s-5) var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  height: 38px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border var(--d-1);
}
.side__search:focus-within { border-color: var(--line-acc); }
.side__search i { color: var(--fg-3); font-size: 12px; }
.side__search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font-size: 13px;
}
.side__search input::placeholder { color: var(--fg-3); }
.side__search-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-3);
  background: var(--bg-1);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

/* Body */
.side__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-2) var(--s-3);
}

.side__group { margin-bottom: var(--s-3); }
.side__group-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-2);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.side__group-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.side__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--d-1) var(--e-out);
  position: relative;
  margin: 1px 0;
  border: 1px solid transparent;
}
.side__item-ico {
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  font-size: 14px;
  transition: color var(--d-1);
}
.side__item-label { flex: 1; }
.side__item-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-4);
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.side__item-badge {
  background: var(--acc);
  color: #fff;
  font-weight: 700;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.side__item:hover {
  background: var(--bg-2);
  color: var(--fg);
}
.side__item:hover .side__item-ico { color: var(--acc-icon); }
.side__item.active {
  background: linear-gradient(135deg, var(--acc-soft), var(--acc-2-soft));
  color: var(--fg);
  border-color: var(--line-acc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 14px var(--acc-glow);
}
.side__item.active .side__item-ico { color: var(--acc-icon); }
.side__item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--grad-acc);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px var(--acc);
}

/* Pinned item style */
.side__item--pin .side__item-ico { color: var(--acc-3); }
.side__item--pin:hover .side__item-ico { color: var(--acc-3); }

/* Footer */
.side__foot {
  padding: var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.side__status {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 10px;
  background: rgba(52, 211, 153, .06);
  border: 1px solid rgba(52, 211, 153, .2);
  border-radius: var(--r-sm);
  color: var(--ok);
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.side__status-dot {
  width: 7px; height: 7px;
  background: var(--ok);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--ok);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.7); }
}
.side__user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all var(--d-1);
}
.side__user:hover { border-color: var(--line-acc); }
.side__user-ava {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--grad-acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  flex-shrink: 0;
}
.side__user-ava img { width: 100%; height: 100%; object-fit: cover; }
.side__user-body { flex: 1; min-width: 0; }
.side__user-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side__user-role {
  font-size: 11px;
  color: var(--fg-3);
}
.side__user-out {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  color: var(--fg-3);
  transition: all var(--d-1);
}
.side__user-out:hover {
  background: rgba(248,113,113,.1);
  color: var(--err);
}

/* ═══════════════════════════════════════════════════════════════════════
   COMMAND PALETTE
   ═══════════════════════════════════════════════════════════════════════ */
.cmd-bg {
  position: fixed;
  inset: 0;
  background: rgba(11, 13, 20, .8);
  backdrop-filter: blur(16px);
  z-index: 300;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
  animation: cmdFadeIn var(--d-2) var(--e-out);
}
.cmd-bg.open { display: flex; }
@keyframes cmdFadeIn { from { opacity: 0; } to { opacity: 1; } }

.cmd {
  width: 100%;
  max-width: 640px;
  background: var(--bg-1);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3), 0 0 80px var(--acc-glow);
  overflow: hidden;
  animation: cmdSlideIn var(--d-3) var(--e-spring);
}
@keyframes cmdSlideIn {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cmd__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.cmd__input-wrap i { color: var(--fg-3); font-size: 15px; }
.cmd__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font-size: 16px;
  font-weight: 500;
}
.cmd__input::placeholder { color: var(--fg-3); }
.cmd__esc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
}
.cmd__list {
  max-height: 50vh;
  overflow-y: auto;
  padding: var(--s-2);
}
.cmd__sec-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: var(--s-3) var(--s-3) var(--s-2);
}
.cmd__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: 13.5px;
  cursor: pointer;
  transition: all var(--d-1);
}
.cmd__item:hover, .cmd__item.sel {
  background: var(--acc-soft);
  color: var(--fg);
}
.cmd__item-ico {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-2);
  font-size: 12px;
}
.cmd__item.sel .cmd__item-ico { color: var(--acc); background: var(--acc-soft); }
.cmd__item-label { flex: 1; }
.cmd__item-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.cmd__foot {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-size: 11px;
  color: var(--fg-3);
}
.cmd__foot kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-2);
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTENT
   ═══════════════════════════════════════════════════════════════════════ */
.content {
  padding: var(--s-6) var(--s-8) var(--s-7);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.ph {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
}
.ph__text { flex: 1; min-width: 280px; }
.ph__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--acc-soft);
  border: 1px solid var(--line-acc);
  color: var(--acc);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--s-3);
}
.ph__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--acc);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--acc);
  animation: pulse 2s infinite;
}
.ph__title {
  font-size: 36px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.ph__sub {
  font-size: 14.5px;
  color: var(--fg-3);
  margin-top: var(--s-2);
  max-width: 640px;
  line-height: 1.55;
}
.ph__actions { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

/* ═══ BUTTONS ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--d-1) var(--e-out);
  white-space: nowrap;
  user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn--pri {
  background: var(--grad-acc);
  color: #fff;
  box-shadow: 0 4px 14px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--pri:hover { box-shadow: 0 8px 22px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.25); }

.btn--sec {
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--fg);
}
.btn--sec:hover { background: var(--bg-3); border-color: var(--line-strong); }

.btn--ghost { color: var(--fg-2); }
.btn--ghost:hover { background: var(--bg-2); color: var(--fg); }

.btn--danger {
  background: rgba(248,113,113,.1);
  color: var(--err);
  border-color: rgba(248,113,113,.3);
}
.btn--danger:hover { background: rgba(248,113,113,.18); }

.btn--lg { height: 44px; padding: 0 20px; font-size: 14px; border-radius: var(--r); }
.btn--sm { height: 30px; padding: 0 12px; font-size: 12px; }

.icon-btn {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--fg-2);
  border: 1px solid var(--line);
  background: var(--bg-1);
  transition: all var(--d-1);
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--bg-2);
  border-color: var(--line-strong);
  color: var(--fg);
}

/* ═══ BENTO ═══════════════════════════════════════════════════════════ */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4);
  width: 100%;
  margin-bottom: var(--s-6);
}
.bento > * { min-width: 0; }
.c-3  { grid-column: span 3; }
.c-4  { grid-column: span 4; }
.c-5  { grid-column: span 5; }
.c-6  { grid-column: span 6; }
.c-7  { grid-column: span 7; }
.c-8  { grid-column: span 8; }
.c-9  { grid-column: span 9; }
.c-12 { grid-column: span 12; }

/* ═══ CARDS ═══════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative;
  transition: all var(--d-2) var(--e-out);
  box-shadow: var(--sh-1);
}
.card:hover { border-color: var(--line-strong); }

.card--accent {
  position: relative;
  overflow: hidden;
}
.card--accent::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, var(--acc-soft), transparent 60%);
  pointer-events: none;
}
.card--accent > * { position: relative; z-index: 1; }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
  gap: var(--s-3);
}
.card__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.card__title-dot {
  width: 6px; height: 6px;
  background: var(--acc);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--acc);
}
.card__sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }

/* ═══ METRIC TILES ═══════════════════════════════════════════════════ */
.mt {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
  transition: all var(--d-2) var(--e-out);
  box-shadow: var(--sh-1);
}
.mt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mt-x, 100%) var(--mt-y, 0%), var(--acc-soft), transparent 60%);
  pointer-events: none;
}
.mt:hover {
  transform: translateY(-2px);
  border-color: var(--line-acc);
  box-shadow: var(--sh-2), 0 16px 40px var(--acc-glow);
}
.mt > * { position: relative; z-index: 1; }
.mt__ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--acc-soft);
  border: 1px solid var(--line-acc);
  color: var(--acc-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: var(--s-3);
}
.mt__ico--cyan  { background: var(--acc-soft); border-color: var(--line-acc); color: var(--acc-icon); }
.mt__ico--gold  { background: var(--acc-soft); border-color: var(--line-acc); color: var(--acc-icon); }
.mt__ico--pink  { background: var(--acc-soft); border-color: var(--line-acc); color: var(--acc-icon); }
.mt__ico--blue  { background: var(--acc-soft); border-color: var(--line-acc); color: var(--acc-icon); }
.mt__ico--warm  { background: var(--acc-soft); border-color: var(--line-acc); color: var(--acc-icon); }

.mt__label {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.mt__value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 6px;
  color: var(--fg);
}
.mt__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
}
.mt__delta--up { background: rgba(52,211,153,.1); color: var(--ok); }
.mt__delta--down { background: rgba(248,113,113,.1); color: var(--err); }
.mt__sub {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: var(--s-2);
}

/* ═══ INPUTS ═══════════════════════════════════════════════════════════ */
.input, .select, .textarea {
  width: 100%;
  height: 40px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0 14px;
  color: var(--fg);
  font-size: 14px;
  transition: all var(--d-1);
}
.textarea { padding: 12px 14px; height: auto; min-height: 100px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--line-acc);
  background: var(--acc-soft);
  box-shadow: 0 0 0 4px rgba(74,118,74,.08);
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-4); }
.label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ═══ TAGS ═══════════════════════════════════════════════════════════ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
}
.tag--acc { background: var(--acc-soft); border-color: var(--line-acc); color: var(--acc); }
.tag--ok { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.22); color: var(--ok); }
.tag--err { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.22); color: var(--err); }
.tag--warn { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.22); color: var(--warn); }

/* ═══════════════════════════════════════════════════════════════════════
   TOAST SYSTEM — premium stackable glass notifications
   ═══════════════════════════════════════════════════════════════════════ */

.toast-stack {
  position: fixed;
  top: calc(var(--top-h) + 16px + var(--safe-t));
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}
@media (max-width: 767px) {
  .toast-stack {
    top: calc(var(--top-h) + 12px + var(--safe-t));
    right: 12px;
    left: 12px;
    max-width: none;
  }
}

.toast {
  pointer-events: auto;
  position: relative;
  width: 380px;
  max-width: 100%;
  background: rgba(17, 20, 30, .92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 14px;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.45;
  transform: translateX(420px);
  opacity: 0;
  animation: toast-in .5s var(--e-spring) forwards;
  transition: transform .25s var(--e-out), box-shadow .25s, opacity .25s;
  box-shadow: 0 10px 30px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.16);
}
html[data-theme="light"] .toast {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(15,17,28,.08);
  box-shadow: 0 10px 30px rgba(15,17,28,.1), 0 2px 6px rgba(15,17,28,.04);
}
@keyframes toast-in {
  0%   { transform: translateX(420px); opacity: 0; }
  100% { transform: translateX(0);     opacity: 1; }
}
@media (max-width: 767px) {
  .toast { transform: translateY(-20px); }
  @keyframes toast-in {
    0%   { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
  }
}
.toast.is-leaving { animation: toast-out .3s var(--e-out) forwards; }
@keyframes toast-out {
  0%   { transform: translateX(0)     scale(1);   opacity: 1; }
  100% { transform: translateX(420px) scale(.96); opacity: 0; }
}
@media (max-width: 767px) {
  .toast.is-leaving { animation: toast-out-m .3s var(--e-out) forwards; }
  @keyframes toast-out-m {
    0%   { transform: translateY(0)     scale(1);   opacity: 1; }
    100% { transform: translateY(-20px) scale(.96); opacity: 0; }
  }
}

/* Icon — small, subtle (no glow halo) */
.toast__icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acc-soft);
  color: var(--acc);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.toast__icon i { animation: toast-ico-pop .35s var(--e-spring) .05s backwards; }
@keyframes toast-ico-pop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Avatar variant — replaces icon */
.toast__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--fg);
  font-size: 14px;
}
.toast__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Body — title + message */
.toast__body { flex: 1; min-width: 0; padding-top: 1px; }
.toast__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 3px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.toast__msg {
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.toast--no-title .toast__title { display: none; }
.toast--no-title .toast__msg { color: var(--fg); font-weight: 500; }

/* Actions row — horizontal (Accept / Decline štýl) */
.toast__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.toast__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--d-1) var(--e-out);
  border: 1px solid transparent;
  white-space: nowrap;
}
.toast__btn--pri {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 2px 6px rgba(74,118,74,.25);
}
.toast__btn--pri:hover {
  background: var(--acc-d);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(74,118,74,.35);
}
.toast__btn--sec {
  background: rgba(255,255,255,.04);
  color: var(--fg);
  border-color: rgba(255,255,255,.08);
}
html[data-theme="light"] .toast__btn--sec {
  background: rgba(15,17,28,.04);
  border-color: rgba(15,17,28,.08);
}
.toast__btn--sec:hover {
  background: rgba(255,255,255,.07);
}
html[data-theme="light"] .toast__btn--sec:hover {
  background: rgba(15,17,28,.07);
}

/* Right-side vertical actions (Reply / Don't allow style) */
.toast--side-actions {
  align-items: stretch;
  padding-right: 0;
  gap: 0;
}
.toast--side-actions .toast__body { padding: 0 12px 0 0; }
.toast--side-actions .toast__side-actions {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  margin: -14px -14px -14px 0;
}
html[data-theme="light"] .toast--side-actions .toast__side-actions {
  border-left-color: rgba(15,17,28,.06);
}
.toast--side-actions .toast__side-btn {
  padding: 0 18px;
  min-width: 80px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--d-1);
  flex: 1;
}
html[data-theme="light"] .toast--side-actions .toast__side-btn {
  border-bottom-color: rgba(15,17,28,.06);
}
.toast--side-actions .toast__side-btn:last-child { border-bottom: 0; }
.toast--side-actions .toast__side-btn:hover { background: rgba(255,255,255,.04); }
html[data-theme="light"] .toast--side-actions .toast__side-btn:hover { background: rgba(15,17,28,.04); }
.toast--side-actions .toast__side-btn--pri { color: var(--acc); }
.toast--side-actions .toast__side-btn--pri:hover { background: var(--acc-soft); }

/* Close button — small, top-right */
.toast__close {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--fg-4);
  border-radius: 5px;
  cursor: pointer;
  font-size: 10px;
  transition: all var(--d-1);
  flex-shrink: 0;
  margin-top: 2px;
}
.toast__close:hover {
  background: rgba(255,255,255,.06);
  color: var(--fg);
}
html[data-theme="light"] .toast__close:hover {
  background: rgba(15,17,28,.05);
}

/* Progress bar — hairline countdown */
.toast__progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.5px;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}
.toast__progress-bar {
  height: 100%;
  background: var(--acc);
  transform-origin: left;
  animation: toast-progress var(--toast-dur, 4s) linear forwards;
  opacity: .6;
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.toast:hover .toast__progress-bar { animation-play-state: paused; }

/* TYPE VARIANTS — len icon tint + progress bar color */

.toast--info .toast__icon         { background: var(--acc-soft); color: var(--acc); }
.toast--info .toast__progress-bar { background: var(--acc); }

.toast--ok .toast__icon           { background: rgba(34,197,94,.14); color: #22C55E; }
.toast--ok .toast__progress-bar   { background: #22C55E; }

.toast--err .toast__icon          { background: rgba(239,68,68,.14); color: #EF4444; }
.toast--err .toast__progress-bar  { background: #EF4444; }
.toast--err {
  animation: toast-in .5s var(--e-spring) forwards, toast-shake .25s var(--e-out) .5s;
}
@keyframes toast-shake {
  0%, 100% { margin-left: 0; }
  25%      { margin-left: -3px; }
  75%      { margin-left: 3px; }
}

.toast--warn .toast__icon         { background: rgba(245,158,11,.14); color: #F59E0B; }
.toast--warn .toast__progress-bar { background: #F59E0B; }

.toast--ai .toast__icon           { background: var(--acc-soft); color: var(--acc); }
.toast--ai .toast__progress-bar   { background: var(--acc); }
.toast--ai .toast__icon i { animation: toast-sparkle 2s ease-in-out infinite; }
@keyframes toast-sparkle {
  0%, 100% { transform: scale(1) rotate(0); }
  50%      { transform: scale(1.15) rotate(15deg); }
}

/* ═══ MOBILE BOTTOM NAV ═══════════════════════════════════════════════ */
.bnav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 8px 12px calc(8px + var(--safe-b));
  background: var(--bg-elev);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--line);
  gap: 4px;
}
.bnav__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: var(--r-sm);
  color: var(--fg-3);
  font-size: 10.5px;
  font-weight: 600;
  transition: all var(--d-1);
  position: relative;
}
.bnav__btn i { font-size: 18px; }
.bnav__btn.active {
  color: var(--acc);
  background: var(--acc-soft);
}
.bnav__btn.active::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--grad-acc);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 10px var(--acc);
}

/* ═══ SECTIONS ═══════════════════════════════════════════════════════ */
.sec { display: none; animation: fadeUp var(--d-3) var(--e-out); }
.sec.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ QUICK ACTIONS ═══════════════════════════════════════════════════ */
.qa {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--d-2) var(--e-out);
  box-shadow: var(--sh-1);
}
.qa:hover {
  transform: translateY(-2px);
  border-color: var(--line-acc);
  box-shadow: var(--sh-2), 0 12px 28px var(--acc-glow);
}
.qa__ico {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.qa__title { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.qa__sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }

/* ═══ ACTIVITY LIST ═══════════════════════════════════════════════════ */
.act {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  transition: all var(--d-1);
}
.act:hover { background: var(--bg-3); }
.act__ico {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  background: var(--acc-soft);
  color: var(--acc-icon);
}
.act__main { flex: 1; min-width: 0; }
.act__title { font-size: 13px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act__sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act__time { font-size: 11px; color: var(--fg-4); white-space: nowrap; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  h1 { font-size: 30px; }
  .ph__title { font-size: 30px; }
  .content { padding: var(--s-5); }
}

@media (max-width: 767px) {
  .top { padding: 0 var(--s-3); padding-top: var(--safe-t); height: calc(var(--top-h) + var(--safe-t)); gap: var(--s-2); }
  .top__crumbs { display: none; }
  .top__search { display: none; }
  .top__ai span:not(.top__ai-kbd) { display: none; }
  .top__ai-kbd { display: none; }
  .top__ai { width: 38px; padding: 0; justify-content: center; }
  .switch { font-size: 12px; }
  .content { padding: var(--s-4); padding-bottom: calc(var(--bot-h) + var(--safe-b) + var(--s-4)); }
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-3); }
  .c-3, .c-4 { grid-column: span 1; }
  .c-5, .c-6, .c-7, .c-8, .c-9, .c-12 { grid-column: span 2; }
  .bnav { display: flex; }
  .side { width: 88vw; max-width: 340px; }
  .ph__title { font-size: 26px; }
  .mt__value { font-size: 28px; }
}

@media (max-width: 480px) {
  .bento { grid-template-columns: 1fr; }
  .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-12 { grid-column: span 1; }
}

/* ═══ UTILITIES ═══════════════════════════════════════════════════════ */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--line);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.text-xs { font-size: 11.5px; } .text-sm { font-size: 12.5px; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.no-scroll { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════
   LOGO SWAP (dark/light auto-switch based on theme)
   ═══════════════════════════════════════════════════════════════════════ */
.top__logo-img,
.side__brand-img {
  height: 30px;
  width: auto;
  display: none;
  object-fit: contain;
}
.side__brand-img { height: 36px; }

/* Dark theme → použi LIGHT logo (white version) */
html[data-theme="dark"] .top__logo-img--dark,
html[data-theme="dark"] .side__brand-img--dark { display: block; }

/* Light theme → použi DARK logo (čierna verzia) */
html[data-theme="light"] .top__logo-img--light,
html[data-theme="light"] .side__brand-img--light { display: block; }

/* Fallback ak chýba theme atribút */
html:not([data-theme]) .top__logo-img--dark,
html:not([data-theme]) .side__brand-img--dark { display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   SHADOW CLEANUP — tlmené tiene, žiadne drop shadow effects
   ═══════════════════════════════════════════════════════════════════════ */

/* Cards bez box-shadow — len border definuje hĺbku */
.card { box-shadow: none !important; }
.mt   { box-shadow: none !important; }
.qa   { box-shadow: none !important; }
.act  { box-shadow: none !important; }

/* Hover state — len subtle border change, žiadny shadow */
.mt:hover {
  box-shadow: none !important;
  transform: translateY(-1px);
}
.qa:hover {
  box-shadow: none !important;
  transform: translateY(-1px);
}

/* Primary button — len subtle glow, žiadny veľký shadow */
.btn--pri {
  box-shadow: 0 2px 8px rgba(74,118,74,.22), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.btn--pri:hover {
  box-shadow: 0 4px 14px rgba(74,118,74,.32), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* Top AI button */
.top__ai {
  box-shadow: 0 2px 8px rgba(74,118,74,.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.top__ai:hover {
  box-shadow: 0 4px 14px rgba(74,118,74,.32), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Logo mark — bez glow halo */
.top__logo-mark {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.side__brand-mark { display: none !important; }  /* nahradené img logom */
.side__brand-mark::after { display: none !important; }

/* Active sidebar item — tlmené */
.side__item.active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.side__item.active::before {
  box-shadow: none !important;
}

/* Toast — jemnejší */
/* (#toast removed — replaced by .toast-stack system) */

/* Modal */
.cmd { box-shadow: 0 24px 48px rgba(11,13,20,.4) !important; }

/* Side panel */
.side { box-shadow: 0 0 32px rgba(11,13,20,.3) !important; }

/* Login card — tlmený */
.login__card {
  box-shadow:
    0 16px 40px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.login__brand {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.login__brand::after { display: none !important; }
.login__submit {
  box-shadow: 0 4px 14px rgba(74,118,74,.28), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.login__submit:hover {
  box-shadow: 0 6px 18px rgba(74,118,74,.38), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR REFINEMENTS — menšie, kompaktnejšie
   ═══════════════════════════════════════════════════════════════════════ */

/* Brand header tighter */
.side__head { padding: 18px 20px 14px !important; }
.side__brand-img { height: 32px !important; }

/* Quick actions — menšie, jemnejšie */
.side__quick {
  padding: 0 16px 14px !important;
  gap: 6px !important;
}
.side__quick-btn {
  padding: 8px 4px !important;
  font-size: 10px !important;
  border-radius: 10px !important;
  gap: 3px !important;
}
.side__quick-btn i {
  font-size: 13px !important;
  color: var(--fg-2) !important;
}
.side__quick-btn:hover i { color: var(--acc) !important; }
.side__quick-btn:hover { transform: none !important; }

/* Search */
.side__search {
  margin: 0 16px 12px !important;
  height: 36px !important;
}
.side__search input { font-size: 12.5px !important; }

/* Body padding tighter */
.side__body { padding: 0 12px var(--s-3) !important; }

/* Group label tighter */
.side__group-label {
  padding: 10px 12px 6px !important;
  font-size: 10px !important;
}
.side__group { margin-bottom: 8px !important; }

/* Items tighter */
.side__item {
  padding: 8px 12px !important;
  font-size: 13px !important;
  margin: 0 !important;
  border-radius: 8px !important;
}
.side__item.active::before { display: none !important; }
.side__item-ico {
  width: 18px !important;
  height: 18px !important;
  font-size: 13px !important;
}
.side__item-kbd {
  font-size: 9.5px !important;
  padding: 1px 4px !important;
}
.side__item-badge {
  font-size: 9.5px !important;
  padding: 1px 6px !important;
  min-width: 16px !important;
}

/* Footer */
.side__foot { padding: 12px 16px !important; }
.side__status {
  padding: 6px 10px !important;
  font-size: 11px !important;
  margin-bottom: 10px !important;
}
.side__user { padding: 10px !important; }
.side__user-ava { width: 34px !important; height: 34px !important; font-size: 13px !important; }
.side__user-name { font-size: 12.5px !important; }
.side__user-role { font-size: 10.5px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   PROFILE / USERS v3 — overrides pre v2 PHP markup
   ═══════════════════════════════════════════════════════════════════════ */

.profile-right { display: flex; flex-direction: column; gap: 16px; }

/* Profile hero */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.profile-ava-wrap { position: relative; cursor: pointer; }
.profile-ava {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: var(--grad-acc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 28px;
  overflow: hidden;
  border: 2px solid var(--line);
}
.profile-ava img { width: 100%; height: 100%; object-fit: cover; }
.profile-ava-edit {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 26px; height: 26px;
  background: var(--bg-2);
  border: 2px solid var(--bg-1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--acc);
  font-size: 10px;
  transition: all var(--d-1);
}
.profile-ava-wrap:hover .profile-ava-edit {
  background: var(--acc);
  color: #fff;
}
.profile-info-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.profile-info-role {
  font-size: 11px;
  color: var(--acc);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 2px 0;
}
.profile-info-email { font-size: 12.5px; color: var(--fg-3); }

/* Section titles inside cards */
.s-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

/* Form grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.form-grid > div { display: flex; flex-direction: column; }
.form-gap { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }

/* Field label override */
.flbl {
  font-size: 11px !important;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  display: block;
}

/* Input override (v2 .finp class) */
.finp {
  width: 100%;
  height: 38px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--fg);
  font-size: 13.5px;
  transition: all var(--d-1);
}
.finp:focus {
  outline: none;
  border-color: var(--line-acc);
  background: var(--acc-soft);
  box-shadow: 0 0 0 4px rgba(74,118,74,.08);
}
textarea.finp { height: auto; min-height: 90px; padding: 10px 12px; line-height: 1.5; resize: vertical; }

/* Account info rows */
.profile-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line-soft);
}
.profile-account-row:last-child { border-bottom: 0; }

/* Save buttons */
.profile-save-btn, .profile-pw-btn {
  width: 100%;
  margin-top: 6px;
  height: 40px;
}

/* Badge override */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
}
.badge.bg-purple { background: var(--acc-soft); border-color: var(--line-acc); color: var(--acc); }
.badge.bg-green { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.22); color: var(--ok); }
.badge.bg-orange { background: rgba(240,180,41,.1); border-color: rgba(240,180,41,.22); color: var(--acc-3); }
.badge.bg-blue { background: var(--acc-2-soft); border-color: rgba(74,118,74,.22); color: var(--acc-2); }
.badge.bg-red { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.22); color: var(--err); }

/* Users section table styling */
.user-grid,
.users-grid,
.tbl-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none !important;
}
.tbl-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl-wrap th {
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.tbl-wrap td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-2);
}
.tbl-wrap tr:hover td { background: var(--bg-2); }
.tbl-wrap tr:last-child td { border-bottom: 0; }
.tbl-wrap td:last-child { text-align: right; padding-right: 16px; }
.tbl-wrap th:last-child { text-align: right; padding-right: 16px; }

/* (legacy #sec-users header rules removed — nový design používa .us-shell grid) */

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.srch {
  flex: 1;
  min-width: 200px;
  height: 38px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 14px;
  color: var(--fg);
  font-size: 13px;
  outline: none;
}
.srch:focus { border-color: var(--line-acc); background: var(--acc-soft); }
.srch::placeholder { color: var(--fg-3); }

/* User card grid (if users.php uses card layout) */
.user-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  transition: all var(--d-1);
}
.user-card:hover { border-color: var(--line-acc); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN LOGO
   ═══════════════════════════════════════════════════════════════════════ */
.login__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 22px;
  height: 56px;
  animation: brand-pop .6s var(--e-spring) .15s backwards;
}
.login__logo-img {
  height: 56px;
  width: auto;
  display: none;
  object-fit: contain;
}
html[data-theme="dark"] .login__logo-img--dark { display: block; }
html[data-theme="light"] .login__logo-img--light { display: block; }
html:not([data-theme]) .login__logo-img--dark { display: block; }
/* fallback ak login.css ešte nehas brand-pop animation pri tomto selektore */
@keyframes brand-pop {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* Skry pôvodný .login__brand (písmeno P) */
.login__brand { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v2 MODALS — v3 design overrides
   (userModal, agentModal a iné používajú v2 class systém)
   ═══════════════════════════════════════════════════════════════════════ */

/* Modal backdrop */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(11,13,20,.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn var(--d-2) var(--e-out);
}
.modal-bg.open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Modal box */
.modal {
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--s-6);
  box-shadow: 0 24px 48px rgba(11,13,20,.45);
  animation: modalIn var(--d-3) var(--e-spring);
}
.modal.wide { max-width: 760px; }
.modal.glass {
  background: var(--bg-1);   /* zruš v2 glass — v3 sa rieši cez bg */
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal title */
.modal-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-5);
  color: var(--fg);
  display: flex;
  align-items: center;
}

/* Modal tabs */
.modal-tab {
  background: transparent !important;
  border: none !important;
  color: var(--fg-3) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  cursor: pointer;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  transition: all var(--d-1);
}
.modal-tab:hover { color: var(--fg-2) !important; }
.modal-tab.active {
  color: var(--acc) !important;
  border-bottom-color: var(--acc) !important;
}

/* Modal footer */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* v2 buttons → v3 design */
.btn-add, .btn-pri, .btn-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  background: var(--grad-acc);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--d-1) var(--e-out);
  box-shadow: 0 2px 8px rgba(74,118,74,.22), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-add:hover, .btn-pri:hover, .btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(74,118,74,.32), inset 0 1px 0 rgba(255,255,255,.2);
}

.btn-sec, .btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.btn-sec:hover, .btn-cancel:hover {
  background: var(--bg-3);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.btn-danger {
  background: rgba(248,113,113,.1) !important;
  color: var(--err) !important;
  border: 1px solid rgba(248,113,113,.3) !important;
}
.btn-danger:hover { background: rgba(248,113,113,.18) !important; }

/* Users table icon buttons */
.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  transition: all var(--d-1);
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--bg-3);
  border-color: var(--line-strong);
  color: var(--fg);
}

/* Form helpers v v2 modáloch */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.form-grid > .form-full { grid-column: 1 / -1; }
.form-row {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.form-row > .form-col { flex: 1; }

/* Permission matrix grid (užívateľské práva) */
.perm-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  font-size: 12.5px;
}
.perm-row label {
  flex: 1;
  cursor: pointer;
  font-weight: 500;
  color: var(--fg-2);
}
.perm-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--acc);
  cursor: pointer;
}

/* Status pill (active/inactive user) */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-pill.active   { background: rgba(52,211,153,.1); color: var(--ok); border: 1px solid rgba(52,211,153,.22); }
.status-pill.inactive { background: rgba(248,113,113,.1); color: var(--err); border: 1px solid rgba(248,113,113,.22); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--fg-3);
}
.empty-state i { font-size: 32px; color: var(--fg-4); margin-bottom: 10px; display: block; }

/* Loading spinner row */
.action-loading {
  text-align: center;
  padding: 30px;
  color: var(--fg-3);
  font-size: 13px;
}
.action-loading i { margin-right: 8px; color: var(--acc); }

/* (legacy #sec-users .pg-title / .topbar removed) */

/* ═══════════════════════════════════════════════════════════════════════
   v2 USERS TABLE HELPERS — .ava, .tbl-act, .tbl-btn, badge variants
   ═══════════════════════════════════════════════════════════════════════ */

/* Avatar in tables/lists */
.ava {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--grad-acc);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  flex-shrink: 0;
}
.ava img { width: 100%; height: 100%; object-fit: cover; }

/* Table action buttons */
.tbl-act {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.tbl-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--d-1);
}
.tbl-btn:hover {
  background: var(--bg-3);
  border-color: var(--line-strong);
  color: var(--fg);
}
.tbl-btn.tbl-edit:hover { color: var(--acc); border-color: var(--line-acc); }
.tbl-btn.tbl-del:hover  { color: var(--err); border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); }

/* Badge color variants (v2 system) */
.badge.bg-red    { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.22); color: var(--err); }
.badge.bg-blue   { background: var(--acc-2-soft); border-color: rgba(74,118,74,.22); color: var(--acc-2); }
.badge.bg-green  { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.22); color: var(--ok); }
.badge.bg-yellow { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.22); color: var(--warn); }
.badge.bg-gray   { background: var(--bg-2); border-color: var(--line); color: var(--fg-2); }

/* Old v2 text colors → v3 mapping */
:root,
html[data-theme="dark"] {
  --text:  var(--fg);
  --text2: var(--fg-2);
  --text3: var(--fg-3);
  --text4: var(--fg-4);
  --border: var(--line);
  --surface: var(--bg-1);
  --surface2: var(--bg-2);
  --a1: var(--acc);
  --a2: var(--acc-2);
  --a3: var(--acc-3);
  --hover: var(--bg-2);
}
html[data-theme="light"] {
  --text:  var(--fg);
  --text2: var(--fg-2);
  --text3: var(--fg-3);
  --text4: var(--fg-4);
  --border: var(--line);
  --surface: var(--bg-1);
  --surface2: var(--bg-2);
  --a1: var(--acc);
  --a2: var(--acc-2);
  --a3: var(--acc-3);
  --hover: var(--bg-2);
}

/* Glass card override (v2 .glass class) */
.glass {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* Card alias */
.card.glass { background: var(--bg-1); }

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR v2 — Collapsible groups, pin system, smart search
   Prepíše predchádzajúce sidebar pravidlá pomocou !important.
   ═══════════════════════════════════════════════════════════════════════ */

#sidebar, .side {
  width: 308px !important;
}
@media (max-width: 767px) {
  #sidebar, .side { width: 88vw !important; max-width: 340px !important; }
}

/* HEAD — compact brand + close */
.side__head {
  padding: 16px 18px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0;
}

/* SEARCH wrap */
.side__search-wrap {
  padding: 0 16px 12px !important;
}
.side__search {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  height: 38px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  transition: all var(--d-1);
  margin: 0 !important;
}
.side__search:focus-within {
  border-color: var(--line-acc);
  background: var(--acc-soft);
  box-shadow: 0 0 0 3px rgba(74,118,74,.06);
}
.side__search i:first-child { color: var(--fg-3); font-size: 12px; }
.side__search input {
  flex: 1;
  background: transparent !important;
  border: 0 !important;
  outline: none;
  color: var(--fg);
  font-size: 12.5px !important;
  min-width: 0;
}
.side__search input::placeholder { color: var(--fg-3); }
.side__search-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-3);
  background: var(--bg-1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* BODY */
.side__body {
  padding: 4px 10px 12px !important;
  overflow-y: auto;
  flex: 1;
}

/* GROUPS — collapsible */
.side__group {
  margin-bottom: 2px !important;
}
.side__group-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: var(--fg-3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  transition: all var(--d-1) var(--e-out);
}
.side__group-head:hover {
  background: var(--bg-2);
  color: var(--fg-2);
}
.side__group-ico {
  font-size: 11px;
  color: var(--fg-4);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  transition: color var(--d-1);
}
.side__group-head:hover .side__group-ico { color: var(--acc); }
.side__group-label {
  flex: 1;
  text-align: left;
  min-width: 0;
}
.side__group-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--fg-4);
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.side__group-chev {
  font-size: 9px;
  color: var(--fg-4);
  transition: transform var(--d-2) var(--e-out);
  margin-left: 4px;
}
.side__group.is-collapsed .side__group-chev {
  transform: rotate(-90deg);
}
.side__group-body {
  overflow: hidden;
  transition: max-height var(--d-3) var(--e-out), opacity var(--d-2);
  padding: 2px 0 6px;
}
.side__group.is-collapsed .side__group-body {
  max-height: 0 !important;
  opacity: 0;
  padding: 0;
}

/* ITEMS — refined */
.side__item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: var(--fg-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--d-1) var(--e-out) !important;
  position: relative !important;
  border: 1px solid transparent !important;
  margin: 0 !important;
  background: transparent !important;
}
.side__item-ico {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--fg-3) !important;
  font-size: 13px !important;
  flex-shrink: 0;
  transition: color var(--d-1);
}
.side__item-label {
  flex: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.side__item-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px !important;
  color: var(--fg-4) !important;
  background: var(--bg-2) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  border: 1px solid var(--line);
  font-weight: 600;
  flex-shrink: 0;
  opacity: .8;
}
.side__item-badge {
  background: var(--acc) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 9.5px !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  min-width: 17px !important;
  text-align: center;
  flex-shrink: 0;
}
.side__item:hover {
  background: var(--bg-2) !important;
  color: var(--fg) !important;
}
.side__item:hover .side__item-ico { color: var(--acc-icon) !important; }
.side__item.active {
  background: var(--acc-soft) !important;
  color: var(--fg) !important;
  border-color: var(--line-acc) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.side__item.active .side__item-ico { color: var(--acc-icon) !important; }
.side__item.active::before { display: none !important; }

/* PIN button — visible on hover or when pinned */
.side__pin {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 5px !important;
  color: var(--fg-4) !important;
  font-size: 10px !important;
  cursor: pointer !important;
  opacity: 0;
  transition: all var(--d-1);
  flex-shrink: 0;
}
.side__item:hover .side__pin { opacity: .7; }
.side__pin:hover {
  background: var(--bg-3) !important;
  color: var(--acc) !important;
  opacity: 1 !important;
}
.side__pin.is-pinned {
  opacity: 1 !important;
  color: var(--acc) !important;
}
.side__pin.is-pinned i { font-weight: 900; }

/* PINNED + RECENT — special styling */
.side__group[data-group="pinned"] .side__group-ico,
.side__group[data-group="recent"] .side__group-ico {
  color: var(--acc);
}
.side__group[data-group="pinned"] .side__item-ico,
.side__group[data-group="recent"] .side__item-ico {
  color: var(--acc-d);
  opacity: .85;
}

/* Empty state */
#sideEmpty {
  text-align: center !important;
  padding: 30px 20px !important;
  color: var(--fg-3) !important;
  font-size: 12.5px !important;
}
#sideEmpty i {
  font-size: 24px;
  color: var(--fg-4);
  margin-bottom: 10px;
  display: block;
}
#sideEmpty small {
  display: block;
  margin-top: 6px;
  color: var(--fg-4);
  font-size: 11px;
}

/* FOOTER — sticky bottom */
.side__foot {
  padding: 12px 16px !important;
  border-top: 1px solid var(--line) !important;
  background: var(--bg) !important;
  flex-shrink: 0;
}
.side__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px !important;
  background: rgba(52,211,153,.06);
  border: 1px solid rgba(52,211,153,.2);
  border-radius: 6px;
  color: var(--ok);
  font-size: 10.5px !important;
  font-weight: 600;
  margin-bottom: 10px !important;
}
.side__status-dot {
  width: 6px; height: 6px;
  background: var(--ok);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--ok);
}
.side__user {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all var(--d-1);
}
.side__user:hover { border-color: var(--line-acc) !important; }
.side__user-ava {
  width: 32px !important; height: 32px !important;
  border-radius: 8px !important;
  background: var(--grad-acc) !important;
  color: #fff;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700;
  font-size: 12px !important;
  overflow: hidden;
  flex-shrink: 0;
}
.side__user-ava img { width: 100%; height: 100%; object-fit: cover; }
.side__user-body { flex: 1; min-width: 0; }
.side__user-name {
  font-size: 12px !important;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side__user-role {
  font-size: 10.5px !important;
  color: var(--fg-3);
}
.side__user-out {
  width: 28px !important; height: 28px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--fg-3);
  transition: all var(--d-1);
}
.side__user-out:hover {
  background: rgba(248,113,113,.1);
  color: var(--err);
}

/* Pinned/Recent items — slightly different visual */
.side__item--pin .side__item-ico,
.side__item--recent .side__item-ico {
  position: relative;
}
.side__item--pin::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 4px; height: 4px;
  background: var(--acc);
  border-radius: 50%;
  opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════════════
   SEGMENTED TABS (used in Integrations + Activity scope switcher)
   ═══════════════════════════════════════════════════════════════════════ */
.seg-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.seg-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1) var(--e-out);
  white-space: nowrap;
}
.seg-tab i { font-size: 12px; }
.seg-tab:hover { color: var(--fg-2); background: var(--bg-3); }
.seg-tab.active {
  background: var(--bg-1);
  color: var(--fg);
  box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 0 0 1px var(--line);
}
.seg-tab.active i { color: var(--acc); }
.seg-tab-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-4);
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0;
}
.seg-tab.active .seg-tab-count { color: var(--acc); background: var(--acc-soft); }

/* ═══════════════════════════════════════════════════════════════════════
   INTEGRATIONS panels — wrap pre connections/apikeys obsah
   ═══════════════════════════════════════════════════════════════════════ */
.int-panel { animation: fadeUp var(--d-3) var(--e-out); }

/* Connection cards (v2 .conn-grid + .conn-card) v3 redesign */
.conn-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.conn-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  position: relative;
  transition: all var(--d-2) var(--e-out);
}
.conn-card:hover { border-color: var(--line-strong) !important; }
.conn-card.glass { background: var(--bg-1) !important; }
.conn-name { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.conn-desc { font-size: 12px; color: var(--fg-3); line-height: 1.5; margin-bottom: 8px; }
.conn-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.conn-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 4px;
}
.conn-status.connected,
.conn-status.ok { background: rgba(52,211,153,.1); color: var(--ok); border: 1px solid rgba(52,211,153,.22); }
.conn-status.disconnected,
.conn-status.error { background: rgba(248,113,113,.1); color: var(--err); border: 1px solid rgba(248,113,113,.22); }
.conn-status.untested { background: var(--bg-2); color: var(--fg-3); border: 1px solid var(--line); }
.conn-info-btn {
  position: absolute;
  top: 14px; right: 14px;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--d-1);
}
.conn-info-btn:hover { background: var(--bg-3); color: var(--acc); }

/* API cards (v2 .api-card) v3 redesign */
.api-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  margin-bottom: 12px;
  transition: all var(--d-1);
}
.api-card.glass { background: var(--bg-1) !important; }
.api-card:hover { border-color: var(--line-strong) !important; }
.api-provider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.api-prov-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.api-prov-name { font-size: 14px; font-weight: 600; color: var(--fg); }
.api-prov-url { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.api-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  margin-left: auto;
}
.api-status.ok       { background: rgba(52,211,153,.1); color: var(--ok); border: 1px solid rgba(52,211,153,.22); }
.api-status.error    { background: rgba(248,113,113,.1); color: var(--err); border: 1px solid rgba(248,113,113,.22); }
.api-status.untested { background: var(--bg-2); color: var(--fg-3); border: 1px solid var(--line); }

/* Input wrap + eye toggle (API key field) */
.inp-key-wrap {
  position: relative;
  margin-bottom: 12px;
}
.inp-key-wrap .finp {
  width: 100%;
  padding-right: 42px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.2px;
}
.key-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--d-1);
}
.key-eye:hover { color: var(--fg); background: var(--bg-2); }

/* API card action row — Save / Test / Delete buttons aligned */
.api-card > div[style*="display:flex"]:last-child,
.api-card > div[style*="flex-wrap:wrap"]:last-child {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap;
  align-items: center;
}

/* Ensure ALL buttons inside .api-card have consistent height/padding,
   especially standalone .btn-danger (delete button without other classes). */
.api-card .btn-add,
.api-card .btn-pri,
.api-card .btn-save,
.api-card .btn-sec,
.api-card .btn-cancel,
.api-card .btn-danger {
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  transition: all var(--d-1);
}
.api-card .btn-danger {
  background: rgba(248,113,113,.08) !important;
  color: var(--err) !important;
  border: 1px solid rgba(248,113,113,.28) !important;
  min-width: 36px;
}
.api-card .btn-danger:hover {
  background: rgba(248,113,113,.18) !important;
  border-color: rgba(248,113,113,.45) !important;
  transform: translateY(-1px);
}
.api-card .btn-sec {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
}
.api-card .btn-sec:hover {
  background: var(--bg-3);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

/* Mobile: stack action row + status to new line */
@media (max-width: 600px) {
  .api-provider { flex-wrap: wrap; }
  .api-status { margin-left: 0; order: 3; flex-basis: 100%; margin-top: 4px; }
  .api-card .btn-add,
  .api-card .btn-sec,
  .api-card .btn-danger { flex: 1 1 auto; }
}

/* Activity feed item override (used by activity section) */
#activityList .act-item,
#activityWrap .act-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  transition: all var(--d-1);
}
#activityList .act-item:hover,
#activityWrap .act-item:hover { background: var(--bg-3); border-color: var(--line); }
.act-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.act-body { flex: 1; min-width: 0; }
.act-desc { font-size: 13px; color: var(--fg); line-height: 1.4; }
.act-desc strong { color: var(--acc); font-weight: 600; }
.act-time { font-size: 11px; color: var(--fg-4); margin-top: 3px; }

/* Mobile: tabs stack horizontal-scroll */
@media (max-width: 600px) {
  .seg-tabs {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  .seg-tab { flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAT (konverzácie) — v3 redesign
   ═══════════════════════════════════════════════════════════════════════ */
#sec-chat { padding: 0 !important; }
#sec-chat.active { display: flex; }
.chat-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  width: 100%;
  height: calc(100vh - 64px - 24px);
  min-height: 500px;
  background: var(--bg-0);
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
}

/* LEFT — sessions */
.chat-sessions {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-sess-hdr { padding: 14px; border-bottom: 1px solid var(--line-soft); }
.chat-new-btn {
  width: 100%;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--grad-acc);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.chat-new-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.chat-sess-search {
  position: relative;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.chat-sess-search i {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  font-size: 12px;
}
.chat-sess-search input {
  width: 100%;
  height: 34px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px 0 32px;
  color: var(--fg);
  font-size: 12.5px;
  outline: none;
  transition: all var(--d-1);
}
.chat-sess-search input:focus { border-color: var(--line-acc); background: var(--bg-1); }
.chat-sess-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-4);
  padding: 12px 14px 4px;
}
.chat-sess-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.chat-sess-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--fg-4);
  font-size: 12.5px;
  text-align: center;
}
.chat-sess-empty i { font-size: 26px; margin-bottom: 8px; opacity: 0.6; }
.sess-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--d-1);
  margin-bottom: 2px;
  position: relative;
}
.sess-item:hover { background: var(--bg-2); }
.sess-item.active { background: var(--acc-soft); border: 1px solid var(--line-acc); }
.sess-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sess-meta { font-size: 10.5px; color: var(--fg-4); }
.sess-share-btn {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--fg-3);
  cursor: pointer;
  opacity: 0;
  transition: all var(--d-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sess-item:hover .sess-share-btn { opacity: 1; }
.sess-share-btn:hover { background: var(--bg-3); color: var(--fg); }

/* RIGHT — chat main */
.chat-main {
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.chat-mobile-history-btn {
  display: none;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  font-size: 12px;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* HERO empty state */
.chat-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
  min-height: 0;
}
.chat-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 32px;
}
.chat-hero-header-center { flex: 1; text-align: center; font-size: 12.5px; color: var(--fg-3); }
.chat-hero-header-center strong { color: var(--acc); font-weight: 700; }
.chat-hero-agent-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  cursor: pointer;
  transition: all var(--d-1);
}
.chat-hero-agent-pill:hover { border-color: var(--line-strong); background: var(--bg-2); }
.chap-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
.chap-info { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.chap-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.chap-powered { font-size: 10.5px; color: var(--fg-4); }
.chap-arrow { font-size: 10px; color: var(--fg-3); margin-left: 4px; }

.chat-hero-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.chat-hero-title-wrap { flex: 1; }
.chat-hero-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.chat-hero-title-pri { color: var(--fg); }
.chat-hero-title-sec { color: var(--fg-3); font-weight: 500; }
.chat-hero-mascot { position: relative; flex-shrink: 0; }
.chat-hero-bubble {
  position: absolute;
  right: 100%;
  bottom: 24px;
  margin-right: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--fg-2);
  white-space: nowrap;
}
.chat-hero-robot {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  background: var(--grad-acc);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  box-shadow: 0 8px 24px rgba(238,29,36,.25);
}
.bubble-wave { display: inline-block; animation: wave 2.2s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-8deg); } 75% { transform: rotate(10deg); } }

/* 3 prompt cards */
.chat-prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.chat-prompt-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: all var(--d-1);
}
.chat-prompt-card:hover { border-color: var(--line-acc); transform: translateY(-2px); background: var(--bg-1); }
.chat-prompt-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 10px;
  color: #fff;
}
.chat-prompt-card-icon.icon-orange { background: linear-gradient(135deg,#f59e0b,#ea580c); }
.chat-prompt-card-icon.icon-multi  { background: linear-gradient(135deg,#8b5cf6,#ec4899); }
.chat-prompt-card-icon.icon-blue   { background: linear-gradient(135deg,#0ea5e9,#6366f1); }
.chat-prompt-card-title { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.chat-prompt-card-desc { font-size: 12px; color: var(--fg-3); line-height: 1.4; margin-bottom: 10px; }
.chat-prompt-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--acc);
  background: var(--acc-soft);
  padding: 3px 8px;
  border-radius: 999px;
}

/* Composer */
.chat-hero-composer-wrap { margin-top: auto; }
.chat-hero-meta-row { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.chat-hero-meta-badge {
  font-size: 10.5px;
  color: var(--fg-4);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chat-composer {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
  transition: all var(--d-1);
}
.chat-composer:focus-within { border-color: var(--line-acc); background: var(--bg-1); box-shadow: 0 0 0 3px var(--acc-soft); }
.chat-hero-input-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-plus-wrap { position: relative; }
.chat-plus-btn, .chat-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: all var(--d-1);
}
.chat-plus-btn:hover, .chat-icon-btn:hover { background: var(--bg-3); color: var(--fg); border-color: var(--line-strong); }
.chat-plus-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  min-width: 200px;
  z-index: 30;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.chat-plus-menu.open { display: block; }
.chat-plus-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  color: var(--fg);
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.chat-plus-menu button:hover { background: var(--bg-2); }
.chat-composer-input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--fg);
  font-size: 14px;
  resize: none;
  outline: none;
  padding: 8px 4px;
  min-height: 34px;
  max-height: 200px;
  line-height: 1.4;
  font-family: inherit;
}
.chat-composer-input::placeholder { color: var(--fg-4); }
.chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--grad-acc);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: all var(--d-1);
}
.chat-send-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.chat-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 4px 2px;
}
.chat-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--d-1);
}
.chat-hero-chip:hover { background: var(--bg-3); border-color: var(--line-strong); color: var(--fg); }
.chat-hero-chip.chip-more { width: 30px; padding: 0; justify-content: center; }

/* Attachments list */
.chat-att-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.chat-att-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11.5px;
  color: var(--fg-2);
}
.chat-att-thumb {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHAT — Active conversation view (minimalistický v3 redesign)
   Staré .chat-msg/.chat-bubble triedy boli nezhodné s tým, čo JS emituje
   (.msg / .msg-avatar / .msg-text-bubble / .msg-assistant-content).
   Tu staviame na čistom JS-class namespacingu.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header bar — slim a tichý ─────────────────────────── */
.chat-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
  flex-shrink: 0;
  min-height: 56px;
}
.chat-hdr-history-btn {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all var(--d-1);
}
.chat-hdr-history-btn:hover { background: var(--bg-2); color: var(--fg); }
.chat-hdr-avatar {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.chat-hdr-info { flex: 1; min-width: 0; }
.chat-hdr-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.005em;
}
.chat-hdr-name .dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.chat-hdr-meta {
  font-size: 11px;
  color: var(--fg-4);
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chat-hdr-model-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  background: var(--bg-2);
  color: var(--fg-3);
  padding: 2px 8px;
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
}
.chat-hdr-actions { display: inline-flex; gap: 4px; }
.chat-hdr-btn {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  transition: all var(--d-1);
}
.chat-hdr-btn:hover { background: var(--bg-2); color: var(--fg); }
.chat-hdr-btn.danger:hover { background: rgba(248,113,113,.10); color: var(--err); }

/* ── Messages container — centered, max-width 760 (ChatGPT-like) ─ */
.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 28px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-behavior: smooth;
}
.chat-msgs > * { max-width: 760px; width: 100%; margin-left: auto; margin-right: auto; }
.chat-msgs::-webkit-scrollbar { width: 6px; }
.chat-msgs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* ── Message wrapper ─────────────────────────────────── */
.msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.msg.user { justify-content: flex-end; }

/* User message — right-aligned olive bubble */
.msg.user .msg-text-bubble {
  background: var(--acc-soft);
  border: 1px solid var(--line-acc);
  color: var(--acc);
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  font-size: 14px;
  line-height: 1.55;
  max-width: 78%;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-weight: 500;
}
[data-theme="dark"] .msg.user .msg-text-bubble { color: #c5e0c5; }
.msg.user .msg-time {
  font-size: 10.5px;
  color: var(--fg-4);
  margin-top: 4px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}

/* Assistant message — no bubble, just avatar + flowing text */
.msg.assistant { align-items: flex-start; }
.msg-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}
.msg-content-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg-assistant-content {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg);
  word-wrap: break-word;
  white-space: pre-wrap;
}
.msg-assistant-content p,
.msg-assistant-content ul,
.msg-assistant-content ol,
.msg-assistant-content pre { margin: 0 0 10px; }
.msg-assistant-content p:last-child,
.msg-assistant-content ul:last-child,
.msg-assistant-content ol:last-child { margin-bottom: 0; }
.msg-assistant-content ul, .msg-assistant-content ol { padding-left: 22px; }
.msg-assistant-content li { margin-bottom: 4px; line-height: 1.6; }
.msg-assistant-content strong { color: var(--fg); font-weight: 700; }
.msg-assistant-content code {
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--acc);
}
.msg-assistant-content pre {
  background: var(--bg-0);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.5;
}
.msg-assistant-content pre code {
  background: transparent;
  padding: 0;
  color: var(--fg-2);
}
.msg-assistant-content a {
  color: var(--acc);
  text-decoration: underline;
  text-decoration-color: rgba(74,118,74,.40);
  text-underline-offset: 2px;
}
.msg-assistant-content a:hover { text-decoration-color: var(--acc); }
.msg-assistant-content h1, .msg-assistant-content h2, .msg-assistant-content h3 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-weight: 700;
  margin: 14px 0 8px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.msg-assistant-content h1 { font-size: 18px; }
.msg-assistant-content h2 { font-size: 16px; }
.msg-assistant-content h3 { font-size: 14.5px; }

/* Time/model footer */
.msg-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--fg-4);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.01em;
}
.msg-time-badge {
  background: var(--bg-2);
  color: var(--fg-3);
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 10px;
  letter-spacing: -0.01em;
}

/* Action buttons — only on hover */
.msg-actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--d-1);
  margin-top: 2px;
}
.msg.assistant:hover .msg-actions { opacity: 1; }
.msg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--fg-4);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.msg-action-btn:hover { background: var(--bg-2); color: var(--fg); }
.msg-action-btn i { font-size: 11px; }

/* Thinking indicator */
.msg.thinking { align-items: flex-start; }
.thinking-bubble {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--fg-3);
}
.thinking-dots { display: inline-flex; gap: 3px; }
.thinking-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acc);
  animation: thinkDot 1.4s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.18s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes thinkDot {
  0%, 60%, 100% { opacity: 0.2; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Attachments inside messages */
.msg-att-img {
  max-width: 280px;
  max-height: 280px;
  border-radius: 10px;
  display: block;
  margin: 6px 0;
}
.msg-att-link,
.msg-att-file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  font-size: 12.5px;
  color: var(--fg-2);
  margin: 4px 0;
}
.msg-att-link i, .msg-att-file i { color: var(--acc); }

/* ── Quick action chips above composer ────────────────── */
.chat-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 16px 8px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.chat-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.chat-quick-chip:hover { background: var(--bg-3); color: var(--fg); border-color: var(--line); }
.chat-quick-chip i { font-size: 11px; opacity: 0.8; }

/* ── Composer at bottom (active conversation) ─────────── */
.chat-composer-bottom {
  padding: 8px 16px 16px;
  background: var(--bg-1);
  border-top: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.chat-composer-bottom > .chat-composer-input,
.chat-composer-bottom .chat-composer-input {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 14.5px;
  color: var(--fg);
  font-family: inherit;
  resize: none;
  min-height: 48px;
  max-height: 200px;
  line-height: 1.5;
  outline: none;
  transition: border-color var(--d-1), box-shadow var(--d-1);
}
.chat-composer-bottom .chat-composer-input:focus {
  border-color: var(--line-acc);
  box-shadow: 0 0 0 3px rgba(74,118,74,.08);
}
.chat-composer-bottom .chat-composer-input::placeholder { color: var(--fg-4); }

.chat-composer-bottom .chat-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  max-width: 760px;
  margin: 0 auto;
}
.chat-actions-left, .chat-actions-right { display: inline-flex; gap: 6px; align-items: center; }
.chat-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.chat-pill-btn:hover { background: var(--bg-2); color: var(--fg); border-color: var(--line); }
.chat-pill-btn i { font-size: 12px; opacity: 0.85; }

/* Code / file / image cards in messages */
.chat-code-card, .chat-file-card {
  background: var(--bg-0);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 6px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
}
.chat-gen-img-wrap { position: relative; max-width: 480px; margin: 8px 0; }
.chat-gen-img { width: 100%; border-radius: 12px; display: block; }
.chat-gen-img-caption { font-size: 11.5px; color: var(--fg-3); margin-top: 4px; }
.chat-gen-img-dl {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

/* Code / file / image cards in messages */
.chat-code-card, .chat-file-card {
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin: 6px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
}
.chat-gen-img-wrap { position: relative; max-width: 480px; margin: 6px 0; }
.chat-gen-img { width: 100%; border-radius: 12px; display: block; }
.chat-gen-img-caption { font-size: 11.5px; color: var(--fg-3); margin-top: 4px; }
.chat-gen-img-dl {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

/* Empty state in opened session (no messages yet) */
.chat-empty-rich {
  margin: auto;
  text-align: center;
  padding: 40px 20px;
  max-width: 480px;
}
.chat-empty-avatar {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  margin: 0 auto 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
}
.chat-empty-name { font-size: 18px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.chat-empty-title { font-size: 14px; color: var(--fg-2); margin-bottom: 8px; }
.chat-empty-sub { font-size: 12.5px; color: var(--fg-3); line-height: 1.5; margin-bottom: 18px; }
.chat-empty-suggestions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; }
.chat-empty-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11.5px;
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--d-1);
}
.chat-empty-chip:hover { background: var(--bg-3); border-color: var(--line-acc); color: var(--fg); }
.chat-empty-footnote { font-size: 10.5px; color: var(--fg-4); }

/* Mobile chat */
@media (max-width: 900px) {
  .chat-layout { grid-template-columns: 1fr; height: calc(100vh - 64px); border-radius: 0; }
  .chat-sessions {
    position: fixed;
    inset: 64px 0 0 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--d-3) var(--e-out);
    border-right: 0;
  }
  .chat-sessions.open { transform: translateX(0); }
  .chat-mobile-history-btn { display: inline-flex; }
  .chat-hero { padding: 60px 16px 16px; }
  .chat-hero-mascot { display: none; }
  .chat-msg { max-width: 92%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MAIL — v3 Gmail-style redesign (NOVÝ DESIGN, ml-* classes)
   ═══════════════════════════════════════════════════════════════════════ */
#sec-mail { padding: 0 !important; }
#sec-mail.sec { padding: 0; }

/* Full-screen layout — robustný (position-based, nezávisí na :has() ani flex chain). */
body.app--fullsec .app__main { overflow: hidden !important; padding: 0 !important; position: relative; }
body.app--fullsec .content { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
body.app--fullsec .sec.active { animation: none !important; }
body.app--fullsec #sec-mail.active {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Modern browsers: ten istý efekt cez :has() (bez závislosti na body class) */
@supports selector(:has(*)) {
  .app__main:has(#sec-mail.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-mail.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-mail.active {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
}

.ml-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  background: var(--bg-0);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}

/* ─── SIDEBAR ────────────────────────────────────────────────────── */
.ml-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 12px 12px;
}
.ml-side::-webkit-scrollbar { width: 6px; }
.ml-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* Compose button — výrazný brand accent (zelený var(--acc)), vždy viditeľný */
.ml-side > .ml-compose,
.ml-compose {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 24px 0 18px;
  background: var(--acc) !important;
  background-image: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 80%, #000));
  border: 0;
  border-radius: 16px;
  color: #fff !important;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--d-2) var(--e-out), box-shadow var(--d-2), filter var(--d-2);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(74,118,74,.32), inset 0 1px 0 rgba(255,255,255,.20);
  position: relative;
  z-index: 5;
  text-align: left;
  font-family: inherit;
  font-family: 'Space Grotesk', Inter, sans-serif;
}
.ml-compose:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(74,118,74,.45), inset 0 1px 0 rgba(255,255,255,.22);
  filter: brightness(1.08);
}
.ml-compose:active { transform: translateY(0); }
.ml-compose-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
.ml-compose-text {
  white-space: nowrap;
  color: #fff;
}

/* Folder list */
.ml-folders {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 12px;
}
.ml-folder {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 36px;
  padding: 0 16px 0 22px;
  background: transparent;
  border: 0;
  border-radius: 0 99px 99px 0;
  color: var(--fg-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all var(--d-1);
  margin-left: -12px;
  position: relative;
}
.ml-folder:hover { background: var(--bg-2); color: var(--fg); }
.ml-folder.is-active {
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 700;
}
.ml-folder.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--acc);
  border-radius: 0 3px 3px 0;
}
.ml-folder-ico {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: inherit;
  flex-shrink: 0;
}
.ml-folder.is-active .ml-folder-ico { color: var(--acc); }
.ml-folder-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-folder-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.ml-folder.is-active .ml-folder-count { color: var(--acc); }
.ml-folder-toggle { color: var(--fg-3); font-size: 12px; }
.ml-folders-more { display: flex; flex-direction: column; gap: 1px; }

/* Side section heading */
.ml-side-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  padding: 14px 8px 6px;
}

/* Labels */
.ml-labels {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 4px;
}
.ml-label {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 12px 0 22px;
  background: transparent;
  border: 0;
  border-radius: 0 99px 99px 0;
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all var(--d-1);
  margin-left: -12px;
}
.ml-label:hover { background: var(--bg-2); color: var(--fg); }
.ml-label.is-active {
  background: var(--acc-soft);
  color: var(--fg);
  font-weight: 700;
  position: relative;
}
.ml-label.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--acc);
  border-radius: 0 3px 3px 0;
}
.ml-label-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ml-label-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-label-add { color: var(--fg-3); }
.ml-label-add:hover { color: var(--acc); }
.ml-label-kebab {
  width: 22px; height: 22px;
  display: none; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--fg-3); font-size: 11px;
  flex-shrink: 0; margin-left: auto;
}
.ml-label:hover .ml-label-kebab { display: inline-flex; }
.ml-label-kebab:hover { background: var(--bg-3); color: var(--fg); }
.ml-label-dot-ico { color: var(--fg-3); font-size: 10px; width: 10px; text-align: center; }

/* Accounts */
.ml-accounts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.ml-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--d-1);
  text-align: left;
}
.ml-account:hover { background: var(--bg-2); }
.ml-account.is-default { background: var(--bg-2); border-color: var(--line); }
.ml-account-ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.ml-account-info { flex: 1; min-width: 0; }
.ml-account-mail {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-account-meta { font-size: 10.5px; color: var(--fg-4); margin-top: 1px; }
.ml-account-check { color: var(--acc); font-size: 12px; }
.ml-account:not(.is-default) .ml-account-check { display: none; }
.ml-add-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
  margin-top: 4px;
  justify-content: center;
}
.ml-add-account:hover { border-style: solid; border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }

/* Mail footer — minimalistický counter + progress bar */
.ml-foot {
  margin-top: auto;
  padding: 12px 4px 4px;
  border-top: 1px solid var(--line-soft);
}
.ml-foot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 6px;
}
.ml-foot-text {
  font-size: 11.5px;
  color: var(--fg-2);
  font-weight: 600;
  flex: 1;
}
.ml-foot-bar {
  height: 4px;
  background: var(--bg-3);
  border-radius: 99px;
  overflow: hidden;
  margin: 0 6px 6px;
}
.ml-foot-bar-fill {
  height: 100%;
  background: var(--acc);
  border-radius: 99px;
  transition: width var(--d-3) var(--e-out);
}
.ml-foot-stats {
  font-size: 10.5px;
  color: var(--fg-3);
  padding: 0 6px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}

/* ─── MAIN ───────────────────────────────────────────────────────── */
.ml-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-0);
}

/* Toolbar */
.ml-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  min-height: 56px;
}
.ml-toolbar-left,
.ml-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ml-toolbar-search {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0 8px 0 14px;
  height: 38px;
  transition: all var(--d-1);
  max-width: 640px;
  margin: 0 auto;
}
.ml-toolbar-search:focus-within {
  background: var(--bg-1);
  border-color: var(--line-acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.ml-toolbar-search > i {
  color: var(--fg-3);
  font-size: 13px;
  margin-right: 10px;
  flex-shrink: 0;
}
.ml-toolbar-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-size: 13.5px;
  height: 100%;
  font-family: inherit;
  min-width: 0;
}
.ml-toolbar-search input::placeholder { color: var(--fg-3); }
.ml-search-clear,
.ml-search-filter {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--d-1);
  flex-shrink: 0;
}
.ml-search-clear:hover,
.ml-search-filter:hover { background: var(--bg-3); color: var(--fg); }

.ml-tb-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all var(--d-1);
}
.ml-tb-btn:hover { background: var(--bg-2); color: var(--fg); }
.ml-tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

.ml-tb-check {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0 8px;
  height: 36px;
}
.ml-tb-check input { display: none; }
.ml-tb-check-box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: transparent;
  transition: all var(--d-1);
  font-size: 10px;
}
.ml-tb-check:hover .ml-tb-check-box { border-color: var(--fg-3); }
.ml-tb-check.is-checked .ml-tb-check-box,
.ml-tb-check input:checked + .ml-tb-check-box {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}

.ml-pager-info {
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  padding: 0 8px;
  white-space: nowrap;
}
.ml-pager-info strong { color: var(--fg); font-weight: 600; }

/* Inbox category tabs */
.ml-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  padding: 0 16px;
}
.ml-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all var(--d-1);
  position: relative;
}
.ml-tab:hover { color: var(--fg); background: var(--bg-2); }
.ml-tab.is-active {
  color: var(--acc);
  border-bottom-color: var(--acc);
}
.ml-tab.is-active i { color: var(--acc); }
.ml-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-4);
  margin-left: 4px;
}
.ml-tab-dot-acc { background: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }

/* Email list */
.ml-list {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-0);
}
.ml-list::-webkit-scrollbar { width: 8px; }
.ml-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

.ml-list-group {
  padding-top: 2px;
}
.ml-list-group-hdr {
  padding: 12px 18px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg-4);
  text-transform: uppercase;
}

/* Email row */
.ml-row {
  display: grid;
  grid-template-columns: 22px 28px 32px minmax(0, 1fr) auto 70px;
  align-items: center;
  gap: 10px;
  padding: 0 18px 0 14px;
  min-height: 56px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background var(--d-1), box-shadow var(--d-1);
  position: relative;
}
.ml-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background var(--d-1);
}
.ml-row:hover {
  background: var(--bg-1);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  z-index: 2;
}
.ml-row.is-unread { background: var(--bg-1); }
.ml-row.is-unread::before { background: var(--acc); }
.ml-row.is-unread .ml-row-from,
.ml-row.is-unread .ml-row-subj {
  color: var(--fg);
  font-weight: 700;
}
.ml-row.is-selected {
  background: var(--acc-soft) !important;
}
.ml-row.is-selected::before { background: var(--acc); }
.ml-row.is-bulk-selected {
  background: color-mix(in srgb, var(--acc) 12%, transparent) !important;
}
.ml-row.is-bulk-selected::before { background: var(--acc); width: 4px; }
.ml-row.is-bulk-selected .ml-row-from,
.ml-row.is-bulk-selected .ml-row-subj { color: var(--fg); }

/* Row checkbox */
.ml-row-check {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.ml-row-check input { display: none; }
.ml-row-check-box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line-strong);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: transparent;
  transition: all var(--d-1);
  font-size: 10px;
}
.ml-row-check:hover .ml-row-check-box { border-color: var(--fg-3); }
.ml-row-check.is-checked .ml-row-check-box {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}

/* Row star */
.ml-row-star {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: var(--fg-4);
  cursor: pointer;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all var(--d-1);
}
.ml-row-star:hover { color: #f59e0b; background: rgba(245,158,11,.08); }
.ml-row-star.is-starred { color: #f59e0b; }

/* Row avatar */
.ml-row-ava {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Row main content */
.ml-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ml-row-from {
  flex: 0 0 160px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-row-content {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.4;
}
.ml-row-subj {
  color: var(--fg);
  font-weight: 500;
}
.ml-row-preview {
  color: var(--fg-3);
  font-weight: 400;
}
.ml-row-label {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--lc) 14%, transparent);
  color: var(--lc);
  border: 1px solid color-mix(in srgb, var(--lc) 28%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

.ml-row-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-3);
  font-size: 12px;
}
.ml-row-att { color: var(--fg-3); }
.ml-row-replied { color: var(--ok); }

.ml-row-time {
  font-size: 11.5px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.ml-row.is-unread .ml-row-time { color: var(--fg); font-weight: 700; }

/* ─── READER (slides over list) ──────────────────────────────────── */
.ml-reader {
  position: absolute;
  inset: 0;
  background: var(--bg-0) !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--d-3) var(--e-out), visibility 0s linear var(--d-3);
  z-index: 30;
  pointer-events: none;
}
.ml-reader.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--d-3) var(--e-out), visibility 0s linear 0s;
  pointer-events: auto;
}

.ml-reader-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  min-height: 56px;
}
.ml-reader-tb-spacer { flex: 1; }

.ml-reader-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px clamp(20px, 5vw, 56px);
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}
.ml-reader-body::-webkit-scrollbar { width: 8px; }
.ml-reader-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* Subject + labels row */
.ml-r-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.ml-r-subj {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  flex: 1;
  min-width: 200px;
  line-height: 1.25;
}
.ml-r-labels {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ml-r-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--lc) 14%, transparent);
  color: var(--lc);
  border: 1px solid color-mix(in srgb, var(--lc) 28%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ml-r-label i { font-size: 9px; }
.ml-r-star {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--fg-4);
  cursor: pointer;
  font-size: 15px;
  transition: all var(--d-1);
}
.ml-r-star:hover { background: rgba(245,158,11,.1); color: #f59e0b; }
.ml-r-star.is-starred { color: #f59e0b; }

/* Sender card */
.ml-r-sender {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}
.ml-r-ava {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ml-r-sender-info { flex: 1; min-width: 0; }
.ml-r-from-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.ml-r-from-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
}
.ml-r-from-email {
  font-size: 12.5px;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
}
.ml-r-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--fg-3);
}
.ml-r-meta-row strong { color: var(--fg-2); font-weight: 600; }
.ml-r-meta-toggle {
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--d-1);
}
.ml-r-meta-toggle:hover { background: var(--bg-2); color: var(--fg); }
.ml-r-actions-quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ml-r-time {
  font-size: 12px;
  color: var(--fg-3);
  margin-right: 8px;
  white-space: nowrap;
}

/* Email body content */
.ml-r-content {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--fg);
  padding: 8px 0 24px;
}
.ml-r-content p { margin: 0 0 16px 0; }
.ml-r-content ul,
.ml-r-content ol { margin: 0 0 16px 0; padding-left: 24px; }
.ml-r-content li { margin-bottom: 6px; }
.ml-r-content strong { color: var(--fg); font-weight: 700; }
.ml-r-content a { color: var(--acc); text-decoration: none; border-bottom: 1px solid var(--line-acc); }
.ml-r-content a:hover { border-bottom-color: var(--acc); }
.ml-r-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Attachments */
.ml-r-attachments {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin: 20px 0;
}
.ml-r-att-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
  margin-bottom: 12px;
}
.ml-r-att-hdr > i { color: var(--fg-3); }
.ml-r-att-dl-all {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.ml-r-att-dl-all:hover { background: var(--acc-soft); color: var(--acc); border-color: var(--line-acc); }
.ml-r-att-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.ml-r-att-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: all var(--d-1);
}
.ml-r-att-card:hover {
  background: var(--bg-3);
  border-color: var(--line);
  transform: translateY(-1px);
}
.ml-r-att-ico {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ml-att-pdf { background: rgba(248,113,113,.12); color: #f87171; }
.ml-att-img { background: rgba(139,92,246,.12); color: #a78bfa; }
.ml-att-doc { background: rgba(59,130,246,.12); color: #60a5fa; }
.ml-att-zip { background: rgba(251,191,36,.12); color: #fbbf24; }
.ml-r-att-info { flex: 1; min-width: 0; }
.ml-r-att-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-r-att-size { font-size: 11px; color: var(--fg-3); margin-top: 1px; }
.ml-r-att-dl {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--d-1);
}
.ml-r-att-dl:hover { background: var(--bg-1); color: var(--acc); }

/* Quick reply buttons */
.ml-r-quick {
  display: flex;
  gap: 8px;
  margin: 20px 0 14px;
  flex-wrap: wrap;
}
.ml-r-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.ml-r-quick-btn:hover {
  background: var(--bg-2);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.ml-r-quick-ai {
  background: var(--grad-acc);
  color: #fff;
  border-color: transparent;
}
.ml-r-quick-ai:hover { color: #fff; filter: brightness(1.08); border-color: transparent; }

/* AI Suggested chips */
.ml-r-suggest {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 0 24px;
}
.ml-r-suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: 99px;
  padding: 7px 14px;
  color: var(--fg-2);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--d-1);
}
.ml-r-suggest-chip:hover {
  background: var(--acc-soft);
  border-color: var(--acc);
  border-style: solid;
  color: var(--acc);
}
.ml-r-suggest-chip i { font-size: 10px; opacity: 0.7; }

/* ─── FAB ──────────────────────────────────────────────────────── */
.ml-fab {
  display: none;
  position: fixed;
  right: 22px;
  bottom: 90px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad-acc);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  z-index: 90;
  box-shadow: 0 14px 32px rgba(238,29,36,.35);
  transition: all var(--d-2);
}
.ml-fab:hover { transform: scale(1.06) translateY(-2px); }

/* ─── COMPOSER POPUP ─────────────────────────────────────────────── */
.ml-composer-popup {
  position: fixed;
  right: 24px;
  bottom: 0;
  width: 560px;
  max-width: calc(100vw - 48px);
  height: 540px;
  max-height: calc(100vh - 90px);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  z-index: 200;
  box-shadow: 0 -8px 40px rgba(0,0,0,.45);
  transform: translateY(100%);
  transition: transform var(--d-3) var(--e-out), width var(--d-2), height var(--d-2);
  overflow: hidden;
}
.ml-composer-popup.is-open { transform: translateY(0); }
.ml-composer-popup.is-min {
  height: 48px;
  width: 320px;
}
.ml-composer-popup.is-min .ml-composer-body,
.ml-composer-popup.is-min .ml-composer-foot { display: none; }
.ml-composer-popup.is-max {
  width: min(900px, calc(100vw - 48px));
  height: calc(100vh - 90px);
}

.ml-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 48px;
  background: linear-gradient(180deg, rgba(238,29,36,.06), transparent);
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.ml-composer-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.ml-composer-head-btns { display: inline-flex; gap: 2px; }
.ml-comp-hbtn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  transition: all var(--d-1);
}
.ml-comp-hbtn:hover { background: var(--bg-2); color: var(--fg); }

.ml-composer-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.ml-comp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.ml-comp-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-3);
  width: 36px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ml-comp-inp,
.ml-comp-from {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-size: 13.5px;
  height: 28px;
  font-family: inherit;
}
.ml-comp-inp::placeholder { color: var(--fg-4); }
.ml-comp-subj { font-weight: 600; }
.ml-comp-from {
  background: var(--bg-2);
  border-radius: 7px;
  padding: 0 8px;
  cursor: pointer;
}
.ml-comp-cc {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all var(--d-1);
}
.ml-comp-cc:hover { background: var(--bg-2); color: var(--fg); }

.ml-comp-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ml-comp-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.ml-comp-fmt {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11.5px;
  transition: all var(--d-1);
}
.ml-comp-fmt:hover { background: var(--bg-2); color: var(--fg); }
.ml-comp-fmt:active { background: var(--bg-3); transform: scale(0.95); }

/* Toolbar selects (font, size, style) */
.ml-comp-sel {
  height: 28px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--fg-3);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: 0;
  transition: all var(--d-1);
  max-width: 110px;
}
.ml-comp-sel:hover { background: var(--bg-2); color: var(--fg); border-color: var(--line); }
.ml-comp-sel:focus { background: var(--bg-2); border-color: var(--accent, #f04e23); }

/* Color picker buttons (label wraps native input[type=color]) */
.ml-comp-color {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg-3);
  transition: all var(--d-1);
}
.ml-comp-color:hover { background: var(--bg-2); color: var(--fg); }
.ml-comp-color input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  cursor: pointer;
  padding: 0;
}

/* Rich text editor body (contenteditable) */
.ml-comp-text {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.65;
  padding: 16px 18px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  min-height: 180px;
  overflow-y: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
}
/* Placeholder pre contenteditable */
.ml-comp-text:empty:before {
  content: attr(data-placeholder);
  color: var(--fg-4);
  pointer-events: none;
  display: block;
}
.ml-comp-text:focus { outline: 0; }
.ml-comp-text h1 { font-size: 26px; font-weight: 800; margin: 14px 0 8px; line-height: 1.25; }
.ml-comp-text h2 { font-size: 22px; font-weight: 700; margin: 12px 0 6px; line-height: 1.3; }
.ml-comp-text h3 { font-size: 18px; font-weight: 700; margin: 10px 0 6px; line-height: 1.35; }
.ml-comp-text p  { margin: 0 0 8px; }
.ml-comp-text ul, .ml-comp-text ol { padding-left: 28px; margin: 8px 0; }
.ml-comp-text li { margin: 4px 0; }
.ml-comp-text blockquote {
  border-left: 3px solid var(--accent, #f04e23);
  padding: 4px 14px;
  margin: 10px 0;
  color: var(--fg-2);
  background: var(--bg-2);
  border-radius: 0 8px 8px 0;
}
.ml-comp-text pre {
  background: var(--bg-2);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 13px;
  overflow-x: auto;
  margin: 10px 0;
}
.ml-comp-text a { color: var(--accent, #f04e23); text-decoration: underline; }
.ml-comp-text hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.ml-comp-text img { max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0; }

.ml-composer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg-1);
  flex-shrink: 0;
}
.ml-comp-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 20px;
  background: var(--grad-acc);
  color: #fff;
  border: 0;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.005em;
  box-shadow: 0 4px 14px rgba(238,29,36,.32);
  transition: all var(--d-1);
}
.ml-comp-send:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(238,29,36,.4); }
.ml-comp-send-divider { width: 1px; height: 14px; background: rgba(255,255,255,.3); margin: 0 6px; }
.ml-comp-foot-actions {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
}
.ml-comp-act {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all var(--d-1);
}
.ml-comp-act:hover { background: var(--bg-2); color: var(--fg); }
.ml-comp-act-ai { color: var(--acc); }
.ml-comp-act-ai:hover { background: var(--acc-soft); color: var(--acc); }
.ml-comp-act-tpl {
  width: auto;
  padding: 0 10px;
  gap: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
}
.ml-comp-act-tpl.has-tpl {
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 600;
}
.ml-comp-tpl-name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ml-comp-tpl-name:empty { display: none; }
.ml-comp-foot-right { margin-left: auto; }

/* ─── COMPOSE attachments chip strip ─────────────────────────────── */
.ml-comp-attachments {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px !important;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.ml-att-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-1);
  font-size: 12.5px;
  color: var(--fg);
  transition: all var(--d-1);
}
.ml-att-chip:hover { border-color: var(--acc); }
.ml-att-chip small { color: var(--fg-3); font-size: 11px; }
.ml-att-chip .icon-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg-3);
  padding: 0;
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: all var(--d-1);
}
.ml-att-chip .icon-btn:hover { background: var(--bg-2); color: #ef4444; }

/* ─── TEMPLATE PICKER (compose dropdown) ─────────────────────────── */
.ml-tpl-picker {
  position: absolute;
  bottom: 60px;
  right: 16px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 460px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  overflow: hidden;
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: mlTplPickerIn .18s ease-out;
}
@keyframes mlTplPickerIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ml-tpl-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg);
  background: var(--bg-2);
}
.ml-tpl-picker-head i.fa-palette { color: var(--acc); margin-right: 6px; }
.ml-tpl-picker-head .icon-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg-3);
  padding: 4px 8px;
  border-radius: 6px;
}
.ml-tpl-picker-head .icon-btn:hover { background: var(--bg); color: var(--fg); }
.ml-tpl-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.ml-tpl-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
}
.ml-tpl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--d-1);
  margin-bottom: 4px;
}
.ml-tpl-item:hover { background: var(--bg-2); border-color: var(--line); }
.ml-tpl-item.is-active {
  background: var(--acc-soft);
  border-color: var(--acc);
}
.ml-tpl-item-swatch {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  overflow: hidden;
}
.ml-tpl-item-swatch.has-logo {
  background: #fff;
  border: 2px solid var(--acc);
  padding: 4px;
}
.ml-tpl-item-swatch.has-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.ml-tpl-new-btn {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border: 1px dashed var(--acc);
  background: var(--acc-soft);
  color: var(--acc);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: all var(--d-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ml-tpl-new-btn:hover { background: var(--acc); color: #fff; }

/* ─── EMAIL AUTOCOMPLETE (Pre/Cc/Bcc) ──────────────────────────── */
.ml-ac-dropdown {
  position: fixed;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  z-index: 3000;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  min-width: 280px;
  animation: mlAcIn .12s ease-out;
}
@keyframes mlAcIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ml-ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--d-1);
}
.ml-ac-item:hover,
.ml-ac-item.is-active {
  background: var(--acc-soft);
}
.ml-ac-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), var(--acc-2, #6b9a6b));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.ml-ac-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ml-ac-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ml-ac-email {
  font-size: 12px;
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ml-ac-item.is-active .ml-ac-name,
.ml-ac-item.is-active .ml-ac-email {
  color: var(--fg);
}
.ml-ac-dropdown mark {
  background: rgba(74,118,74,.25);
  color: var(--acc);
  font-weight: 700;
  padding: 0;
  border-radius: 2px;
}

/* ─── NOTIFICATIONS dropdown (topbar bell) ─────────────────────── */
.notif-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border, #e5e7eb));
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  z-index: 500;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: notifDropIn .14s ease-out;
}
.notif-drop.open { display: flex; }
@keyframes notifDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.notif-drop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, var(--border, #e5e7eb));
  background: var(--bg-2, var(--bg2, #f8fafc));
}
.notif-drop-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text, var(--fg));
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.notif-drop-title i { color: var(--acc); }
.notif-drop-mark {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text3, var(--fg-3));
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  transition: background .15s;
}
.notif-drop-mark:hover { background: var(--bg, var(--bg-2)); color: var(--acc); }
.notif-drop-list {
  flex: 1;
  overflow-y: auto;
  min-height: 80px;
  max-height: 56vh;
}
.notif-drop-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--line, var(--border, #e5e7eb));
  text-align: center;
  background: var(--bg-2, var(--bg2, #f8fafc));
}

/* ─── NOTIFICATIONS FULL-PAGE SECTION (sec-notifications) ──────── */
.nfp-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 0;
}
.nfp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.nfp-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nfp-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--acc, #4a764a), var(--acc-2, #6b9a6b));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(74,118,74,.25);
}
.nfp-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text, var(--fg));
  letter-spacing: -0.02em;
}
.nfp-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text3, var(--fg-3));
}
.nfp-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.nfp-btn-sec, .nfp-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line, var(--border, #e5e7eb));
  background: var(--bg-1, var(--bg, #fff));
  color: var(--text, var(--fg));
  transition: all var(--d-1);
}
.nfp-btn-sec:hover { background: var(--bg-2, var(--bg2)); border-color: var(--acc); color: var(--acc); }
.nfp-btn-danger {
  color: #ef4444;
  border-color: rgba(239,68,68,.3);
}
.nfp-btn-danger:hover { background: rgba(239,68,68,.08); border-color: #ef4444; }

.nfp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  padding: 6px;
  background: var(--bg-2, var(--bg2, #f8fafc));
  border-radius: 12px;
  border: 1px solid var(--line, var(--border, #e5e7eb));
}
.nfp-filter-sep {
  width: 1px;
  background: var(--line, var(--border, #e5e7eb));
  margin: 4px 4px;
}
.nfp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text3, var(--fg-3));
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.nfp-tab:hover { color: var(--text, var(--fg)); background: var(--bg-1, var(--bg)); }
.nfp-tab.is-active {
  background: var(--bg-1, var(--bg, #fff));
  color: var(--acc);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.nfp-tab-count {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(0,0,0,.06);
  color: var(--text3, var(--fg-3));
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.nfp-tab.is-active .nfp-tab-count {
  background: var(--acc);
  color: #fff;
}

.nfp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nfp-group-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3, var(--fg-3));
  padding: 14px 4px 6px;
  border-bottom: 1px solid var(--line, var(--border, #e5e7eb));
  margin-bottom: 4px;
}
.nfp-loading, .nfp-error {
  padding: 60px 20px;
  text-align: center;
  color: var(--text3, var(--fg-3));
  font-size: 14px;
}
.nfp-error { color: #ef4444; }
.nfp-empty {
  padding: 80px 20px;
  text-align: center;
  color: var(--text3, var(--fg-3));
}
.nfp-empty i {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
  opacity: .35;
}
.nfp-empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text, var(--fg));
}
.nfp-empty p { margin: 0; font-size: 13.5px; }

.nfp-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border, #e5e7eb));
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--d-1);
  position: relative;
}
.nfp-item:hover {
  border-color: var(--acc);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}
.nfp-item.is-unread {
  background: linear-gradient(to right, rgba(14,165,233,.06), transparent);
  border-left: 3px solid var(--acc);
}
.nfp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}
.nfp-dot-spacer {
  width: 8px;
  flex-shrink: 0;
}
.nfp-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.nfp-body {
  flex: 1;
  min-width: 0;
}
.nfp-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.nfp-title-line {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, var(--fg));
  line-height: 1.35;
}
.nfp-item.is-unread .nfp-title-line { font-weight: 700; }
.nfp-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nfp-msg {
  font-size: 12.5px;
  color: var(--text2, var(--fg-2, var(--fg-3)));
  line-height: 1.45;
  margin-bottom: 4px;
}
.nfp-meta {
  display: flex;
  gap: 12px;
  font-size: 11.5px;
  color: var(--text3, var(--fg-3));
}
.nfp-meta i { margin-right: 4px; opacity: .7; }
.nfp-link {
  color: var(--acc);
  font-weight: 600;
}
.nfp-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  align-self: flex-start;
  opacity: 0;
  transition: opacity var(--d-1);
}
.nfp-item:hover .nfp-actions { opacity: 1; }
.nfp-act {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 0;
  background: var(--bg-2, var(--bg2, #f8fafc));
  color: var(--text3, var(--fg-3));
  cursor: pointer;
  font-size: 11px;
  transition: all var(--d-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nfp-act:hover { background: var(--acc); color: #fff; }
.nfp-act-del:hover { background: #ef4444; }

.nfp-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  padding: 16px;
}
.nfp-pager-info {
  font-size: 12.5px;
  color: var(--text3, var(--fg-3));
  font-weight: 600;
}

@media (max-width: 720px) {
  .nfp-wrap { padding: 16px 0; }
  .nfp-head-actions { width: 100%; justify-content: stretch; }
  .nfp-head-actions button { flex: 1; justify-content: center; }
  .nfp-actions { opacity: 1; }
}

/* ─── TIMESHEET (sec-timesheet) ────────────────────────────────── */
.ts-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 0;
}
.ts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ts-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ts-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #4a764a, #6b9a6b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(74,118,74,.25);
}
.ts-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--text, var(--fg)); }
.ts-sub   { margin: 2px 0 0; font-size: 13px; color: var(--text3, var(--fg-3)); }
.ts-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ts-owner-select {
  padding: 8px 12px;
  border: 1px solid var(--line, var(--border));
  border-radius: 9px;
  background: var(--bg-1, var(--bg, #fff));
  color: var(--text, var(--fg));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ts-btn-sec, .ts-btn-pr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line, var(--border));
  background: var(--bg-1, var(--bg, #fff));
  color: var(--text, var(--fg));
  transition: all .15s;
}
.ts-btn-sec:hover { border-color: var(--acc); color: var(--acc); }
.ts-btn-pr {
  background: var(--acc, #4a764a);
  color: #fff;
  border-color: var(--acc, #4a764a);
}
.ts-btn-pr:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Export dropdown */
.ts-export-wrap { position: relative; }
.ts-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
  min-width: 200px;
  box-shadow: 0 14px 40px rgba(0,0,0,.15);
  padding: 4px;
  z-index: 100;
  animation: tsMenuIn .14s ease-out;
}
@keyframes tsMenuIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.ts-export-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--text, var(--fg));
  border-radius: 7px;
  text-align: left;
}
.ts-export-menu button:hover { background: var(--bg-2, var(--bg2)); color: var(--acc); }
.ts-export-menu i { color: var(--acc); width: 16px; text-align: center; }

/* Month picker bar */
.ts-month-bar { margin-bottom: 18px; }
.ts-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2, var(--bg2));
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
  padding: 4px;
}
.ts-month-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text2, var(--fg-2));
  font-size: 14px;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ts-month-btn:hover { background: var(--bg-1, var(--bg)); color: var(--acc); }
.ts-month-today { width: auto; padding: 0 14px; font-weight: 600; font-size: 12.5px; }
.ts-month-today i { margin-right: 5px; }
.ts-month-inp {
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, var(--fg));
  padding: 0 8px;
  cursor: pointer;
  min-width: 130px;
  text-align: center;
}

/* KPI cards */
.ts-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.ts-kpi {
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: all .15s;
}
.ts-kpi:hover { border-color: var(--acc); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.ts-kpi-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ts-kpi-body { flex: 1; min-width: 0; }
.ts-kpi-lbl { font-size: 11.5px; color: var(--text3, var(--fg-3)); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 4px; }
.ts-kpi-val { font-size: 26px; font-weight: 800; color: var(--text, var(--fg)); line-height: 1; letter-spacing: -0.02em; }
.ts-kpi-val small { font-size: 14px; font-weight: 600; color: var(--text3, var(--fg-3)); margin-left: 3px; }
.ts-kpi-sub { font-size: 11.5px; color: var(--text3, var(--fg-3)); margin-top: 6px; }

/* Add form */
.ts-add {
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}
.ts-add-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.ts-add-fld {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
}
.ts-add-lbl {
  font-size: 11.5px;
  color: var(--text3, var(--fg-3));
  font-weight: 600;
  margin-bottom: 4px;
}
.ts-add-lbl small { font-weight: 400; opacity: .7; }
.ts-inp {
  padding: 9px 12px;
  border: 1px solid var(--line, var(--border));
  border-radius: 9px;
  background: var(--bg, var(--bg-1, #fff));
  color: var(--text, var(--fg));
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-sizing: border-box;
}
.ts-inp:focus { border-color: var(--acc); }
.ts-textarea { resize: vertical; min-height: 50px; font-family: inherit; }
.ts-add-btn { white-space: nowrap; }

/* List */
.ts-list-wrap {
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  overflow: hidden;
}
.ts-list-head {
  display: grid;
  grid-template-columns: 80px 60px 90px 90px 90px 1fr 80px;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-2, var(--bg2, #f8fafc));
  border-bottom: 1px solid var(--line, var(--border));
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3, var(--fg-3));
}
.ts-list { max-height: 600px; overflow-y: auto; }
.ts-row {
  display: grid;
  grid-template-columns: 80px 60px 90px 90px 90px 1fr 80px;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, var(--border));
  font-size: 13.5px;
  color: var(--text, var(--fg));
  align-items: center;
  transition: background .15s;
}
.ts-row:hover { background: var(--bg-2, var(--bg2)); }
.ts-row.is-weekend { background: rgba(245,158,11,.04); }
.ts-row.is-weekend:hover { background: rgba(245,158,11,.08); }
.ts-c-date { font-weight: 700; color: var(--acc); }
.ts-c-day { color: var(--text3, var(--fg-3)); font-size: 12px; text-transform: uppercase; font-weight: 600; }
.ts-c-hrs, .ts-c-over, .ts-c-total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ts-c-over { color: var(--text3, var(--fg-3)); }
.ts-c-over.has-over { color: #f59e0b; font-weight: 700; }
.ts-c-total { font-weight: 800; color: var(--text, var(--fg)); }
.ts-c-hrs small, .ts-c-over small, .ts-c-total small {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text3, var(--fg-3));
  margin-left: 1px;
}
.ts-c-note { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.ts-proj-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--acc-soft, rgba(74,118,74,.1));
  color: var(--acc);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.ts-note-txt {
  color: var(--text3, var(--fg-3));
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.ts-c-act { display: flex; gap: 4px; justify-content: flex-end; }
.ts-act {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--text3, var(--fg-3));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all .15s;
}
.ts-act:hover { background: var(--bg-2, var(--bg2)); color: var(--acc); }
.ts-act-del:hover { background: rgba(239,68,68,.1); color: #ef4444; }
.ts-loading, .ts-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text3, var(--fg-3));
}
.ts-empty i { font-size: 36px; display: block; margin-bottom: 12px; opacity: .35; }
.ts-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--text, var(--fg)); }
.ts-empty p { margin: 0; font-size: 13px; }

/* Share modal */
.ts-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  animation: tsModalBgIn .2s ease-out;
}
@keyframes tsModalBgIn { from { opacity: 0; } to { opacity: 1; } }
.ts-modal {
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.ts-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, var(--border));
  background: var(--bg-2, var(--bg2));
}
.ts-modal-head h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text, var(--fg));
}
.ts-modal-head i { color: var(--acc); }
.ts-modal-x {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text3, var(--fg-3));
}
.ts-modal-x:hover { background: var(--bg, var(--bg-2)); color: var(--text, var(--fg)); }
.ts-modal-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.ts-modal-hint { font-size: 12.5px; color: var(--text3, var(--fg-3)); margin: 0 0 12px; }
.ts-modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line, var(--border));
  background: var(--bg-2, var(--bg2));
  display: flex;
  justify-content: flex-end;
}
.ts-share-list { display: flex; flex-direction: column; gap: 4px; }
.ts-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
}
.ts-share-row:hover { background: var(--bg-2, var(--bg2)); border-color: var(--acc); }
.ts-share-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acc, #4a764a), #6b9a6b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.ts-share-meta { flex: 1; min-width: 0; }
.ts-share-name { font-size: 13.5px; font-weight: 600; color: var(--text, var(--fg)); }
.ts-share-email { font-size: 11.5px; color: var(--text3, var(--fg-3)); }
.ts-share-chk { width: 18px; height: 18px; accent-color: var(--acc); }

@media (max-width: 900px) {
  .ts-kpis { grid-template-columns: 1fr 1fr; }
  .ts-list-head, .ts-row {
    grid-template-columns: 60px 80px 80px 1fr 60px;
  }
  .ts-list-head > div:nth-child(2),
  .ts-row > div:nth-child(2) { display: none; }
  .ts-list-head > div:nth-child(5),
  .ts-row > div:nth-child(5) { display: none; }
}

/* ════════════════════════════════════════════════════════════════ */
/*  REPUTATION / REVIEWS section (sec-reputation)                   */
/* ════════════════════════════════════════════════════════════════ */
#sec-reputation { max-width: 1300px; margin: 0 auto; padding: 24px 24px 60px; }

/* HERO */
.rp-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  background: linear-gradient(135deg, var(--bg-1, var(--bg, #fff)), var(--bg-2, var(--bg2, #f8fafc)));
  border: 1px solid var(--line, var(--border));
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.rp-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(74,118,74,.12), transparent 70%);
  pointer-events: none;
}
.rp-hero-left { min-width: 0; position: relative; z-index: 1; }
.rp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(74,118,74,.12);
  color: var(--acc, #4a764a);
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.rp-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: rpPulse 2s infinite;
}
@keyframes rpPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.rp-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text, var(--fg));
  margin: 0 0 12px;
}
.rp-grad {
  background: linear-gradient(135deg, var(--acc, #4a764a), #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rp-sub {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text2, var(--fg-2, var(--fg-3)));
  margin: 0 0 22px;
  max-width: 540px;
}
.rp-hero-actions { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.rp-btn-primary, .rp-btn-secondary, .btn-add, .btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.rp-btn-primary, .btn-add {
  background: var(--acc, #4a764a);
  color: #fff;
  box-shadow: 0 4px 14px rgba(74,118,74,.3);
}
.rp-btn-primary:hover, .btn-add:hover { transform: translateY(-2px); filter: brightness(1.1); }
.rp-btn-secondary, .btn-sec {
  background: var(--bg-1, var(--bg, #fff));
  color: var(--text, var(--fg));
  border: 1px solid var(--line, var(--border));
}
.rp-btn-secondary:hover, .btn-sec:hover { background: var(--bg-2, var(--bg2)); border-color: var(--acc); }

/* Hero KPIs */
.rp-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.rp-kpi {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
  transition: all .15s;
}
.rp-kpi:hover { transform: translateY(-2px); border-color: var(--acc); }
.rp-kpi-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  flex-shrink: 0;
}
.rp-kpi-v {
  font-size: 22px;
  font-weight: 800;
  color: var(--text, var(--fg));
  line-height: 1;
  letter-spacing: -0.02em;
}
.rp-kpi-l {
  font-size: 11.5px;
  color: var(--text3, var(--fg-3));
  margin-top: 4px;
}

/* Hero visual — floating preview cards */
.rp-hero-visual {
  position: relative;
  min-height: 320px;
  display: none;
}
@media (min-width: 1050px) {
  .rp-hero-visual { display: block; }
}
.rp-vis-glow {
  position: absolute;
  inset: 20px;
  background: radial-gradient(circle, rgba(245,158,11,.15), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.rp-rev-card {
  position: absolute;
  width: 260px;
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
  animation: rpFloat 4s ease-in-out infinite;
}
.rp-rc-1 { top: 0;    right: 0;   z-index: 3; animation-delay: 0s; }
.rp-rc-2 { top: 110px; left: 40px; z-index: 2; animation-delay: 1.5s; }
.rp-rc-3 { top: 210px; right: 30px; z-index: 1; animation-delay: 3s; }
@keyframes rpFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.rp-rc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rp-rc-ava {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rp-rc-name { font-weight: 700; font-size: 12.5px; color: var(--text, var(--fg)); }
.rp-rc-stars { font-size: 10px; color: #f59e0b; letter-spacing: -1px; margin-top: 1px; }
.rp-rc-stars-low { color: #ef4444; }
.rp-rc-stars-low .fa-regular { color: var(--text3, var(--fg-3)); }
.rp-rc-source { margin-left: auto; font-size: 13px; color: var(--text3, var(--fg-3)); }
.rp-rc-source .fa-google { color: #4285F4; }
.rp-rc-source .fa-facebook { color: #1877F2; }
.rp-rc-body {
  font-size: 12.5px;
  color: var(--text2, var(--fg-2, var(--fg-3)));
  line-height: 1.45;
  margin-bottom: 8px;
}
.rp-rc-reply {
  font-size: 10.5px;
  color: var(--acc);
  font-weight: 600;
  padding-top: 6px;
  border-top: 1px solid var(--line, var(--border));
}
.rp-rc-reply.rp-reply-pending { color: #f59e0b; }
.rp-rc-reply i { margin-right: 4px; }

/* Section headers */
.rp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 32px 0 16px;
}
.rp-section-head h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, var(--fg));
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rp-section-head h2 i { color: var(--acc); }
.rp-mini-btn { padding: 6px 12px; font-size: 12.5px; }

/* SOURCES strip */
.rp-sources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.rp-source-card {
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all .15s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.rp-source-card:hover {
  border-color: var(--acc);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.rp-source-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--rp-src-color, var(--acc));
}
.rp-source-card.is-google::before { background: #4285F4; }
.rp-source-card.is-facebook::before { background: #1877F2; }
.rp-source-card.is-trustpilot::before { background: #00b67a; }
.rp-source-card.is-yelp::before { background: #d32323; }
.rp-source-card.is-booking::before { background: #003580; }
.rp-source-card.is-manual::before { background: #64748b; }

.rp-src-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rp-src-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.rp-src-ico.t-google { background: rgba(66,133,244,.12); color: #4285F4; }
.rp-src-ico.t-facebook { background: rgba(24,119,242,.12); color: #1877F2; }
.rp-src-ico.t-trustpilot { background: rgba(0,182,122,.12); color: #00b67a; }
.rp-src-ico.t-yelp { background: rgba(211,35,35,.12); color: #d32323; }
.rp-src-ico.t-booking { background: rgba(0,53,128,.12); color: #003580; }
.rp-src-ico.t-manual { background: rgba(100,116,139,.12); color: #64748b; }
.rp-src-meta { flex: 1; min-width: 0; }
.rp-src-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, var(--fg));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-src-type {
  font-size: 11px;
  color: var(--text3, var(--fg-3));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.rp-src-config-btn {
  background: var(--bg-2, var(--bg2));
  border: 0;
  color: var(--text3, var(--fg-3));
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.rp-src-config-btn:hover { background: var(--acc); color: #fff; }
.rp-src-stats {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
  color: var(--text2, var(--fg-2, var(--fg-3)));
  flex-wrap: wrap;
}
.rp-src-stat { display: inline-flex; align-items: center; gap: 4px; }
.rp-src-stat i { color: var(--text3, var(--fg-3)); }
.rp-src-stat .fa-star { color: #f59e0b; }
.rp-src-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line, var(--border));
  font-size: 11.5px;
  color: var(--text3, var(--fg-3));
}
.rp-src-foot button {
  border: 0;
  background: transparent;
  color: var(--acc);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
}
.rp-src-foot button:hover { background: rgba(74,118,74,.1); }
.rp-src-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(167,139,250,.15);
  color: #7c3aed;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
}
.rp-src-auto-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: rgba(16,185,129,.15);
  color: #10b981;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
}

/* OVERVIEW panel */
.rp-overview {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  margin: 28px 0;
}
@media (max-width: 900px) {
  .rp-overview { grid-template-columns: 1fr; }
}
.rp-panel {
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 18px;
}
.rp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.rp-panel-head h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, var(--fg));
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rp-panel-head h3 i { color: var(--acc); }
.rp-chart-wrap {
  position: relative;
  height: 200px;
}
.rp-sentiment-wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}
.rp-donut-wrap { width: 180px; height: 180px; position: relative; flex-shrink: 0; }
.rp-sent-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rp-sent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text, var(--fg));
}
.rp-sent-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.rp-rating-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rp-rating-bar {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--text3, var(--fg-3));
}
.rp-rating-bar-track {
  height: 8px;
  background: var(--bg-2, var(--bg2));
  border-radius: 4px;
  overflow: hidden;
}
.rp-rating-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  border-radius: 4px;
  transition: width .4s;
}
.rp-rating-stars { display: inline-flex; gap: 1px; color: #f59e0b; }

/* TOOLBAR */
.rp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.rp-tabs {
  display: inline-flex;
  background: var(--bg-2, var(--bg2));
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.rp-tab {
  border: 0;
  background: transparent;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text3, var(--fg-3));
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rp-tab:hover { color: var(--text, var(--fg)); }
.rp-tab.active {
  background: var(--bg-1, var(--bg, #fff));
  color: var(--acc);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.rp-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; max-width: 600px; }
.rp-search {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.rp-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3, var(--fg-3));
  font-size: 12px;
}
.rp-search input {
  width: 100%;
  padding: 9px 12px 9px 32px;
  border: 1px solid var(--line, var(--border));
  border-radius: 9px;
  background: var(--bg, var(--bg-1, #fff));
  color: var(--text, var(--fg));
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.rp-search input:focus { border-color: var(--acc); }
.rp-select {
  padding: 9px 12px;
  border: 1px solid var(--line, var(--border));
  border-radius: 9px;
  background: var(--bg, var(--bg-1, #fff));
  color: var(--text, var(--fg));
  font-size: 12.5px;
  cursor: pointer;
}

/* REVIEW LIST */
.rp-review-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rp-review {
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 18px;
  transition: all .15s;
  position: relative;
}
.rp-review:hover {
  border-color: var(--acc);
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.rp-review.is-negative {
  border-left: 3px solid #ef4444;
}
.rp-review.is-pending::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245,158,11,.5);
  animation: rpPulse 2s infinite;
}
.rp-rev-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.rp-rev-ava {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), #6b9a6b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.rp-rev-author { flex: 1; min-width: 0; }
.rp-rev-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text, var(--fg));
}
.rp-rev-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11.5px;
  color: var(--text3, var(--fg-3));
  margin-top: 3px;
}
.rp-rev-stars { color: #f59e0b; letter-spacing: -1px; font-size: 13px; }
.rp-rev-source-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.rp-rev-source-tag.t-google { background: rgba(66,133,244,.12); color: #4285F4; }
.rp-rev-source-tag.t-facebook { background: rgba(24,119,242,.12); color: #1877F2; }
.rp-rev-source-tag.t-trustpilot { background: rgba(0,182,122,.12); color: #00b67a; }
.rp-rev-source-tag.t-manual { background: rgba(100,116,139,.12); color: #64748b; }
.rp-rev-body {
  font-size: 14px;
  color: var(--text, var(--fg));
  line-height: 1.55;
  margin: 6px 0 14px;
}
.rp-rev-reply {
  background: var(--bg-2, var(--bg2));
  border-left: 3px solid var(--acc);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 10px;
}
.rp-rev-reply-head {
  font-size: 11.5px;
  color: var(--text3, var(--fg-3));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rp-rev-reply-head i { color: var(--acc); }
.rp-rev-reply-text {
  font-size: 13px;
  color: var(--text2, var(--fg-2, var(--fg-3)));
  line-height: 1.5;
}
.rp-rev-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.rp-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line, var(--border));
  background: var(--bg, var(--bg-1, #fff));
  color: var(--text, var(--fg));
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.rp-act-btn:hover { border-color: var(--acc); color: var(--acc); }
.rp-act-btn.is-ai { color: #7c3aed; border-color: rgba(167,139,250,.4); }
.rp-act-btn.is-ai:hover { background: rgba(167,139,250,.1); border-color: #7c3aed; }
.rp-act-btn.is-danger:hover { background: rgba(239,68,68,.08); border-color: #ef4444; color: #ef4444; }

/* EMPTY state */
.rp-empty {
  text-align: center;
  padding: 80px 24px;
  background: var(--bg-1, var(--bg, #fff));
  border: 2px dashed var(--line, var(--border));
  border-radius: 16px;
  margin-top: 20px;
}
.rp-empty-ico {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-2, var(--bg2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--text3, var(--fg-3));
  margin-bottom: 18px;
}
.rp-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, var(--fg));
  margin-bottom: 6px;
}
.rp-empty-sub {
  font-size: 13.5px;
  color: var(--text3, var(--fg-3));
}

/* MODALS — source picker grid */
.rp-modal { max-width: 580px; }
.rp-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.rp-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border: 2px solid var(--line, var(--border));
  border-radius: 11px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.rp-type-card input { display: none; }
.rp-type-card i { font-size: 22px; color: var(--text3, var(--fg-3)); }
.rp-type-card span { font-size: 12px; font-weight: 600; color: var(--text, var(--fg)); }
.rp-type-card:hover { border-color: var(--acc); }
.rp-type-card:has(input:checked) {
  border-color: var(--acc);
  background: rgba(74,118,74,.08);
}
.rp-type-card:has(input:checked) i { color: var(--acc); }

.rp-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  cursor: pointer;
}
.rp-check input { margin-top: 3px; accent-color: var(--acc); width: 16px; height: 16px; }

.rp-hint {
  background: rgba(245,158,11,.08);
  border-left: 3px solid #f59e0b;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text2, var(--fg-2, var(--fg-3)));
  line-height: 1.5;
}
.rp-hint i { color: #f59e0b; margin-right: 4px; }

.rp-star-input { display: flex; gap: 4px; font-size: 24px; }
.rp-star-input i {
  color: var(--text3, var(--fg-3));
  cursor: pointer;
  transition: color .12s;
}
.rp-star-input i.is-active { color: #f59e0b; }

.rp-agent-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
  padding: 4px;
}
.rp-agent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.rp-agent-item:hover { background: var(--bg-2, var(--bg2)); }
.rp-agent-item.is-active { background: rgba(74,118,74,.1); border: 1px solid var(--acc); }
.rp-agent-item input { display: none; }
.rp-agent-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
.rp-agent-meta { flex: 1; min-width: 0; }
.rp-agent-name { font-size: 13.5px; font-weight: 600; color: var(--text, var(--fg)); }
.rp-agent-desc { font-size: 11.5px; color: var(--text3, var(--fg-3)); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2, var(--fg-2));
  margin-bottom: 6px;
}
.finp {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, var(--border));
  border-radius: 9px;
  background: var(--bg, var(--bg-1, #fff));
  color: var(--text, var(--fg));
  font-size: 13.5px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.finp:focus { border-color: var(--acc); }
textarea.finp { resize: vertical; min-height: 80px; font-family: inherit; }

/* ════════════════════════════════════════════════════════════════
   AKTUÁLNE TRIEDY z reputation.js — musia byť na konci aby prebili
   všetky predošlé .rp-* štýly cez vyššiu špecificitu.
════════════════════════════════════════════════════════════════ */

/* SOURCE CARD (.rp-src-card — JS generuje) */
#sec-reputation .rp-src-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  overflow: hidden;
  min-height: 92px;
}
#sec-reputation .rp-src-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--acc);
  opacity: .85;
}
#sec-reputation .rp-src-card:hover {
  border-color: var(--acc);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
#sec-reputation .rp-src-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
  /* JS posiela inline style: gradient — ostane funkčný */
}
#sec-reputation .rp-src-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#sec-reputation .rp-src-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, var(--fg));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sec-reputation .rp-src-meta {
  display: flex;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text2, var(--fg-2, var(--fg-3)));
  align-items: center;
}
#sec-reputation .rp-src-meta i { margin-right: 3px; color: var(--text3, var(--fg-3)); }
#sec-reputation .rp-src-agent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(167,139,250,.15);
  color: #7c3aed;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
  width: fit-content;
}
#sec-reputation .rp-src-agent.rp-src-agent-off {
  background: var(--bg-2, var(--bg2));
  color: var(--text3, var(--fg-3));
}
#sec-reputation .rp-src-sync {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: var(--bg-2, var(--bg2));
  color: var(--text3, var(--fg-3));
  cursor: pointer;
  font-size: 13px;
  transition: all .15s;
  flex-shrink: 0;
}
#sec-reputation .rp-src-sync:hover {
  background: var(--acc);
  color: #fff;
  transform: rotate(180deg);
}
#sec-reputation .rp-src-sync .fa-spin { animation: fa-spin 1s linear infinite; }

#sec-reputation .rp-src-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 20px;
  border: 2px dashed var(--line, var(--border));
  border-radius: 14px;
  color: var(--text3, var(--fg-3));
}
#sec-reputation .rp-src-empty .rp-mini-btn {
  margin-top: 12px;
  display: inline-flex;
  padding: 8px 16px;
}

/* REVIEW CARD (.rp-review-card — JS generuje) */
#sec-reputation .rp-review-card {
  display: flex;
  gap: 16px;
  padding: 18px;
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  transition: all .15s;
}
#sec-reputation .rp-review-card:hover {
  border-color: var(--acc);
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
}

/* Ľavý stĺpec — avatar + source icon */
#sec-reputation .rp-rev-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#sec-reputation .rp-rev-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#sec-reputation .rp-rev-src {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
}

/* Pravý obsah */
#sec-reputation .rp-rev-main {
  flex: 1;
  min-width: 0;
}
#sec-reputation .rp-rev-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
#sec-reputation .rp-rev-author {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text, var(--fg));
}
#sec-reputation .rp-rev-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text3, var(--fg-3));
  margin-top: 3px;
  flex-wrap: wrap;
}
#sec-reputation .rp-rev-dot {
  color: var(--text3, var(--fg-3));
  opacity: .5;
  margin: 0 2px;
}
#sec-reputation .rp-rev-body {
  font-size: 14px;
  color: var(--text, var(--fg));
  line-height: 1.55;
  margin: 6px 0 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Stars */
#sec-reputation .rp-stars {
  display: inline-flex;
  gap: 1px;
  color: #f59e0b;
  font-size: 12.5px;
  letter-spacing: -0.5px;
}
#sec-reputation .rp-stars .fa-regular { color: var(--text3, var(--fg-3)); opacity: .4; }

/* Sentiment badges */
#sec-reputation .rp-sent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
#sec-reputation .rp-sent-badge.rp-sent-pos { background: rgba(16,185,129,.12); color: #10b981; }
#sec-reputation .rp-sent-badge.rp-sent-neu { background: rgba(245,158,11,.12); color: #f59e0b; }
#sec-reputation .rp-sent-badge.rp-sent-neg { background: rgba(239,68,68,.12); color: #ef4444; }

/* Reply block */
#sec-reputation .rp-reply-block {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg-2, var(--bg2, #f8fafc));
  border-left: 3px solid var(--acc);
  border-radius: 8px;
}
#sec-reputation .rp-reply-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  margin-bottom: 6px;
}
#sec-reputation .rp-reply-by {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text3, var(--fg-3));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#sec-reputation .rp-reply-by.rp-reply-ai { color: #7c3aed; }
#sec-reputation .rp-reply-by.rp-reply-ai i { color: #7c3aed; }
#sec-reputation .rp-reply-time {
  color: var(--text3, var(--fg-3));
  font-size: 11px;
}
#sec-reputation .rp-reply-text {
  font-size: 13px;
  color: var(--text2, var(--fg-2, var(--fg-3)));
  line-height: 1.5;
}

/* Akčné tlačidlá pod recenziou */
#sec-reputation .rp-rev-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}
#sec-reputation .rp-mini-btn {
  padding: 6px 12px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all .15s;
  border: 1px solid var(--line, var(--border));
  background: var(--bg, var(--bg-1, #fff));
  color: var(--text, var(--fg));
}
#sec-reputation .rp-mini-btn.btn-add {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
}
#sec-reputation .rp-mini-btn.btn-add:hover { filter: brightness(1.1); transform: translateY(-1px); }
#sec-reputation .rp-mini-btn.btn-sec:hover { border-color: var(--acc); color: var(--acc); }
#sec-reputation .rp-mini-btn.rp-mini-danger { color: var(--text3, var(--fg-3)); }
#sec-reputation .rp-mini-btn.rp-mini-danger:hover {
  background: rgba(239,68,68,.08);
  border-color: #ef4444;
  color: #ef4444;
}

@media (max-width: 1050px) {
  .rp-hero { grid-template-columns: 1fr; }
  .rp-title { font-size: 24px; }
}
@media (max-width: 720px) {
  #sec-reputation { padding: 16px 16px 40px; }
  .rp-hero { padding: 20px; }
  .rp-kpi-row { grid-template-columns: 1fr; }
  .rp-toolbar { flex-direction: column; align-items: stretch; }
  .rp-tools { flex-direction: column; max-width: none; }
  .rp-type-grid { grid-template-columns: repeat(2, 1fr); }
  #sec-reputation .rp-review-card { flex-direction: column; }
}

/* ─── TEMPLATE EDITOR (modal: vytvoriť / upraviť šablónu) ─────────── */
.ml-tpled-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 20px;
  animation: mlModalBgIn .2s ease-out;
}
.ml-tpled {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  animation: mlModalIn .22s cubic-bezier(.16,1,.3,1);
}
.ml-tpled-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.ml-tpled-head h3 {
  font-size: 15.5px;
  font-weight: 700;
  margin: 0;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ml-tpled-head h3 i { color: var(--acc); }
.ml-tpled-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  min-height: 0;
}
.ml-tpled-form {
  padding: 20px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ml-tpled-preview {
  display: flex;
  flex-direction: column;
  background: #f4f5f7;
  min-height: 0;
}
.ml-tpled-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.ml-tpled-preview-head i { color: var(--acc); }
.ml-tpled-preview-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
  min-height: 400px;
}
.ml-tpled-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  margin-top: 8px;
  display: block;
}
.ml-tpled-inp {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font-size: 13.5px;
  outline: none;
  transition: border-color var(--d-1);
  box-sizing: border-box;
}
.ml-tpled-inp:focus { border-color: var(--acc); }
.ml-tpled-inp-color { max-width: 120px; }
.ml-tpled-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}
.ml-tpled-hint {
  font-size: 11.5px;
  color: var(--fg-3);
  margin: 2px 0;
}
.ml-tpled-hint code {
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--acc);
}
.ml-tpled-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ml-tpled-color-row input[type="color"] {
  width: 44px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}
.ml-tpled-logo-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ml-tpled-logo-box {
  width: 88px;
  height: 64px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px;
  box-sizing: border-box;
}
.ml-tpled-logo-actions {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.ml-tpled-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--fg);
  margin-top: 10px;
  cursor: pointer;
}
.ml-tpled-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--acc);
  flex-shrink: 0;
}
.ml-tpled-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.ml-tpled-btn-pr,
.ml-tpled-btn-sec,
.ml-tpled-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  transition: all var(--d-1);
}
.ml-tpled-btn-pr {
  background: var(--acc);
  color: #fff;
}
.ml-tpled-btn-pr:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ml-tpled-btn-sec {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  font-weight: 500;
}
.ml-tpled-btn-sec:hover { background: var(--bg-2); }
.ml-tpled-btn-danger {
  background: transparent;
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.3);
}
.ml-tpled-btn-danger:hover { background: rgba(239,68,68,.1); }

@media (max-width: 900px) {
  .ml-tpled-body {
    grid-template-columns: 1fr;
  }
  .ml-tpled-preview { display: none; }
}
.ml-tpl-item-meta { flex: 1; min-width: 0; }
.ml-tpl-item-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ml-tpl-item-desc {
  font-size: 11.5px;
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.ml-tpl-item-badge {
  font-size: 10px;
  color: var(--acc);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ml-tpl-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.ml-tpl-item-actions .icon-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg-3);
  padding: 4px 6px;
  border-radius: 6px;
}
.ml-tpl-item-actions .icon-btn:hover { background: var(--bg); color: var(--fg); }
.ml-tpl-clear {
  width: 100%;
  padding: 8px;
  margin-top: 6px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--fg-3);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  text-align: center;
  transition: all var(--d-1);
}
.ml-tpl-clear:hover { color: #ef4444; border-color: #ef4444; }

/* ─── DRIVE PICKER MODAL ─────────────────────────────────────────── */
#mailDriveModal.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: mlModalBgIn .2s ease-out;
}
@keyframes mlModalBgIn { from { opacity: 0; } to { opacity: 1; } }
#mailDriveModal.modal-bg .modal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  animation: mlModalIn .22s cubic-bezier(.16,1,.3,1);
}
#mailDriveModal.modal-bg .modal-wide { max-width: 760px; }
@keyframes mlModalIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#mailDriveModal.modal-bg .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
#mailDriveModal.modal-bg .modal-head h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#mailDriveModal.modal-bg .modal-head h3 i { color: var(--acc); }
#mailDriveModal.modal-bg .modal-head .icon-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg-3);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#mailDriveModal.modal-bg .modal-head .icon-btn:hover { background: var(--bg); color: var(--fg); }
#mailDriveModal.modal-bg .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#mailDriveModal.modal-bg .modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
#mailDriveModal.modal-bg .btn-pr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--acc);
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--d-1);
}
#mailDriveModal.modal-bg .btn-pr:hover { filter: brightness(1.08); transform: translateY(-1px); }
#mailDriveModal.modal-bg .btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
#mailDriveModal.modal-bg .btn-sec:hover { background: var(--bg-2); }

/* Drive picker toolbar (tabs + search) */
.mail-drive-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mail-drive-tabs {
  display: inline-flex;
  background: var(--bg-2);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.mail-drive-tab {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-3);
  cursor: pointer;
  transition: all var(--d-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mail-drive-tab:hover { color: var(--fg); }
.mail-drive-tab.active {
  background: var(--bg-1);
  color: var(--fg);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.mail-drive-search,
#mailDriveModal.modal-bg .inp.mail-drive-search {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  outline: none;
  transition: border-color var(--d-1);
}
.mail-drive-search:focus { border-color: var(--acc); }

.mail-drive-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-3);
  flex-wrap: wrap;
}
.mail-drive-crumbs a {
  color: var(--acc);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background var(--d-1);
}
.mail-drive-crumbs a:hover { background: var(--acc-soft); }
.mail-drive-crumbs span { color: var(--fg-3); }

.mail-drive-list {
  flex: 1;
  min-height: 280px;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
  background: var(--bg);
}
.mail-drive-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--d-1);
  color: var(--fg);
  font-size: 13px;
}
.mail-drive-item:hover { background: var(--bg-2); }
.mail-drive-item.is-selected { background: var(--acc-soft); }
.mail-drive-item .mail-drive-chk {
  width: 16px;
  height: 16px;
  accent-color: var(--acc);
  flex-shrink: 0;
}
.mail-drive-item i:not(.mail-drive-arr) {
  color: var(--fg-3);
  width: 18px;
  text-align: center;
}
.mail-drive-item.is-folder i { color: var(--acc); }
.mail-drive-item .mail-drive-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-drive-item .mail-drive-meta {
  font-size: 11.5px;
  color: var(--fg-3);
  flex-shrink: 0;
}
.mail-drive-item .mail-drive-arr {
  color: var(--fg-3);
  font-size: 11px;
  margin-left: 6px;
}

.mail-drive-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  min-height: 44px;
  align-items: center;
}
.mail-drive-selected:empty::before {
  content: 'Žiadne súbory zatiaľ nevybrané';
  color: var(--fg-3);
  font-size: 12px;
  font-style: italic;
}
.mail-att-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-1);
  font-size: 12.5px;
  color: var(--fg);
}
.mail-att-chip i { color: var(--acc); }
.mail-att-chip .icon-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg-3);
  padding: 0 0 0 2px;
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.mail-att-chip .icon-btn:hover { background: var(--bg); color: #ef4444; }

.action-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
}
.action-loading i { margin-right: 6px; }
.mail-err {
  padding: 20px;
  text-align: center;
  color: #ef4444;
  font-size: 13px;
}
.mail-err i { margin-right: 6px; }

/* ─── CONTEXT MENU (pravý klik na email / kebab) ─────────────────── */
.ml-ctx {
  position: fixed;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  min-width: 230px;
  z-index: 300;
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  display: none;
}
.ml-ctx.is-open { display: block; animation: flMenuIn var(--d-1) var(--e-out); }
.ml-ctx-item {
  display: flex; width: 100%; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: transparent; border: 0;
  color: var(--fg); font-size: 13px; font-weight: 500;
  text-align: left; border-radius: 8px; cursor: pointer;
  transition: background var(--d-1);
}
.ml-ctx-item:hover { background: var(--bg-2); }
.ml-ctx-item > i:first-child { width: 16px; text-align: center; color: var(--fg-3); font-size: 12px; }
.ml-ctx-item:hover > i:first-child { color: var(--fg); }
.ml-ctx-item.is-danger { color: var(--err); }
.ml-ctx-item.is-danger > i:first-child { color: var(--err); }
.ml-ctx-item.is-danger:hover { background: rgba(248,113,113,.08); }
.ml-ctx-item .ml-ctx-arrow { margin-left: auto; font-size: 10px; color: var(--fg-4); }
.ml-ctx-item .ml-ctx-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ml-ctx-sep { height: 1px; background: var(--line-soft); margin: 4px 8px; }
.ml-ctx-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-4); padding: 8px 12px 4px; }
.ml-ctx-check { margin-left: auto; color: var(--acc); font-size: 11px; }

/* Account kebab (zobrazí sa na hover) */
.ml-account { position: relative; }
.ml-account-kebab {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  background: var(--bg-1); border: 1px solid var(--line);
  color: var(--fg-3); border-radius: 7px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  font-size: 11px; z-index: 2;
}
.ml-account:hover .ml-account-kebab { display: inline-flex; }
.ml-account:hover .ml-account-check { display: none; }
.ml-account-kebab:hover { background: var(--bg-2); color: var(--fg); }

/* ─── MOBILE ─────────────────────────────────────────────────────── */
.ml-mob-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  z-index: 40;
}
.ml-mob-backdrop.open { display: block; }
.ml-mob-menu { display: none; }

@media (max-width: 900px) {
  .ml-shell { grid-template-columns: 1fr; border-radius: 0; height: calc(100vh - 64px); }
  .ml-side {
    position: absolute;
    inset: 0 auto 0 0;
    width: 280px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--d-3) var(--e-out);
    box-shadow: 8px 0 28px rgba(0,0,0,.3);
  }
  .ml-shell.side-open .ml-side { transform: translateX(0); }
  .ml-mob-menu { display: inline-flex; }
  .ml-fab { display: inline-flex; }
  .ml-tabs { padding: 0 6px; overflow-x: auto; }
  .ml-tab { padding: 12px 12px; flex-shrink: 0; }
  .ml-row {
    grid-template-columns: auto 36px 1fr auto;
    padding: 0 14px;
  }
  .ml-row-check, .ml-row-star { display: none; }
  .ml-row-from { flex: 0 0 110px; font-size: 12.5px; }
  .ml-row-content { font-size: 12.5px; }
  .ml-toolbar-search { max-width: none; }
  .ml-toolbar-right .ml-pager-info { display: none; }
  .ml-composer-popup {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}
@media (max-width: 560px) {
  .ml-row-from { display: none; }
  .ml-reader-body { padding: 18px 14px; }
}

/* ─── BULK ACTIONS BAR ─────────────────────────────────────────────── */
.ml-bulk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--acc-soft);
  border-bottom: 1px solid var(--line-acc);
  animation: mlBulkSlide var(--d-2) var(--e-out);
}
@keyframes mlBulkSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.ml-bulk-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--acc);
  font-weight: 600;
  flex-shrink: 0;
}
.ml-bulk-count {
  background: var(--acc);
  color: #fff;
  padding: 2px 9px;
  border-radius: 99px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  min-width: 24px;
  text-align: center;
}
.ml-bulk-actions {
  display: inline-flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.ml-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.ml-bulk-btn:hover {
  background: var(--bg-2);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.ml-bulk-btn-danger { color: var(--err); border-color: rgba(248,113,113,.3); }
.ml-bulk-btn-danger:hover { background: rgba(248,113,113,.08); border-color: var(--err); }
.ml-bulk-cancel {
  margin-left: auto;
  padding: 0;
  width: 32px;
  justify-content: center;
}
@media (max-width: 700px) {
  .ml-bulk-btn span { display: none; }
  .ml-bulk-btn { padding: 0; width: 32px; justify-content: center; }
}

/* ─── ACCOUNT WIZARD MODAL ─────────────────────────────────────────── */
.ml-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-2);
}
.ml-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.ml-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 60px);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  z-index: 210;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-2), transform var(--d-2) var(--e-out);
  overflow: hidden;
}
.ml-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.ml-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--acc-soft), transparent);
}
.ml-modal-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
}
.ml-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.ml-modal-foot {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ml-wiz-step { display: none; }
.ml-wiz-active { display: block; animation: fadeUp var(--d-3) var(--e-out); }
.ml-wiz-sub {
  color: var(--fg-3);
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}
.ml-wiz-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.ml-wiz-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.ml-wiz-inp {
  width: 100%;
  height: 40px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 14px;
  color: var(--fg);
  font-size: 13.5px;
  outline: none;
  transition: all var(--d-1);
  font-family: inherit;
}
.ml-wiz-inp:focus {
  border-color: var(--line-acc);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
select.ml-wiz-inp { cursor: pointer; }
.ml-wiz-hint {
  font-size: 11px;
  color: var(--fg-4);
  margin-top: 5px;
  line-height: 1.4;
}
.ml-wiz-advanced { margin-top: 8px; }
.ml-wiz-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  color: var(--acc);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}
.ml-wiz-toggle:hover { color: var(--fg); }
.ml-wiz-adv-body {
  margin-top: 8px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.ml-wiz-section-h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin: 4px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.ml-wiz-section-h:not(:first-child) { margin-top: 16px; }
.ml-wiz-row-grid {
  display: grid;
  grid-template-columns: 1fr 100px 110px;
  gap: 8px;
}
.ml-wiz-row-grid .ml-wiz-row { margin-bottom: 10px; }
.ml-wiz-status {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 8px;
  display: none;
}
.ml-wiz-status.is-ok {
  display: block;
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.3);
  color: var(--ok);
}
.ml-wiz-status.is-err {
  display: block;
  background: rgba(248,113,113,.08);
  border: 1px solid rgba(248,113,113,.3);
  color: var(--err);
}
.ml-wiz-status.is-loading {
  display: block;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
}

/* ─── POPOVER (move-to-folder menu) ────────────────────────────────── */
.ml-popover {
  position: fixed;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  min-width: 220px;
  z-index: 220;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
  display: none;
}
.ml-popover.is-open { display: block; animation: fadeUp var(--d-2) var(--e-out); }
.ml-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--d-1);
}
.ml-popover-item:hover { background: var(--bg-2); }
.ml-popover-item i { width: 16px; text-align: center; color: var(--fg-3); }
.ml-popover-sep { height: 1px; background: var(--line-soft); margin: 4px 0; }

/* ─── LEGACY .mail-* (deprecated, kept neutralized in case v2 mail.js elements still render) ─── */
.mail-wrap, .mail-sidebar, .mail-list-wrap, .mail-reader, .mail-composer,
.mail-mob-backdrop, .mail-folders, .mail-folder, .mail-toolbar, .mail-search,
.mail-row, .mail-att-chips, .mail-bulk-bar, .mail-check, .mail-ai-draft-btn,
.mail-mob-menu-btn, .mail-viewstyle, .mail-vs-btn, .mail-list, .mail-empty,
.mail-section-title, .mail-im-btn, .mail-inbox-mode, .mail-accounts, .mail-add-btn,
.mail-sb-head, .mail-folder-badge { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════
   CALENDAR & TASKS — v3 redesign
   ═══════════════════════════════════════════════════════════════════════ */
#sec-calendar { padding: 0 !important; }
#sec-calendar.sec { padding: 0; }

body.app--fullsec #sec-calendar.active {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
@supports selector(:has(*)) {
  .app__main:has(#sec-calendar.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-calendar.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-calendar.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}

/* ── Shell ─────────────────────────────────────────────────── */
.ca-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--bg-0);
  border: 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.ca-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px 14px;
}
.ca-side::-webkit-scrollbar { width: 6px; }
.ca-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.ca-side-title { margin-bottom: 16px; }
.ca-side-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acc);
  display: block;
  margin-bottom: 4px;
}
.ca-side-h {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.01em;
}
.ca-new-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(74,118,74,.40) !important; }
.ca-new-btn:active { transform: translateY(1px); }
.ca-side-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  padding: 14px 6px 8px;
}

/* View nav */
.ca-views { display: flex; flex-direction: column; gap: 2px; }
.ca-view {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all var(--d-1);
}
.ca-view:hover { background: var(--bg-2); color: var(--fg); }
.ca-view.is-active {
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 700;
}
.ca-view-ico { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.ca-view.is-active .ca-view-ico { color: var(--acc); }

/* Period toggle (vertical in sidebar) */
.cal-period-tog,
.ca-period-tog {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: transparent;
  padding: 0;
}
.cal-period-s {
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--d-1);
}
.cal-period-s:hover { background: var(--bg-3); color: var(--fg); }
.cal-period-s.active {
  background: var(--acc-soft);
  color: var(--acc);
  border-color: var(--line-acc);
}

/* Filters */
.ca-filters { display: flex; flex-direction: column; }
.ca-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  display: block;
  margin-bottom: 5px;
}
.ca-select,
.ca-filters select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--d-1);
}
.ca-select:focus { outline: none; border-color: var(--line-acc); }

/* Categories list */
.ca-cats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ca-cats-manage {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 12px;
  transition: all var(--d-1);
}
.ca-cats-manage:hover { background: var(--bg-2); color: var(--acc); }
.ca-cats { display: flex; flex-direction: column; gap: 2px; }
.ca-cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--d-1);
}
.ca-cat-item:hover { background: var(--bg-2); }
.ca-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ca-cat-count { margin-left: auto; font-size: 11px; color: var(--fg-4); font-family: 'JetBrains Mono', monospace; }

/* Sidebar footer / legend */
.ca-side-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.ca-legend-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  margin-bottom: 10px;
}
.ca-legend { display: flex; flex-direction: column; gap: 7px; }
.ca-legend-item { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: var(--fg-2); }
.ca-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Main ──────────────────────────────────────────────────── */
.ca-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-0);
  overflow: hidden;
}
.ca-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  flex-shrink: 0;
}
.ca-tb-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--d-1);
}
.ca-tb-btn:hover { background: var(--bg-2); color: var(--fg); }
.ca-toolbar-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
}
.ca-toolbar-spacer { flex: 1; }
.ca-nav { display: inline-flex; align-items: center; gap: 2px; background: var(--bg-2); border-radius: 10px; padding: 3px; }
.ca-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--d-1);
}
.ca-nav-btn:hover { background: var(--bg-1); color: var(--fg); }
.ca-nav-label {
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  min-width: 140px;
  text-align: center;
}
.ca-today-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.ca-today-btn:hover { background: var(--bg-3); border-color: var(--line); }
.ca-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
}

/* Task modal form helpers */
.ca-form { display: flex; flex-direction: column; gap: 14px; }
.ca-form-full { display: flex; flex-direction: column; }
.ca-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ca-form-2 > div { display: flex; flex-direction: column; }
.ca-form-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  margin-bottom: 6px;
}

.cal-body-scroll { flex: 1; overflow: auto; min-height: 0; }

.ca-mob-menu { display: none; }
@media (max-width: 900px) {
  .ca-shell { grid-template-columns: 1fr; }
  .ca-side {
    position: absolute;
    inset: 0 auto 0 0;
    width: 280px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--d-3) var(--e-out);
    box-shadow: 8px 0 28px rgba(0,0,0,.3);
  }
  .ca-shell.side-open .ca-side { transform: translateX(0); }
  .ca-mob-menu { display: inline-flex; }
}

/* === MONTH VIEW ====================================================== */
/* Month grid fills the content area: heads pinned on top, cells scroll. */
#calMonthWrap { height: 100%; min-height: 0; }
.cal-month-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-1);
  overflow: hidden;
}
.cal-month-heads,
.cal-day-heads {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.cal-month-head,
.cal-day-heads > div {
  padding: 11px 12px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  border-right: 1px solid var(--line-soft);
  text-align: center;
}
.cal-month-head:last-child,
.cal-day-heads > div:last-child { border-right: 0; }
.cal-month-head.is-weekend { color: var(--err); opacity: 0.8; }
.cal-day-head-empty { background: transparent; }

.cal-month-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(118px, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.cal-mo-cell {
  position: relative;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 9px 6px;
  min-height: 118px;
  cursor: pointer;
  transition: background var(--d-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--bg-1);
}
.cal-mo-cell:nth-child(7n) { border-right: none; }
/* Hover na bunke je zbytočný — vizuálny šum bez prínosu. */
/* Jednotné pozadie pre všetky dni — žiadny „počmáraný" checkerboard.
   Iný mesiac: rovnaké pozadie, len stlmené číslo + chip. */
.cal-mo-cell.is-other { background: var(--bg-1); }
.cal-mo-cell.is-other .cal-mo-num { color: var(--fg-4); opacity: 0.55; }
.cal-mo-cell.is-other .cal-mo-chip { opacity: 0.5; }
.cal-mo-cell.is-today { background: var(--acc-soft); }
.cal-mo-cell.is-today .cal-mo-num {
  background: var(--acc);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.cal-mo-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  align-self: flex-end;
  line-height: 1;
  padding: 2px;
}
.cal-mo-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  overflow: hidden;
}
.cal-mo-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--fg);
  background: var(--bg-2);
  cursor: pointer;
  transition: transform var(--d-1), filter var(--d-1);
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
.cal-mo-chip:hover { transform: translateX(2px); filter: brightness(1.08); }
/* Status-coloured chip backgrounds (ako vo v2) */
.cal-mo-chip.ev-todo        { background: rgba(59,130,246,.16);  color: #1d4ed8; }
.cal-mo-chip.ev-in_progress { background: rgba(245,158,11,.16);  color: #b45309; }
.cal-mo-chip.ev-review      { background: rgba(139,92,246,.16);  color: #6d28d9; }
.cal-mo-chip.ev-done        { background: rgba(34,197,94,.14);   color: #15803d; opacity: .62; text-decoration: line-through; }
[data-theme="dark"] .cal-mo-chip.ev-todo        { color: #93c5fd; }
[data-theme="dark"] .cal-mo-chip.ev-in_progress { color: #fcd34d; }
[data-theme="dark"] .cal-mo-chip.ev-review      { color: #c4b5fd; }
[data-theme="dark"] .cal-mo-chip.ev-done        { color: #86efac; }
.cal-mo-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-mo-chip-title {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.cal-mo-more {
  font-size: 11.5px;
  color: var(--fg-3);
  cursor: pointer;
  padding: 2px 6px;
  font-weight: 600;
}
.cal-mo-more:hover { color: var(--acc); text-decoration: underline; }

/* === DAY/WEEK VIEW (time grid) ======================================= */
.cal-time-grid {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  min-height: 100%;
}
.cal-time-grid.cal-day-1 { grid-template-columns: 56px 1fr; }
.cal-time-grid.cal-day-7 { grid-template-columns: 56px repeat(7, 1fr); }

.cal-day-head {
  padding: 8px 10px;
  text-align: center;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.cal-day-head.is-today { background: var(--acc-soft); }
.cal-dow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.cal-day-head.is-today .cal-dow { color: var(--acc); }
.cal-dnum {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin-top: 2px;
}
.cal-day-head.is-today .cal-dnum {
  background: var(--acc);
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin: 2px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.cal-time-col {
  border-right: 1px solid var(--line);
  background: var(--bg-1);
  position: relative;
}
.cal-time-cell {
  position: relative;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10px;
  color: var(--fg-4);
  padding: 2px 6px;
  text-align: right;
}

.cal-day-col {
  position: relative;
  border-right: 1px solid var(--line-soft);
  background: var(--bg-0);
}
.cal-day-col.is-today { background: var(--acc-soft); }
.cal-h-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-soft);
  pointer-events: none;
}

/* Time-grid events (absolutely positioned) */
.cal-day-col .cal-event {
  position: absolute;
  left: 4px;
  right: 4px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--d-1);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  z-index: 2;
}
.cal-day-col .cal-event:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transform: translateY(-1px);
  z-index: 3;
}
.cal-day-col .cal-event.ev-todo        { border-left-color: #3b82f6; }
.cal-day-col .cal-event.ev-in_progress { border-left-color: #f59e0b; }
.cal-day-col .cal-event.ev-review      { border-left-color: #8b5cf6; }
.cal-day-col .cal-event.ev-done        { border-left-color: var(--ok); opacity: 0.7; }

/* Generic event chip (month + agenda contexts) */
.cal-event {
  display: block;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 10.5px;
  margin-top: 2px;
  background: var(--acc-soft);
  color: var(--acc);
  border-left: 2px solid var(--acc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.cal-event-time {
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.cal-event-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

/* === AGENDA VIEW ====================================================== */
.cal-agenda-list {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cal-agenda-day {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  padding: 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: all var(--d-1);
}
.cal-agenda-day.today {
  border-color: var(--line-acc);
  background: var(--acc-soft);
}
.cal-agenda-date {
  text-align: center;
  padding: 4px 0;
  border-right: 1px solid var(--line-soft);
}
.cal-agenda-day.today .cal-agenda-date { border-right-color: var(--line-acc); }
.cal-agenda-daynum {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.cal-agenda-day.today .cal-agenda-daynum { color: var(--acc); }
.cal-agenda-daymeta { margin-top: 4px; }
.cal-agenda-dayname {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fg-3);
  letter-spacing: 0.06em;
}
.cal-agenda-day.today .cal-agenda-dayname { color: var(--acc); }
.cal-agenda-daysub {
  font-size: 11px;
  color: var(--fg-4);
  margin-top: 2px;
}
.cal-agenda-tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-agenda-empty {
  font-size: 12.5px;
  color: var(--fg-4);
  padding: 8px 0;
  font-style: italic;
}
.cal-agenda-task {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--d-1);
  position: relative;
  overflow: hidden;
}
.cal-agenda-task:hover {
  background: var(--bg-3);
  border-color: var(--line);
  transform: translateX(2px);
}
.cal-agenda-task.done {
  opacity: 0.55;
}
.cal-agenda-task.done .cal-agenda-task-title { text-decoration: line-through; }
.cal-agenda-task.overdue { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.06); }
.cal-agenda-task-bar {
  width: 3px;
  background: var(--acc);
  border-radius: 999px;
  flex-shrink: 0;
}
.cal-agenda-task-body { flex: 1; min-width: 0; }
.cal-agenda-task-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.35;
}
.cal-agenda-task-meta {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 3px;
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cal-agenda-task-col {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  padding: 1px 6px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.cal-agenda-task-assignee { color: var(--fg-3); }

/* Action chips (notif overlay etc.) */
.cal-act-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
}
.cal-act-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex-shrink: 0; }
.cal-act-info { flex: 1; min-width: 0; }
.cal-act-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.cal-act-meta { font-size: 11px; color: var(--fg-3); margin-top: 1px; }
.cal-act-chip {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg-3);
}

/* Detail popover */
.cal-detail {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.3);
}
.cal-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.cal-detail-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-detail-title { font-size: 14px; font-weight: 700; color: var(--fg); }
.cal-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--fg-2);
}
.cal-detail-row i { color: var(--fg-3); width: 14px; text-align: center; }

/* Notifications */
.cal-notif {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
}
.cal-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.cal-notif-body { font-size: 12px; color: var(--fg-2); }
.cal-notif-plat { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--fg-3); }
.cal-notif-time { font-size: 10.5px; color: var(--fg-4); }
.cn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); display: inline-block; flex-shrink: 0; }

/* FAB */
.cal-fab-new {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grad-acc);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 12px 28px rgba(238,29,36,.35);
  transition: all var(--d-1);
  z-index: 10;
}
.cal-fab-new:hover { transform: scale(1.08); }

/* Agenda */
.cal-agenda-list { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cal-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all var(--d-1);
}
.cal-card:hover { border-color: var(--line-acc); }
.cal-sec-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 8px 4px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.cal-sec-actions { display: inline-flex; gap: 6px; }

/* Task drawer */
.task-drawer-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 60;
  backdrop-filter: blur(6px);
  display: none;
}
.task-drawer-bg.open { display: block; }
.task-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 100vw);
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform var(--d-3) var(--e-out);
  z-index: 65;
  display: flex;
  flex-direction: column;
}
.task-drawer.open { transform: translateX(0); }
.task-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.task-drawer-hdr-title { font-size: 15px; font-weight: 700; color: var(--fg); }
.task-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }

/* ═══════════════════════════════════════════════════════════════════════
   AGENTS — v3 redesign
   ═══════════════════════════════════════════════════════════════════════ */
.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.agent-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  transition: all var(--d-1);
  position: relative;
}
.agent-card:hover { border-color: var(--line-acc); transform: translateY(-2px); }
.ag-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.ag-ava {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--grad-acc);
}
.ag-name { font-size: 14px; font-weight: 700; color: var(--fg); line-height: 1.25; }
.ag-model { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.ag-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: auto;
}
.ag-status-badge.active   { background: rgba(52,211,153,.1); color: var(--ok); }
.ag-status-badge.paused   { background: rgba(251,191,36,.1); color: var(--warn); }
.ag-status-badge.draft    { background: var(--bg-2); color: var(--fg-3); }
.ag-status-badge.error    { background: rgba(248,113,113,.1); color: var(--err); }
.ag-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ag-desc {
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ag-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.ag-tag {
  font-size: 10.5px;
  background: var(--bg-2);
  color: var(--fg-2);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
}
.ag-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-btn {
  flex: 1;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.ag-btn:hover { background: var(--bg-3); border-color: var(--line-strong); }
.ag-btn.primary { background: var(--acc-soft); color: var(--acc); border-color: var(--line-acc); }
.ag-btn.primary:hover { background: var(--acc); color: #fff; }

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--fg-4);
}
.empty-state i { font-size: 36px; margin-bottom: 10px; opacity: 0.5; }
.empty-state p { font-size: 13px; }

/* Skill checkbox in agent edit modal */
.ag-skill-cb {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--d-1);
  margin-bottom: 6px;
}
.ag-skill-cb:hover { background: var(--bg-3); }
.ag-skill-cb input { margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   MARKETING / NEWSLETTER / KPI — v3 redesign
   ═══════════════════════════════════════════════════════════════════════ */

/* KPI cards (used by marketing.php, mkt-stats.php, dashboard.php) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.kpi-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all var(--d-1);
}
.kpi-card:hover { border-color: var(--line-acc); }
.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.kpi-body { flex: 1; min-width: 0; }
.kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.kpi-val {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.kpi-meta { font-size: 11px; color: var(--fg-3); margin-top: 2px; }

.stat-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.stat-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: var(--acc-soft);
  color: var(--acc);
  flex-shrink: 0;
}
.stat-lbl { font-size: 11px; color: var(--fg-3); text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; }
.stat-num { font-size: 18px; font-weight: 700; color: var(--fg); margin-top: 1px; }

.mkt-stats, .mkt-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

/* Newsletter */
.nl-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.nl-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
  flex-wrap: wrap;
}
.nl-hdr-actions { display: inline-flex; gap: 6px; }
.nl-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.nl-tab {
  padding: 8px 16px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--d-1);
}
.nl-tab:hover { color: var(--fg); }
.nl-tab.active { color: var(--acc); border-bottom-color: var(--acc); }
.nl-pane { padding: 14px 18px; }
.nl-list { display: flex; flex-direction: column; gap: 8px; }
.nl-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.nl-stats { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 0; }
.nl-stat {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.nl-stat-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--fg-3); letter-spacing: 0.06em; }
.nl-stat-val { font-size: 18px; font-weight: 700; color: var(--fg); margin-top: 2px; }
.nl-settings { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.nl-settings-h { font-size: 14px; font-weight: 700; color: var(--fg); margin: 6px 0; }
.nl-settings-p { font-size: 12.5px; color: var(--fg-3); line-height: 1.5; }
.nl-set-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.nl-set-hint { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.nl-copy-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nl-copy-wrap .finp { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.nl-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.nl-steps > * {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--fg-3);
  border: 1px solid var(--line);
}
.nl-steps > .active { background: var(--acc-soft); color: var(--acc); border-color: var(--line-acc); }
.nl-steps > .done { background: rgba(52,211,153,.1); color: var(--ok); border-color: rgba(52,211,153,.22); }

/* ═══════════════════════════════════════════════════════════════════════
   CONTENT STUDIO + MEDIA — v3 redesign
   ═══════════════════════════════════════════════════════════════════════ */
.cs-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  height: calc(100vh - 64px - 24px);
  min-height: 500px;
}
.cs-list {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cs-list-filter { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.cs-filter-btn {
  padding: 5px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.cs-filter-btn.active { background: var(--acc-soft); color: var(--acc); border-color: var(--line-acc); }
.cs-list-items { flex: 1; overflow-y: auto; padding: 8px; }
.cs-list-empty { padding: 40px 20px; text-align: center; color: var(--fg-4); font-size: 12.5px; }
.cs-empty { padding: 60px 20px; text-align: center; color: var(--fg-4); }
.cs-empty i { font-size: 38px; opacity: 0.5; margin-bottom: 12px; }

.cs-main { background: var(--bg-0); display: flex; flex-direction: column; min-width: 0; }
.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  gap: 12px;
  flex-wrap: wrap;
}
.cs-header-actions { display: inline-flex; gap: 6px; }
.cs-stats { display: flex; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.cs-stat {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.cs-stat-l { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--fg-4); letter-spacing: 0.06em; }
.cs-stat-n { font-size: 16px; font-weight: 700; color: var(--fg); }

/* MEDIA */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  padding: 14px;
}
.media-tile {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--d-1);
  position: relative;
}
.media-tile:hover { border-color: var(--line-acc); transform: translateY(-2px); }
.media-tile img { width: 100%; height: 140px; object-fit: cover; display: block; }
.media-tile-meta {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--fg-3);
  border-top: 1px solid var(--line-soft);
}

.file-list { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--d-1);
}
.file-card:hover { background: var(--bg-2); border-color: var(--line-strong); }
.file-pdf { color: var(--err); font-size: 18px; }

/* ═══════════════════════════════════════════════════════════════════════
   INBOX / TEAM MESSAGES — v3 full-screen redesign (.tm-* classes)
   ═══════════════════════════════════════════════════════════════════════ */
#sec-inbox { padding: 0 !important; }
#sec-inbox.sec { padding: 0; }
body.app--fullsec #sec-inbox.active { display: block; position: absolute; inset: 0; overflow: hidden; }
@supports selector(:has(*)) {
  .app__main:has(#sec-inbox.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-inbox.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-inbox.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}
.tm-shell {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 340px 1fr;
  background: var(--bg-0);
  border: 0; border-top: 1px solid var(--line);
  overflow: hidden;
}
.tm-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.tm-me { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); position: relative; }
.tm-me-ava { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; position: relative; flex-shrink: 0; }
.tm-me-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tm-me-dot { position: absolute; bottom: -1px; right: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--ok); border: 2.5px solid var(--bg-1); box-shadow: 0 0 0 0.5px var(--ok); }
.tm-me-body { flex: 1; min-width: 0; }
.tm-me-name { font-size: 14px; font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-me-status { font-size: 11px; color: var(--ok); }
.tm-me-pop { position: absolute; top: 56px; right: 14px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 6px; min-width: 180px; z-index: 30; box-shadow: 0 12px 32px rgba(0,0,0,.4); display: none; }
.tm-me-pop.is-open { display: block; animation: fadeUp var(--d-2) var(--e-out); }
.tm-me-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: transparent; border: 0; color: var(--fg); font-size: 13px; border-radius: 8px; cursor: pointer; text-align: left; }
.tm-me-pop button:hover { background: var(--bg-2); }
.tm-me-pop button i { width: 16px; text-align: center; color: var(--fg-3); }
.tm-icon-btn { width: 36px; height: 36px; background: transparent; border: 0; color: var(--fg-2); border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: all var(--d-1); flex-shrink: 0; }
.tm-icon-btn:hover { background: var(--bg-2); color: var(--fg); }
.tm-new-btn { display: flex; align-items: center; gap: 12px; margin: 12px 14px; height: 48px; padding: 0 18px; background: var(--grad-acc); color: #fff; border: 0; border-radius: 14px; font-family: 'Space Grotesk', Inter, sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(74,118,74,.30); transition: all var(--d-1); }
.tm-new-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.tm-new-ico { width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.tm-tabs { display: flex; gap: 2px; padding: 0 12px 10px; border-bottom: 1px solid var(--line-soft); }
.tm-tab { flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; background: transparent; border: 0; color: var(--fg-3); font-size: 10.5px; font-weight: 600; border-radius: 9px; cursor: pointer; transition: all var(--d-1); position: relative; }
.tm-tab i { font-size: 15px; }
.tm-tab:hover { background: var(--bg-2); color: var(--fg); }
.tm-tab.is-active { background: var(--acc-soft); color: var(--acc); }
.tm-tab-badge { position: absolute; top: 4px; right: 50%; margin-right: -22px; background: var(--err); color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.tm-search { display: flex; align-items: center; gap: 8px; margin: 10px 14px; height: 38px; padding: 0 12px; background: var(--bg-2); border: 1px solid transparent; border-radius: 11px; transition: all var(--d-1); }
.tm-search:focus-within { background: var(--bg-1); border-color: var(--line-acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.tm-search i { color: var(--fg-3); font-size: 13px; }
.tm-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--fg); font-size: 13px; min-width: 0; font-family: inherit; }
.tm-list { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.tm-list::-webkit-scrollbar { width: 6px; }
.tm-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.tm-list-loading, .tm-msgs-loading { padding: 40px 20px; text-align: center; color: var(--fg-3); font-size: 13px; }
.tm-list-empty { padding: 50px 20px; text-align: center; color: var(--fg-3); }
.tm-list-empty i { font-size: 32px; opacity: 0.5; display: block; margin-bottom: 10px; }
.tm-list-empty-sub { font-size: 11.5px; color: var(--fg-4); margin-top: 4px; }
.tm-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: transparent; border: 0; border-radius: 12px; cursor: pointer; transition: background var(--d-1); text-align: left; margin-bottom: 1px; }
.tm-item:hover { background: var(--bg-2); }
.tm-item.is-active { background: var(--acc-soft); }
.tm-item-ava { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; position: relative; flex-shrink: 0; }
.tm-item-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tm-item-dot { position: absolute; bottom: 0; right: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--ok); border: 2.5px solid var(--bg-1); box-shadow: 0 0 0 0.5px var(--ok); }
.tm-item.is-active .tm-item-dot { border-color: var(--acc-soft); }
.tm-item-body { flex: 1; min-width: 0; }
.tm-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tm-item-name { font-size: 13.5px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-item.is-unread .tm-item-name { font-weight: 700; }
.tm-item-time { font-size: 10.5px; color: var(--fg-4); flex-shrink: 0; white-space: nowrap; }
.tm-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.tm-item-preview { font-size: 12px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tm-item.is-unread .tm-item-preview { color: var(--fg-2); font-weight: 500; }
.tm-item-you { color: var(--fg-4); }
.tm-item-badge { background: var(--acc); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }
.tm-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-0); }
.tm-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; }
.tm-empty-ico { width: 88px; height: 88px; border-radius: 26px; background: var(--bg-2); color: var(--fg-3); display: inline-flex; align-items: center; justify-content: center; font-size: 38px; margin-bottom: 18px; }
.tm-empty-title { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 20px; font-weight: 700; color: var(--fg); margin-bottom: 8px; }
.tm-empty-sub { font-size: 13.5px; color: var(--fg-3); max-width: 380px; line-height: 1.5; margin-bottom: 20px; }
.tm-quick-new { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; background: var(--grad-acc); color: #fff; border: 0; border-radius: 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(74,118,74,.28); transition: all var(--d-1); }
.tm-quick-new:hover { transform: translateY(-1px); filter: brightness(1.06); }
.tm-conv { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tm-conv-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg-1); min-height: 64px; }
.tm-mob-back { display: none; }
.tm-conv-ava { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; overflow: hidden; }
.tm-conv-ava img { width: 100%; height: 100%; object-fit: cover; }
.tm-conv-info { flex: 1; min-width: 0; }
.tm-conv-name { font-size: 15px; font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-conv-status { font-size: 11.5px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 6px; margin-top: 1px; }
.tm-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.tm-conv-actions { display: inline-flex; gap: 4px; }
.tm-msgs { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 3px; }
.tm-msgs::-webkit-scrollbar { width: 8px; }
.tm-msgs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.tm-msgs-empty { margin: auto; text-align: center; }
.tm-msgs-empty-ava { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 26px; }
.tm-msgs-empty-name { font-size: 17px; font-weight: 700; color: var(--fg); margin-bottom: 6px; }
.tm-msgs-empty-sub { font-size: 13px; color: var(--fg-3); }
.tm-date-sep { text-align: center; margin: 16px 0 10px; }
.tm-date-sep span { background: var(--bg-2); color: var(--fg-3); font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 99px; }
.tm-bubble-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.tm-bubble-row.is-grouped { margin-top: 2px; }
.tm-bubble-row.is-mine { flex-direction: row-reverse; }
.tm-bubble-ava { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 11px; flex-shrink: 0; overflow: hidden; }
.tm-bubble-ava img { width: 100%; height: 100%; object-fit: cover; }
.tm-bubble-ava-spacer { width: 30px; flex-shrink: 0; }
.tm-bubble-wrap { max-width: 66%; min-width: 0; }
.tm-bubble-sender { font-size: 11px; font-weight: 700; color: var(--acc); margin: 0 0 3px 12px; }
.tm-bubble { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 16px; padding: 9px 13px; font-size: 13.5px; line-height: 1.45; color: var(--fg); position: relative; word-wrap: break-word; }
.tm-bubble-row.is-mine .tm-bubble { background: var(--grad-acc); color: #fff; border-color: transparent; border-bottom-right-radius: 5px; }
.tm-bubble-row:not(.is-mine) .tm-bubble { border-bottom-left-radius: 5px; }
.tm-bubble-text { white-space: pre-wrap; }
.tm-bubble-text a { color: inherit; text-decoration: underline; }
.tm-bubble-time { display: block; font-size: 9.5px; opacity: 0.6; margin-top: 4px; text-align: right; }
.tm-bubble-row.is-mine .tm-bubble-time { color: rgba(255,255,255,.85); }
.tm-att-img { display: block; margin-bottom: 6px; border-radius: 10px; overflow: hidden; max-width: 240px; }
.tm-att-img img { width: 100%; display: block; }
.tm-att-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(0,0,0,.06); border-radius: 10px; margin-bottom: 6px; text-decoration: none; color: inherit; }
.tm-bubble-row.is-mine .tm-att-file { background: rgba(255,255,255,.15); }
.tm-att-file i { font-size: 18px; }
.tm-att-file-name { flex: 1; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-att-file-size { font-size: 10.5px; opacity: 0.7; }
.tm-composer { border-top: 1px solid var(--line); background: var(--bg-1); padding: 10px 16px; position: relative; }
.tm-att-strip { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 8px; }
.tm-att-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: 11.5px; color: var(--fg-2); }
.tm-att-chip button { background: transparent; border: 0; color: var(--fg-3); cursor: pointer; padding: 0; }
.tm-att-chip button:hover { color: var(--err); }
.tm-composer-row { display: flex; align-items: flex-end; gap: 6px; }
.tm-input { flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; color: var(--fg); font-size: 13.5px; line-height: 1.4; resize: none; outline: none; font-family: inherit; min-height: 42px; max-height: 140px; transition: all var(--d-1); }
.tm-input:focus { border-color: var(--line-acc); background: var(--bg-1); box-shadow: 0 0 0 3px var(--acc-soft); }
.tm-voice-btn.is-recording { background: rgba(248,113,113,.15); color: var(--err); animation: pulse 1.4s infinite; }
.tm-send-btn { width: 42px; height: 42px; border-radius: 12px; background: var(--grad-acc); color: #fff; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; transition: all var(--d-1); }
.tm-send-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.tm-emoji-pop { position: absolute; bottom: 60px; left: 16px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: none; grid-template-columns: repeat(8, 1fr); gap: 2px; z-index: 30; box-shadow: 0 14px 40px rgba(0,0,0,.4); max-width: 320px; }
.tm-emoji-pop.is-open { display: grid; }
.tm-emoji-pop button { background: transparent; border: 0; font-size: 19px; cursor: pointer; padding: 5px; border-radius: 8px; }
.tm-emoji-pop button:hover { background: var(--bg-2); }
.tm-new-tabs { display: flex; gap: 6px; margin-bottom: 14px; background: var(--bg-2); border-radius: 11px; padding: 4px; }
.tm-new-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; background: transparent; border: 0; color: var(--fg-3); font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all var(--d-1); }
.tm-new-tab.is-active { background: var(--bg-1); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.tm-user-picker { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.tm-pick-user { display: flex; align-items: center; gap: 12px; padding: 9px 10px; background: transparent; border: 0; border-radius: 10px; cursor: pointer; text-align: left; transition: background var(--d-1); }
.tm-pick-user:hover { background: var(--bg-2); }
.tm-pick-user.is-selected { background: var(--acc-soft); }
.tm-pick-ava { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; overflow: hidden; }
.tm-pick-ava img { width: 100%; height: 100%; object-fit: cover; }
.tm-pick-body { flex: 1; min-width: 0; }
.tm-pick-name { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.tm-pick-mail { font-size: 11.5px; color: var(--fg-3); margin-top: 1px; }
.tm-pick-check { width: 24px; text-align: center; color: var(--acc); }
.tm-mob-fab { display: none; position: fixed; top: calc(var(--top-h) + 12px); left: 12px; width: 40px; height: 40px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); cursor: pointer; z-index: 48; align-items: center; justify-content: center; }
@media (max-width: 900px) {
  .tm-shell { grid-template-columns: 1fr; }
  .tm-side { position: absolute; inset: 0 auto 0 0; width: 320px; z-index: 50; transform: translateX(-100%); transition: transform var(--d-3) var(--e-out); box-shadow: 8px 0 28px rgba(0,0,0,.3); }
  .tm-shell.side-open .tm-side { transform: translateX(0); }
  .tm-mob-fab { display: inline-flex; }
  .tm-shell.conv-open .tm-mob-fab { display: none; }
  .tm-mob-back { display: inline-flex; }
  .tm-bubble-wrap { max-width: 82%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FILES / MEDIA — v3 Drive-style redesign (.fl-* classes)
   ═══════════════════════════════════════════════════════════════════════ */
#sec-media { padding: 0 !important; }
#sec-media.sec { padding: 0; }

body.app--fullsec #sec-media.active {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
@supports selector(:has(*)) {
  .app__main:has(#sec-media.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-media.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-media.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}

.fl-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 260px 1fr 0;
  gap: 0;
  background: var(--bg-0);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}
.fl-shell.has-preview { grid-template-columns: 260px 1fr 360px; }

.fl-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 12px 12px;
}
.fl-side::-webkit-scrollbar { width: 6px; }
.fl-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

.fl-scopes { display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; }
.fl-scope {
  display: flex; align-items: center; gap: 14px;
  height: 36px; padding: 0 16px 0 22px;
  background: transparent; border: 0;
  border-radius: 0 99px 99px 0;
  color: var(--fg-2); font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: all var(--d-1);
  margin-left: -12px; position: relative;
}
.fl-scope:hover { background: var(--bg-2); color: var(--fg); }
.fl-scope.is-active { background: var(--acc-soft); color: var(--acc); font-weight: 700; }
.fl-scope.is-active::before {
  content: ""; position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px; background: var(--acc);
  border-radius: 0 3px 3px 0;
}
.fl-scope-ico { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.fl-scope.is-active .fl-scope-ico { color: var(--acc); }
.fl-scope-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fl-side-section {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-4); padding: 14px 8px 6px;
}

.fl-filters { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.fl-filter {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 10px;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--fg-2); font-size: 12.5px; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: all var(--d-1);
}
.fl-filter:hover { background: var(--bg-2); color: var(--fg); }
.fl-filter.is-active { background: var(--acc-soft); color: var(--fg); }
.fl-filter-ico {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}
.fl-filter-name { flex: 1; }
.fl-filter-count {
  font-size: 10.5px; font-family: 'JetBrains Mono', monospace;
  color: var(--fg-3); font-weight: 700;
}

.fl-foot { margin-top: auto; padding: 12px 4px 4px; border-top: 1px solid var(--line-soft); }
.fl-foot-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0 6px; }
.fl-foot-text { font-size: 11.5px; color: var(--fg-2); font-weight: 600; flex: 1; }
.fl-foot-bar { height: 4px; background: var(--bg-3); border-radius: 99px; overflow: hidden; margin: 0 6px 6px; }
.fl-foot-bar-fill { height: 100%; background: var(--acc); border-radius: 99px; transition: width var(--d-3) var(--e-out); }
.fl-foot-stats { font-size: 10.5px; color: var(--fg-3); padding: 0 6px; font-family: 'JetBrains Mono', monospace; }

/* MAIN */
.fl-main {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: hidden; background: var(--bg-0);
}

.fl-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  min-height: 56px; flex-shrink: 0;
}
.fl-toolbar-left, .fl-toolbar-right { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fl-toolbar-search {
  flex: 1; display: flex; align-items: center;
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0 8px 0 14px;
  height: 38px; max-width: 540px;
  margin: 0 auto;
  transition: all var(--d-1);
}
.fl-toolbar-search:focus-within { background: var(--bg-1); border-color: var(--line-acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.fl-toolbar-search > i { color: var(--fg-3); font-size: 13px; margin-right: 10px; flex-shrink: 0; }
.fl-toolbar-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--fg); font-size: 13.5px; height: 100%; min-width: 0; font-family: inherit; }
.fl-search-clear { width: 28px; height: 28px; background: transparent; border: 0; color: var(--fg-3); border-radius: 7px; cursor: pointer; }
.fl-search-clear:hover { background: var(--bg-3); color: var(--fg); }

.fl-tb-btn {
  width: 36px; height: 36px;
  background: transparent; border: 0;
  color: var(--fg-2); border-radius: 9px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; transition: all var(--d-1);
}
.fl-tb-btn:hover { background: var(--bg-2); color: var(--fg); }

.fl-view-toggle { display: inline-flex; background: var(--bg-2); border-radius: 10px; padding: 3px; gap: 2px; }
.fl-view-btn { width: 32px; height: 30px; background: transparent; border: 0; color: var(--fg-3); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: all var(--d-1); }
.fl-view-btn:hover { color: var(--fg); }
.fl-view-btn.is-active { background: var(--bg-1); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.1); }

.fl-sort {
  height: 36px; padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--fg); font-size: 12.5px; font-weight: 500;
  cursor: pointer; outline: none; font-family: inherit;
}

.fl-bread-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  gap: 12px; flex-shrink: 0; flex-wrap: wrap;
}
.fl-crumbs { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.fl-crumb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: transparent; border: 0;
  color: var(--fg-2);
  font-size: 13px; font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--d-1);
}
.fl-crumb:hover { background: var(--bg-2); color: var(--fg); }
.fl-crumb.is-current { color: var(--fg); font-weight: 700; }
.fl-crumb-sep { color: var(--fg-4); font-size: 10px; margin: 0 2px; }

.fl-page-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.fl-pa-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 12.5px; font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  transition: all var(--d-1);
}
.fl-pa-btn:hover { background: var(--bg-2); border-color: var(--line-strong); }
.fl-pa-btn-acc { background: var(--acc); color: #fff; border-color: var(--acc); box-shadow: 0 2px 8px rgba(74,118,74,.25); }
.fl-pa-btn-acc:hover { background: color-mix(in srgb, var(--acc) 88%, #000); color: #fff; }

.fl-bulk {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: var(--acc-soft);
  border-bottom: 1px solid var(--line-acc);
  flex-shrink: 0;
  animation: mlBulkSlide var(--d-2) var(--e-out);
}
.fl-bulk-info { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--acc); font-weight: 600; }
.fl-bulk-count {
  background: var(--acc); color: #fff;
  padding: 2px 9px; border-radius: 99px;
  font-weight: 800; font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; min-width: 24px; text-align: center;
}
.fl-bulk-actions { display: inline-flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.fl-bulk-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 11px;
  background: var(--bg-1); border: 1px solid var(--line);
  color: var(--fg); border-radius: 8px;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: all var(--d-1);
}
.fl-bulk-btn:hover { background: var(--bg-2); border-color: var(--line-strong); transform: translateY(-1px); }
.fl-bulk-btn-danger { color: var(--err); border-color: rgba(248,113,113,.3); }
.fl-bulk-btn-danger:hover { background: rgba(248,113,113,.08); border-color: var(--err); }
.fl-bulk-cancel { margin-left: auto; padding: 0; width: 32px; justify-content: center; }
@media (max-width: 700px) {
  .fl-bulk-btn span { display: none; }
  .fl-bulk-btn { padding: 0; width: 32px; justify-content: center; }
}

.fl-content { flex: 1; overflow-y: auto; padding: 18px; position: relative; }
.fl-content::-webkit-scrollbar { width: 8px; }
.fl-content::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

.fl-section-h {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-3);
  margin: 4px 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.fl-section-h i { color: var(--fg-4); }
.fl-section-h + .fl-section-h { margin-top: 24px; }

.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 28px; }
.fl-grid.fl-folders { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.fl-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--d-1);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.fl-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.fl-card.is-selected { border-color: var(--acc); background: var(--acc-soft); box-shadow: 0 0 0 2px var(--acc); }
.fl-card.is-folder { flex-direction: row; align-items: center; padding: 14px; gap: 12px; }
.fl-card-folder-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 88%, #fff), var(--acc));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.fl-card-folder-body { flex: 1; min-width: 0; overflow: hidden; }
.fl-card-folder-name {
  font-size: 13.5px; font-weight: 600; color: var(--fg);
  /* Povolíme zalomenie na 2 riadky + lomenie dlhých slov */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
  margin-bottom: 4px;
  min-height: 1.25em;
}
.fl-card-folder-meta { font-size: 11px; color: var(--fg-3); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* Avatary v folder karte — neresizuj-uj telo, daj im flex-shrink */
.fl-card.is-folder .fl-share-stack { flex-shrink: 0; margin-left: 8px; }
.fl-card.is-folder .fl-card-menu-btn { opacity: 0; }
.fl-card.is-folder:hover .fl-card-menu-btn { opacity: 1; }

.fl-card-thumb {
  position: relative; height: 140px;
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}
.fl-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-card-thumb-ico { font-size: 38px; color: var(--fg-3); }
.fl-card-thumb-overlay {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.fl-card-body { padding: 10px 12px 12px; }
.fl-card-name {
  font-size: 12.5px; font-weight: 600; color: var(--fg);
  margin-bottom: 4px; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 32px;
}
.fl-card-meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--fg-3); }
.fl-card-meta-sep { color: var(--fg-4); }

.fl-card-check {
  position: absolute; top: 10px; left: 10px;
  width: 22px; height: 22px;
  border: 2px solid var(--line-strong);
  background: var(--bg-1); border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; transition: opacity var(--d-1);
  z-index: 2; color: transparent; font-size: 10px;
}
.fl-card:hover .fl-card-check, .fl-card.is-selected .fl-card-check { opacity: 1; }
.fl-card.is-selected .fl-card-check { background: var(--acc); border-color: var(--acc); color: #fff; }

.fl-card-menu-btn {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  background: rgba(0,0,0,.55); color: #fff;
  border: 0; border-radius: 8px;
  cursor: pointer;
  opacity: 0; transition: opacity var(--d-1);
  z-index: 2; backdrop-filter: blur(4px);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.fl-card:hover .fl-card-menu-btn { opacity: 1; }
.fl-card-menu-btn:hover { background: rgba(0,0,0,.78); }

.fl-card-shared {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 7px; border-radius: 99px;
  display: inline-flex; align-items: center; gap: 4px;
  backdrop-filter: blur(4px);
}

/* LIST view */
.fl-list { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 28px; }
.fl-list-head {
  display: grid;
  grid-template-columns: 28px 1fr 120px 100px 40px;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-3);
}
.fl-list-row {
  display: grid;
  grid-template-columns: 28px 1fr 120px 100px 40px;
  gap: 12px;
  padding: 10px 14px;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background var(--d-1);
}
.fl-list-row:hover { background: var(--bg-2); }
.fl-list-row.is-selected { background: var(--acc-soft); }
.fl-list-row:last-child { border-bottom: 0; }
.fl-list-row-ico {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.fl-list-row-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--fg); }
.fl-list-row-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.fl-list-row-meta { font-size: 11.5px; color: var(--fg-3); }
.fl-list-row-act { width: 28px; height: 28px; background: transparent; border: 0; color: var(--fg-3); border-radius: 7px; cursor: pointer; }
.fl-list-row-act:hover { background: var(--bg-3); color: var(--fg); }

/* File type icon colors */
.fl-fc-img { background: rgba(167,139,250,.14); color: #a78bfa; }
.fl-fc-pdf { background: rgba(248,113,113,.14); color: #f87171; }
.fl-fc-doc { background: rgba(96,165,250,.14); color: #60a5fa; }
.fl-fc-xls { background: rgba(52,211,153,.14); color: #34d399; }
.fl-fc-ppt { background: rgba(251,146,60,.14); color: #fb923c; }
.fl-fc-zip { background: rgba(148,163,184,.14); color: #94a3b8; }
.fl-fc-vid { background: rgba(248,113,113,.14); color: #f87171; }
.fl-fc-aud { background: rgba(251,191,36,.14); color: #fbbf24; }
.fl-fc-code { background: rgba(99,102,241,.14); color: #818cf8; }
.fl-fc-txt { background: rgba(156,163,175,.14); color: #9ca3af; }
.fl-fc-folder { background: var(--acc-soft); color: var(--acc); }

.fl-empty { padding: 80px 20px; text-align: center; color: var(--fg-3); }
.fl-empty-ico {
  width: 72px; height: 72px;
  border-radius: 22px;
  margin: 0 auto 14px;
  background: var(--bg-2); color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.fl-empty-title { font-size: 16px; font-weight: 700; color: var(--fg); margin-bottom: 6px; }
.fl-empty-sub { font-size: 13px; color: var(--fg-3); margin-bottom: 18px; max-width: 380px; margin-left: auto; margin-right: auto; }

.fl-drop-overlay {
  position: absolute; inset: 0;
  background: rgba(74,118,74,.12);
  backdrop-filter: blur(10px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-2);
}
.fl-drop-overlay.is-active { opacity: 1; pointer-events: auto; }
.fl-drop-card {
  background: var(--bg-1);
  border: 3px dashed var(--acc);
  border-radius: 24px;
  padding: 50px 70px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.fl-drop-ico {
  width: 80px; height: 80px;
  border-radius: 24px;
  margin: 0 auto 18px;
  background: var(--acc); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.fl-drop-title { font-size: 22px; font-weight: 700; color: var(--fg); margin-bottom: 8px; font-family: 'Space Grotesk', Inter, sans-serif; }
.fl-drop-sub { font-size: 14px; color: var(--fg-3); }

/* Preview */
.fl-preview { background: var(--bg-1); border-left: 1px solid var(--line); display: none; flex-direction: column; min-height: 0; }
.fl-shell.has-preview .fl-preview { display: flex; }
.fl-preview-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.fl-preview-title { font-size: 13px; font-weight: 700; color: var(--fg); text-transform: uppercase; letter-spacing: 0.04em; }
.fl-preview-body { flex: 1; overflow-y: auto; padding: 18px; }
.fl-prev-img { width: 100%; max-height: 280px; object-fit: contain; background: var(--bg-2); border-radius: 12px; margin-bottom: 16px; }
.fl-prev-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 16px; font-weight: 700; color: var(--fg);
  margin-bottom: 4px; word-break: break-word;
}
.fl-prev-type { font-size: 12px; color: var(--fg-3); margin-bottom: 18px; }
.fl-prev-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
.fl-prev-meta { border-top: 1px solid var(--line); padding-top: 12px; }
.fl-prev-meta-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; border-bottom: 1px solid var(--line-soft); }
.fl-prev-meta-row:last-child { border-bottom: 0; }
.fl-prev-meta-lbl { color: var(--fg-3); }
.fl-prev-meta-val { color: var(--fg); font-weight: 500; text-align: right; max-width: 60%; word-break: break-word; }

/* Upload progress drawer */
.fl-uploads {
  position: fixed; right: 20px; bottom: 20px;
  width: min(380px, calc(100vw - 40px));
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  z-index: 150;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  display: none; flex-direction: column;
  max-height: 60vh; overflow: hidden;
}
.fl-uploads.is-active { display: flex; }
.fl-uploads-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.fl-uploads-title { font-size: 13px; font-weight: 700; color: var(--fg); }
.fl-uploads-list { padding: 8px; overflow-y: auto; max-height: 50vh; }
.fl-up-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--bg-2); margin-bottom: 4px; }
.fl-up-ico { width: 28px; height: 28px; border-radius: 7px; background: var(--acc-soft); color: var(--acc); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.fl-up-body { flex: 1; min-width: 0; }
.fl-up-name { font-size: 12px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-up-bar { height: 3px; background: var(--bg-3); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.fl-up-bar-fill { height: 100%; background: var(--acc); width: 0%; transition: width var(--d-2); }
.fl-up-pct { font-size: 10.5px; color: var(--fg-3); font-family: 'JetBrains Mono', monospace; min-width: 36px; text-align: right; }
.fl-up-item.is-done .fl-up-pct { color: var(--ok); }
.fl-up-item.is-error .fl-up-pct { color: var(--err); }

/* Share modal users */
.fl-share-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; transition: background var(--d-1); }
.fl-share-user:hover { background: var(--bg-2); }
.fl-share-user.is-selected { background: var(--acc-soft); }
.fl-share-ava { width: 32px; height: 32px; border-radius: 50%; background: var(--grad-acc); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; text-transform: uppercase; }
.fl-share-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fl-share-body { flex: 1; min-width: 0; }
.fl-share-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.fl-share-mail { font-size: 11px; color: var(--fg-3); margin-top: 1px; }
.fl-share-toggle { width: 22px; height: 22px; border: 2px solid var(--line-strong); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 11px; }
.fl-share-user.is-selected .fl-share-toggle { background: var(--acc); border-color: var(--acc); color: #fff; }

/* ─── KEBAB MENU POPOVER (per-item dropdown) ────────────────────── */
.fl-menu {
  position: fixed;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  min-width: 220px;
  z-index: 250;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  display: none;
  animation: flMenuIn var(--d-1) var(--e-out);
}
.fl-menu.is-open { display: block; }
@keyframes flMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.fl-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--d-1);
}
.fl-menu-item:hover { background: var(--bg-2); }
.fl-menu-item i { width: 16px; text-align: center; color: var(--fg-3); font-size: 12px; }
.fl-menu-item:hover i { color: var(--fg); }
.fl-menu-item.is-danger { color: var(--err); }
.fl-menu-item.is-danger i { color: var(--err); }
.fl-menu-item.is-danger:hover { background: rgba(248,113,113,.08); }
.fl-menu-sep { height: 1px; background: var(--line-soft); margin: 4px 8px; }
.fl-menu-h {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  padding: 8px 12px 4px;
}

/* ─── FOLDER TREE PICKER (move modal) ───────────────────────────── */
.fl-tree {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  max-height: 340px;
  overflow-y: auto;
}
.fl-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--d-1);
  font-size: 13px;
  color: var(--fg);
}
.fl-tree-node:hover { background: var(--bg-2); }
.fl-tree-node.is-selected { background: var(--acc-soft); color: var(--acc); font-weight: 600; }
.fl-tree-node.is-disabled { opacity: 0.4; cursor: not-allowed; }
.fl-tree-toggle {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--fg-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--d-1);
}
.fl-tree-toggle.is-open { transform: rotate(90deg); }
.fl-tree-toggle.is-leaf { visibility: hidden; }
.fl-tree-ico { color: var(--acc); font-size: 13px; flex-shrink: 0; }
.fl-tree-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-tree-children {
  margin-left: 14px;
  padding-left: 8px;
  border-left: 1px solid var(--line-soft);
  display: none;
}
.fl-tree-children.is-open { display: block; }

/* ─── SHARING AVATARS STACK (visible on cards) ──────────────────── */
.fl-share-stack {
  display: inline-flex;
  align-items: center;
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 1;
}
.fl-share-stack-ava {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grad-acc);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid var(--bg-1);
  margin-left: -6px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.fl-share-stack-ava:first-child { margin-left: 0; }
.fl-share-stack-ava img { width: 100%; height: 100%; object-fit: cover; }
.fl-share-stack-more {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 9px;
  font-weight: 700;
  border: 2px solid var(--bg-1);
  margin-left: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}
.fl-share-stack-inh {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: 6px;
  backdrop-filter: blur(4px);
  white-space: nowrap;       /* žiadny wrap */
  flex-shrink: 0;            /* nepoddaj sa flex squeeze-u */
  max-width: none;
  overflow: visible;
}
/* Stack container — povoľ overflow chipov mimo karty */
.fl-card .fl-share-stack { overflow: visible !important; max-width: 100%; flex-wrap: wrap; gap: 4px; }

/* Folder card variant — share avatars in meta row */
.fl-card.is-folder .fl-share-stack {
  position: static;
  margin-left: auto;
  flex-shrink: 0;
}
.fl-card.is-folder .fl-share-stack-ava {
  border-color: var(--bg-1);
}

/* List view — share avatars compact */
.fl-list-row .fl-share-stack {
  position: static;
  margin-left: 6px;
}

/* ─── PREVIEW PANE: PROMINENT PERMISSIONS SECTION ───────────────── */
.fl-prev-perms {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.fl-prev-perms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.fl-prev-perms-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.fl-prev-perms-title i { color: var(--acc); font-size: 12px; }
.fl-prev-perms-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  background: var(--acc);
  color: #fff;
  border: 0;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--d-1);
}
.fl-prev-perms-add:hover { filter: brightness(1.1); }
.fl-prev-perms-list { display: flex; flex-direction: column; gap: 4px; }
.fl-prev-perms-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  transition: all var(--d-1);
}
.fl-prev-perms-row:hover { background: var(--bg); border-color: var(--line); }
.fl-prev-perms-ava {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad-acc);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
}
.fl-prev-perms-ava img { width: 100%; height: 100%; object-fit: cover; }
.fl-prev-perms-body { flex: 1; min-width: 0; }
.fl-prev-perms-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-prev-perms-meta {
  font-size: 10.5px;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fl-prev-perms-inh-tag {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acc);
  background: var(--acc-soft);
  padding: 1px 6px;
  border-radius: 99px;
  border: 1px solid var(--line-acc);
}
.fl-prev-perms-remove {
  width: 24px; height: 24px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  transition: all var(--d-1);
}
.fl-prev-perms-remove:hover { background: rgba(248,113,113,.1); color: var(--err); }
.fl-prev-perms-empty {
  font-size: 12px;
  color: var(--fg-4);
  text-align: center;
  padding: 14px;
  font-style: italic;
}
.fl-prev-perms-inherit-note {
  font-size: 10.5px;
  color: var(--fg-3);
  padding: 8px 10px;
  background: var(--acc-soft);
  border: 1px solid var(--line-acc);
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.fl-prev-perms-inherit-note i { color: var(--acc); margin-top: 1px; flex-shrink: 0; }

/* Cleanup: legacy fl-card-shared no longer needed (replaced by stack) */

/* ─── FULLSCREEN FILE VIEWER (lightbox) ─────────────────────────── */
.fl-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  z-index: 500;
  display: none;
  flex-direction: column;
  animation: flViewerIn var(--d-2) var(--e-out);
}
.fl-viewer.is-open { display: flex; }
@keyframes flViewerIn { from { opacity: 0; } to { opacity: 1; } }

.fl-viewer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,.5), transparent);
  position: relative;
  z-index: 2;
}
.fl-viewer-info { flex: 1; min-width: 0; color: #fff; }
.fl-viewer-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-viewer-meta { font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 1px; }
.fl-viewer-actions { display: inline-flex; gap: 4px; }
.fl-viewer-btn {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.08);
  border: 0;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all var(--d-1);
}
.fl-viewer-btn:hover { background: rgba(255,255,255,.16); }
.fl-viewer-btn.fl-viewer-close { background: rgba(248,113,113,.15); }
.fl-viewer-btn.fl-viewer-close:hover { background: rgba(248,113,113,.30); }

.fl-viewer-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 20px;
}

/* Image viewer */
.fl-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  cursor: zoom-in;
  transition: transform var(--d-2);
  user-select: none;
  -webkit-user-drag: none;
}
.fl-viewer-img.is-zoomed { cursor: zoom-out; transform: scale(2); }

/* PDF viewer */
.fl-viewer-pdf {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  border: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

/* Video viewer */
.fl-viewer-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  background: #000;
}

/* Audio viewer */
.fl-viewer-audio-wrap {
  background: var(--bg-1);
  border-radius: 16px;
  padding: 40px 36px;
  text-align: center;
  min-width: 360px;
  max-width: 520px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.fl-viewer-audio-ico {
  width: 100px; height: 100px;
  border-radius: 28px;
  background: var(--grad-acc);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  margin: 0 auto 18px;
}
.fl-viewer-audio-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 18px;
  word-break: break-word;
}
.fl-viewer-audio audio { width: 100%; }

/* Text/code viewer */
.fl-viewer-text {
  width: 100%;
  max-width: 1000px;
  max-height: 100%;
  background: var(--bg-1);
  border-radius: 12px;
  padding: 24px;
  overflow: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

/* Generic (unsupported file) viewer */
.fl-viewer-generic {
  text-align: center;
  color: #fff;
  padding: 40px;
}
.fl-viewer-generic-ico {
  font-size: 100px;
  margin-bottom: 22px;
}
.fl-viewer-generic-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.fl-viewer-generic-sub {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin-bottom: 24px;
}
.fl-viewer-generic-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--acc);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter var(--d-1);
}
.fl-viewer-generic-btn:hover { filter: brightness(1.1); }

/* Prev/Next navigation */
.fl-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  background: rgba(255,255,255,.08);
  border: 0;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 3;
  transition: all var(--d-1);
}
.fl-viewer-nav:hover { background: rgba(255,255,255,.20); transform: translateY(-50%) scale(1.05); }
.fl-viewer-nav.fl-viewer-prev { left: 20px; }
.fl-viewer-nav.fl-viewer-next { right: 20px; }
.fl-viewer-nav.is-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

/* Footer pager (current / total) */
.fl-viewer-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: rgba(255,255,255,.5);
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 600px) {
  .fl-viewer-nav { width: 38px; height: 38px; font-size: 13px; }
  .fl-viewer-nav.fl-viewer-prev { left: 8px; }
  .fl-viewer-nav.fl-viewer-next { right: 8px; }
  .fl-viewer-body { padding: 10px; }
}


@media (max-width: 900px) {
  .fl-shell { grid-template-columns: 1fr; }
  .fl-shell.has-preview { grid-template-columns: 1fr; }
  .fl-side { position: absolute; inset: 0 auto 0 0; width: 280px; z-index: 50; transform: translateX(-100%); transition: transform var(--d-3) var(--e-out); box-shadow: 8px 0 28px rgba(0,0,0,.3); }
  .fl-shell.side-open .fl-side { transform: translateX(0); }
  .fl-preview { position: absolute; inset: 0 0 0 auto; width: 100%; max-width: 380px; z-index: 45; border-left: 1px solid var(--line); transform: translateX(100%); transition: transform var(--d-3) var(--e-out); display: flex; }
  .fl-shell.has-preview .fl-preview { transform: translateX(0); }
}
@media (max-width: 560px) {
  .fl-toolbar-right .fl-sort { display: none; }
  .fl-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .fl-card-thumb { height: 110px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   INTEGRATIONS (Prepojenia & API) — v3 full-screen redesign (.in-* classes)
   ═══════════════════════════════════════════════════════════════════════ */
#sec-integrations { padding: 0 !important; }
#sec-integrations.sec { padding: 0; }

body.app--fullsec #sec-integrations.active {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
@supports selector(:has(*)) {
  .app__main:has(#sec-integrations.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-integrations.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-integrations.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}

.in-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--bg-0);
  border: 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.in-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px 14px;
}
.in-side::-webkit-scrollbar { width: 6px; }
.in-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.in-side-title { margin-bottom: 8px; }
.in-side-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acc);
  display: block;
  margin-bottom: 4px;
}
.in-side-h {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.01em;
}
.in-side-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  padding: 14px 6px 8px;
}
.in-tabs { display: flex; flex-direction: column; gap: 2px; }
.in-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--fg-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all var(--d-1);
}
.in-tab:hover { background: var(--bg-2); color: var(--fg); }
.in-tab.active { background: var(--acc-soft); color: var(--fg); font-weight: 700; }
.in-tab-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.in-tab-name { flex: 1; }
.in-tab-count {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 1px 8px;
  border-radius: 99px;
  min-width: 24px;
  text-align: center;
}
.in-tab.active .in-tab-count { background: var(--acc); color: #fff; }

.in-side-foot {
  margin-top: auto;
  padding: 14px 12px;
  background: var(--acc-soft);
  border: 1px solid var(--line-acc);
  border-radius: 12px;
}
.in-side-foot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
}
.in-side-foot-sub { font-size: 10.5px; color: var(--fg-3); line-height: 1.4; }

.in-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-0);
}
.in-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px clamp(20px, 4vw, 48px);
  width: 100%;
}
.in-content::-webkit-scrollbar { width: 8px; }
.in-content::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.in-panel { display: block; }
/* Skry duplicitné nadpisy z vložených sekcií (máme vlastný header v sidebare) */
.in-panel .pg-title,
.in-panel .pg-sub { display: none; }
/* Skry header riadok connections.php (h1 + new button wrapper) ak má pg-title vnútri */
.in-panel > div[style*="justify-content:space-between"]:first-child:has(.pg-title) { display: none; }
/* Vnútorný obsah (karty) centrovaný s max šírkou — bez ovplyvnenia flexu */
.in-panel > * { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* Mobile floating menu button (keďže nemáme toolbar) */
.in-mob-fab {
  display: none;
  position: fixed;
  top: calc(var(--top-h) + 12px);
  left: 12px;
  width: 40px; height: 40px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  cursor: pointer;
  z-index: 40;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .in-shell { grid-template-columns: 1fr; }
  .in-side {
    position: absolute;
    inset: 0 auto 0 0;
    width: 280px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--d-3) var(--e-out);
    box-shadow: 8px 0 28px rgba(0,0,0,.3);
  }
  .in-shell.side-open .in-side { transform: translateX(0); }
  .in-mob-fab { display: inline-flex; }
}

/* ═══════════════════════════════════════════════════════════════════════
   USERS (Správa užívateľov) — v3 full-screen (.us-* classes)
   ═══════════════════════════════════════════════════════════════════════ */
#sec-users { padding: 0 !important; }
#sec-users.sec { padding: 0; }
body.app--fullsec #sec-users.active { display: block; position: absolute; inset: 0; overflow: hidden; }
@supports selector(:has(*)) {
  .app__main:has(#sec-users.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-users.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-users.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}
.us-shell {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 280px 1fr; gap: 0;
  background: var(--bg-0);
  border: 0; border-top: 1px solid var(--line);
  overflow: hidden;
}
.us-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
  padding: 18px 14px 14px;
}
.us-side::-webkit-scrollbar { width: 6px; }
.us-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.us-side-title { margin-bottom: 16px; }
.us-side-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--acc); display: block; margin-bottom: 4px; }
.us-side-h { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 19px; font-weight: 700; color: var(--fg); margin: 0; letter-spacing: -0.01em; }
.us-side-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-4); padding: 14px 6px 8px; }
.us-roles { display: flex; flex-direction: column; gap: 2px; }
.us-role {
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 14px;
  background: transparent; border: 0; border-radius: 10px;
  color: var(--fg-2); font-size: 13px; font-weight: 500;
  text-align: left; cursor: pointer; transition: all var(--d-1);
}
.us-role:hover { background: var(--bg-2); color: var(--fg); }
.us-role.is-active { background: var(--acc-soft); color: var(--acc); font-weight: 700; }
.us-role-ico { width: 18px; text-align: center; font-size: 13px; flex-shrink: 0; }
.us-role-name { flex: 1; }
.us-role-count { font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--fg-3); background: var(--bg-2); padding: 1px 8px; border-radius: 99px; min-width: 22px; text-align: center; }
.us-role.is-active .us-role-count { background: var(--acc); color: #fff; }
.us-stats { display: flex; flex-direction: column; gap: 6px; }
.us-stat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px; }
.us-stat-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.us-stat-body { flex: 1; min-width: 0; }
.us-stat-val { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 19px; font-weight: 700; color: var(--fg); line-height: 1.1; }
.us-stat-lbl { font-size: 10.5px; color: var(--fg-3); margin-top: 1px; }
.us-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-0); }
.us-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg-1); min-height: 60px; flex-shrink: 0; }
.us-toolbar-info { flex-shrink: 0; }
.us-toolbar-title { font-size: 15px; font-weight: 700; color: var(--fg); }
.us-toolbar-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.us-toolbar-search { flex: 0 1 360px; display: flex; align-items: center; background: var(--bg-2); border: 1px solid transparent; border-radius: 12px; padding: 0 8px 0 14px; height: 38px; margin-left: 16px; transition: all var(--d-1); }
.us-toolbar-search:focus-within { background: var(--bg-1); border-color: var(--line-acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.us-toolbar-search > i { color: var(--fg-3); font-size: 13px; margin-right: 10px; flex-shrink: 0; }
.us-toolbar-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--fg); font-size: 13px; height: 100%; min-width: 0; font-family: inherit; }
.us-toolbar-spacer { flex: 1; }
.us-tb-btn { width: 38px; height: 38px; background: transparent; border: 0; color: var(--fg-2); border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; transition: all var(--d-1); }
.us-tb-btn:hover { background: var(--bg-2); color: var(--fg); }
.us-tablewrap { flex: 1; overflow-y: auto; padding: 0; }
.us-tablewrap::-webkit-scrollbar { width: 8px; }
.us-tablewrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.us-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.us-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-1);
  color: var(--fg-3);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 14px 18px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.us-table tbody td { padding: 12px 18px; border-bottom: 1px solid var(--line-soft); color: var(--fg-2); }
.us-table tbody tr:hover td { background: var(--bg-1); }
.us-mob-menu { display: none; }

@media (max-width: 900px) {
  .us-shell { grid-template-columns: 1fr; }
  .us-side { position: absolute; inset: 0 auto 0 0; width: 280px; z-index: 50; transform: translateX(-100%); transition: transform var(--d-3) var(--e-out); box-shadow: 8px 0 28px rgba(0,0,0,.3); }
  .us-shell.side-open .us-side { transform: translateX(0); }
  .us-mob-menu { display: inline-flex; }
  .us-toolbar-info { display: none; }
  .us-table thead th:nth-child(2), .us-table tbody td:nth-child(2),
  .us-table thead th:nth-child(5), .us-table tbody td:nth-child(5) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PROFILE (Môj profil) — v3 full-screen (.pr-* classes)
   ═══════════════════════════════════════════════════════════════════════ */
#sec-profile { padding: 0 !important; }
#sec-profile.sec { padding: 0; }
body.app--fullsec #sec-profile.active { display: block; position: absolute; inset: 0; overflow: hidden; }
@supports selector(:has(*)) {
  .app__main:has(#sec-profile.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-profile.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-profile.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}
.pr-shell {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 300px 1fr; gap: 0;
  background: var(--bg-0);
  border: 0; border-top: 1px solid var(--line);
  overflow: hidden;
}
.pr-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
  padding: 24px 16px 16px;
}
.pr-side::-webkit-scrollbar { width: 6px; }
.pr-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.pr-identity { text-align: center; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }
.pr-ava-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; cursor: pointer; }
.pr-ava {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--grad-acc); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 38px; font-weight: 700;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(74,118,74,.3);
}
.pr-ava img { width: 100%; height: 100%; object-fit: cover; }
.pr-ava-edit {
  position: absolute; bottom: 2px; right: 2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-2); border: 2px solid var(--bg-1);
  color: var(--fg); display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: all var(--d-1);
}
.pr-ava-wrap:hover .pr-ava-edit { background: var(--acc); color: #fff; }
.pr-identity-name { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 18px; font-weight: 700; color: var(--fg); }
.pr-identity-role { font-size: 12px; color: var(--acc); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }
.pr-identity-email { font-size: 12px; color: var(--fg-3); margin-top: 4px; word-break: break-all; }
.pr-side-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-4); padding: 14px 6px 8px; }
.pr-nav { display: flex; flex-direction: column; gap: 2px; }
.pr-nav-item {
  display: flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 14px;
  background: transparent; border: 0; border-radius: 10px;
  color: var(--fg-2); font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer; transition: all var(--d-1);
}
.pr-nav-item:hover { background: var(--bg-2); color: var(--fg); }
.pr-nav-item.is-active { background: var(--acc-soft); color: var(--acc); font-weight: 700; }
.pr-nav-ico { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.pr-nav-item.is-active .pr-nav-ico { color: var(--acc); }
.pr-side-foot { margin-top: auto; padding: 14px 12px 4px; border-top: 1px solid var(--line-soft); }
.pr-foot-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--fg-2); padding: 4px 0; }
.pr-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-0); }
.pr-content { flex: 1; overflow-y: auto; padding: 28px clamp(20px, 4vw, 52px); }
.pr-content::-webkit-scrollbar { width: 8px; }
.pr-content::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.pr-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 18px;
  max-width: 900px;
}
.pr-card.pr-flash { animation: prFlash 1s var(--e-out); }
@keyframes prFlash { 0% { box-shadow: 0 0 0 0 var(--acc-soft); } 30% { box-shadow: 0 0 0 4px var(--acc-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
.pr-card-head { margin-bottom: 18px; }
.pr-card-title { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 16px; font-weight: 700; color: var(--fg); display: flex; align-items: center; gap: 10px; }
.pr-card-title i { color: var(--acc); font-size: 14px; }
.pr-card-sub { font-size: 12.5px; color: var(--fg-3); margin-top: 4px; }
.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.pr-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.pr-field { display: flex; flex-direction: column; }
.pr-field label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); margin-bottom: 6px; }
.pr-inp {
  width: 100%; height: 42px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 0 14px;
  color: var(--fg); font-size: 13.5px;
  outline: none; transition: all var(--d-1); font-family: inherit;
}
.pr-inp:focus { border-color: var(--line-acc); background: var(--bg-1); box-shadow: 0 0 0 3px var(--acc-soft); }
select.pr-inp { cursor: pointer; }
.pr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 20px;
  border: 1px solid var(--line); background: var(--bg-2);
  color: var(--fg); border-radius: 11px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: all var(--d-1);
}
.pr-btn:hover { background: var(--bg-3); }
.pr-btn-acc { background: var(--acc); color: #fff; border-color: var(--acc); box-shadow: 0 4px 14px rgba(74,118,74,.28); }
.pr-btn-acc:hover { background: color-mix(in srgb, var(--acc) 88%, #000); color: #fff; }
.pr-info { display: flex; flex-direction: column; }
.pr-info-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.pr-info-row:last-child { border-bottom: 0; }
.pr-info-lbl { color: var(--fg-3); }
.pr-mob-fab {
  display: none;
  position: fixed;
  top: calc(var(--top-h) + 12px);
  left: 12px;
  width: 40px; height: 40px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  cursor: pointer;
  z-index: 40;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .pr-shell { grid-template-columns: 1fr; }
  .pr-side { position: absolute; inset: 0 auto 0 0; width: 300px; z-index: 50; transform: translateX(-100%); transition: transform var(--d-3) var(--e-out); box-shadow: 8px 0 28px rgba(0,0,0,.3); }
  .pr-shell.side-open .pr-side { transform: translateX(0); }
  .pr-grid, .pr-grid-3 { grid-template-columns: 1fr; }
  .pr-mob-fab { display: inline-flex; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SKILLS — v3 full-screen + slide-in editor (.sk-* classes)
   ═══════════════════════════════════════════════════════════════════════ */
#sec-skills { padding: 0 !important; }
#sec-skills.sec { padding: 0; }
body.app--fullsec #sec-skills.active { display: block; position: absolute; inset: 0; overflow: hidden; }
@supports selector(:has(*)) {
  .app__main:has(#sec-skills.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-skills.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-skills.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}
.sk-shell {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 280px 1fr; gap: 0;
  background: var(--bg-0);
  border: 0; border-top: 1px solid var(--line);
  overflow: hidden;
}
.sk-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
  padding: 18px 14px 14px;
}
.sk-side::-webkit-scrollbar { width: 6px; }
.sk-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.sk-side-title { margin-bottom: 16px; }
.sk-side-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--acc); display: block; margin-bottom: 4px; }
.sk-side-h { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 19px; font-weight: 700; color: var(--fg); margin: 0; letter-spacing: -0.01em; }
.sk-side-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-4); padding: 14px 6px 8px; }
.sk-tags-nav { display: flex; flex-direction: column; gap: 2px; }
.sk-tag-flt {
  display: flex; align-items: center; gap: 11px;
  height: 36px; padding: 0 12px;
  background: transparent; border: 0; border-radius: 9px;
  color: var(--fg-2); font-size: 13px; font-weight: 500;
  text-align: left; cursor: pointer; transition: all var(--d-1);
}
.sk-tag-flt:hover { background: var(--bg-2); color: var(--fg); }
.sk-tag-flt.is-active { background: var(--acc-soft); color: var(--acc); font-weight: 700; }
.sk-tag-flt-ico { width: 16px; text-align: center; font-size: 12px; flex-shrink: 0; opacity: 0.7; }
.sk-tag-flt span:not(.sk-tag-flt-count) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-tag-flt-count { font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--fg-3); background: var(--bg-2); padding: 1px 7px; border-radius: 99px; }
.sk-tag-flt.is-active .sk-tag-flt-count { background: var(--acc); color: #fff; }
.sk-stats { display: flex; flex-direction: column; gap: 6px; }
.sk-stat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px; }
.sk-stat-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.sk-stat-body { flex: 1; min-width: 0; }
.sk-stat-val { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 19px; font-weight: 700; color: var(--fg); line-height: 1.1; }
.sk-stat-lbl { font-size: 10.5px; color: var(--fg-3); margin-top: 1px; }
.sk-side-foot { margin-top: auto; padding: 12px; background: var(--acc-soft); border: 1px solid var(--line-acc); border-radius: 12px; font-size: 10.5px; color: var(--fg-3); line-height: 1.45; display: flex; gap: 8px; align-items: flex-start; }

.sk-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-0); }
.sk-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--bg-1); min-height: 60px; flex-shrink: 0; }
.sk-toolbar-info { flex-shrink: 0; }
.sk-toolbar-title { font-size: 15px; font-weight: 700; color: var(--fg); }
.sk-toolbar-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.sk-toolbar-search { flex: 0 1 340px; display: flex; align-items: center; background: var(--bg-2); border: 1px solid transparent; border-radius: 12px; padding: 0 8px 0 14px; height: 38px; margin-left: 16px; transition: all var(--d-1); }
.sk-toolbar-search:focus-within { background: var(--bg-1); border-color: var(--line-acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.sk-toolbar-search > i { color: var(--fg-3); font-size: 13px; margin-right: 10px; flex-shrink: 0; }
.sk-toolbar-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--fg); font-size: 13px; height: 100%; min-width: 0; font-family: inherit; }
.sk-toolbar-spacer { flex: 1; }
.sk-tb-btn { width: 38px; height: 38px; background: transparent; border: 0; color: var(--fg-2); border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; transition: all var(--d-1); }
.sk-tb-btn:hover { background: var(--bg-2); color: var(--fg); }
.sk-grid-wrap { flex: 1; overflow-y: auto; padding: 20px; }
.sk-grid-wrap::-webkit-scrollbar { width: 8px; }
.sk-grid-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.sk-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: all var(--d-1);
  display: flex; flex-direction: column;
}
.sk-card:hover { border-color: var(--line-acc); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.sk-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sk-card-ico { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.sk-card-title-wrap { flex: 1; min-width: 0; }
.sk-card-name { font-size: 14px; font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-card-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; margin-top: 2px; }
.sk-card-status.is-on { color: var(--ok); }
.sk-card-status.is-off { color: var(--fg-4); }
.sk-card-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sk-card-edit { width: 30px; height: 30px; background: var(--bg-2); border: 1px solid var(--line); color: var(--fg-3); border-radius: 8px; cursor: pointer; opacity: 0; transition: all var(--d-1); flex-shrink: 0; }
.sk-card:hover .sk-card-edit { opacity: 1; }
.sk-card-edit:hover { background: var(--acc-soft); color: var(--acc); border-color: var(--line-acc); }
.sk-card-desc { font-size: 12.5px; color: var(--fg-2); line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.sk-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.sk-card-tag { font-size: 10.5px; background: var(--bg-2); color: var(--fg-2); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line-soft); }
.sk-card-tag-more { background: transparent; color: var(--fg-4); }
.sk-card-prompt { font-size: 11px; color: var(--fg-3); font-family: 'JetBrains Mono', monospace; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: auto; }
.sk-card-prompt i { color: var(--acc); margin-right: 5px; }

.sk-empty { grid-column: 1 / -1; text-align: center; padding: 70px 20px; }
.sk-empty-ico { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 14px; background: var(--acc-soft); color: var(--acc); display: inline-flex; align-items: center; justify-content: center; font-size: 30px; }
.sk-empty-title { font-size: 16px; font-weight: 700; color: var(--fg); margin-bottom: 6px; }
.sk-empty-sub { font-size: 13px; color: var(--fg-3); max-width: 380px; margin: 0 auto; line-height: 1.5; }

.sk-mob-menu { display: none; }

/* ─── EDITOR slide-in panel ─────────────────────────────────────── */
.sk-editor-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-2);
}
.sk-editor-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sk-editor {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(620px, 100vw);
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  z-index: 210;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--d-3) var(--e-out);
  box-shadow: -20px 0 60px rgba(0,0,0,.4);
}
.sk-editor.is-open { transform: translateX(0); }
.sk-editor-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--acc-soft), transparent);
}
.sk-editor-title-wrap { display: flex; align-items: center; gap: 14px; }
.sk-editor-ico-prev {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: rgba(139,92,246,.12); color: #8b5cf6;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0;
  transition: all var(--d-1);
}
.sk-editor-title { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 17px; font-weight: 700; color: var(--fg); }
.sk-editor-subtitle { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.sk-editor-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.sk-editor-body::-webkit-scrollbar { width: 8px; }
.sk-editor-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.sk-field { margin-bottom: 16px; }
.sk-field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); margin-bottom: 7px; }
.sk-field-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--fg-4); font-size: 10.5px; }
.sk-inp {
  width: 100%; height: 42px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 0 14px;
  color: var(--fg); font-size: 13.5px;
  outline: none; transition: all var(--d-1); font-family: inherit;
}
.sk-inp:focus { border-color: var(--line-acc); background: var(--bg-1); box-shadow: 0 0 0 3px var(--acc-soft); }
.sk-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sk-color-wrap { display: flex; align-items: center; gap: 10px; height: 42px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; }
.sk-color { width: 32px; height: 28px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; padding: 0; }
.sk-color::-webkit-color-swatch-wrapper { padding: 0; }
.sk-color::-webkit-color-swatch { border: 0; border-radius: 7px; }
.sk-color-hex { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--fg-2); text-transform: uppercase; }

.sk-prompt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
.sk-prompt-tools { display: inline-flex; align-items: center; gap: 8px; }
.sk-prompt-count { font-size: 10.5px; color: var(--fg-4); font-family: 'JetBrains Mono', monospace; }
.sk-upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--fg-2); border-radius: 8px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all var(--d-1);
}
.sk-upload-btn:hover { background: var(--acc-soft); color: var(--acc); border-color: var(--line-acc); }
.sk-prompt-dropzone { position: relative; }
.sk-prompt-textarea {
  width: 100%;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px;
  color: var(--fg);
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.6;
  outline: none; resize: vertical; min-height: 200px;
  transition: all var(--d-1);
}
.sk-prompt-textarea:focus { border-color: var(--line-acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.sk-drop-hint {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  gap: 10px;
  background: var(--acc-soft);
  border: 2px dashed var(--acc);
  border-radius: 10px;
  color: var(--acc); font-weight: 700; font-size: 14px;
  pointer-events: none;
}
.sk-prompt-dropzone.is-drag .sk-drop-hint { display: flex; }
.sk-prompt-foot { margin-top: 8px; }

.sk-editor-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.sk-editor-foot-spacer { flex: 1; }
.sk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border: 1px solid var(--line); background: var(--bg-2);
  color: var(--fg); border-radius: 11px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all var(--d-1);
}
.sk-btn:hover { background: var(--bg-3); }
.sk-btn-acc { background: var(--acc); color: #fff; border-color: var(--acc); box-shadow: 0 4px 14px rgba(74,118,74,.28); }
.sk-btn-acc:hover { background: color-mix(in srgb, var(--acc) 88%, #000); color: #fff; }
.sk-btn-danger { color: var(--err); border-color: rgba(248,113,113,.3); }
.sk-btn-danger:hover { background: rgba(248,113,113,.08); border-color: var(--err); }

@media (max-width: 900px) {
  .sk-shell { grid-template-columns: 1fr; }
  .sk-side { position: absolute; inset: 0 auto 0 0; width: 280px; z-index: 50; transform: translateX(-100%); transition: transform var(--d-3) var(--e-out); box-shadow: 8px 0 28px rgba(0,0,0,.3); }
  .sk-shell.side-open .sk-side { transform: translateX(0); }
  .sk-mob-menu { display: inline-flex; }
  .sk-toolbar-info { display: none; }
  .sk-editor { width: 100vw; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ACTIVITY LOG — v3 full-screen redesign (.al-* classes)
   ═══════════════════════════════════════════════════════════════════════ */
#sec-activity { padding: 0 !important; }
#sec-activity.sec { padding: 0; }

body.app--fullsec #sec-activity.active {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
@supports selector(:has(*)) {
  .app__main:has(#sec-activity.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-activity.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-activity.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}

.al-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--bg-0);
  border: 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}

/* Sidebar */
.al-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px 14px;
}
.al-side::-webkit-scrollbar { width: 6px; }
.al-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.al-side-title { margin-bottom: 16px; }
.al-side-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acc);
  display: block;
  margin-bottom: 4px;
}
.al-side-h {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.01em;
}
.al-side-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  padding: 14px 6px 8px;
}

.al-scopes { display: flex; flex-direction: column; gap: 2px; }
.al-scope {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all var(--d-1);
}
.al-scope:hover { background: var(--bg-2); color: var(--fg); }
.al-scope.active {
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 700;
}
.al-scope-ico { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.al-scope.active .al-scope-ico { color: var(--acc); }
.al-scope-name { flex: 1; }
.al-scope-count {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 1px 8px;
  border-radius: 99px;
  min-width: 24px;
  text-align: center;
}
.al-scope.active .al-scope-count { background: var(--acc); color: #fff; }

/* KPI stats stacked */
.al-stats { display: flex; flex-direction: column; gap: 6px; }
.al-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.al-stat-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.al-stat-body { flex: 1; min-width: 0; }
.al-stat-val {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.al-stat-lbl {
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main feed area */
.al-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-0);
}
.al-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  min-height: 60px;
  flex-shrink: 0;
}
.al-toolbar-info { flex-shrink: 0; }
.al-toolbar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.al-toolbar-title::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(52,211,153,.2);
  animation: alPulse 2s infinite;
}
@keyframes alPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.al-toolbar-sub { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.al-toolbar-spacer { flex: 1; }
.al-toolbar-search {
  flex: 0 1 360px;
  display: flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0 8px 0 14px;
  height: 38px;
  margin-left: 16px;
  transition: all var(--d-1);
}
.al-toolbar-search:focus-within { background: var(--bg-1); border-color: var(--line-acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.al-toolbar-search > i { color: var(--fg-3); font-size: 13px; margin-right: 10px; flex-shrink: 0; }
.al-toolbar-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--fg); font-size: 13px; height: 100%; min-width: 0; font-family: inherit; }
.al-tb-btn {
  width: 38px; height: 38px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: all var(--d-1);
}
.al-tb-btn:hover { background: var(--bg-2); color: var(--fg); }

.al-feed {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.al-feed::-webkit-scrollbar { width: 8px; }
.al-feed::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* Activity item override pre .al-feed (širšie, krajšie) */
.al-feed .act-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  transition: all var(--d-1);
}
.al-feed .act-item:hover {
  background: var(--bg-2);
  border-color: var(--line);
  transform: translateX(2px);
}
.al-feed .act-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.al-feed .act-body { flex: 1; min-width: 0; }
.al-feed .act-desc { font-size: 13.5px; color: var(--fg); line-height: 1.4; }
.al-feed .act-desc strong { color: var(--acc); font-weight: 600; }
.al-feed .act-time { font-size: 11.5px; color: var(--fg-4); margin-top: 3px; font-family: 'JetBrains Mono', monospace; }
.al-feed .empty-state { color: var(--fg-3); }

.al-mob-menu { display: none; }
@media (max-width: 900px) {
  .al-shell { grid-template-columns: 1fr; }
  .al-side {
    position: absolute;
    inset: 0 auto 0 0;
    width: 280px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--d-3) var(--e-out);
    box-shadow: 8px 0 28px rgba(0,0,0,.3);
  }
  .al-shell.side-open .al-side { transform: translateX(0); }
  .al-mob-menu { display: inline-flex; }
  .al-toolbar-info { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KANBAN BOARD (úlohy) — v3 redesign
   ═══════════════════════════════════════════════════════════════════════ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 14px;
  padding: 14px 18px 18px;
  min-height: 100%;
  align-items: flex-start;
}

.kanban-col {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  overflow: hidden;
  transition: all var(--d-1);
}
.kanban-col:hover { border-color: var(--line-strong); }

.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
  position: sticky;
  top: 0;
  z-index: 2;
}
.kanban-col-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kanban-col-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg-3);
  min-width: 24px;
  text-align: center;
}

.kanban-cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
  flex: 1;
  transition: background var(--d-1);
}
.kanban-cards.drag-over {
  background: var(--acc-soft);
  outline: 2px dashed var(--acc);
  outline-offset: -8px;
  border-radius: 10px;
}

.kanban-card {
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px;
  cursor: pointer;
  transition: all var(--d-1);
  position: relative;
  overflow: hidden;
}
.kanban-card:hover {
  border-color: var(--line-acc);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}
.kanban-card.dragging {
  opacity: 0.4;
  transform: rotate(2deg);
  cursor: grabbing;
}

.kanban-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.35;
  margin-bottom: 6px;
  word-break: break-word;
}
.kanban-card-desc {
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.45;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kanban-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.kanban-pri {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
}
.kanban-card-due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-3);
}
.kanban-card-due.overdue { color: var(--err); font-weight: 600; }
.kanban-card-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grad-acc);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
  border: 2px solid var(--bg-1);
}

.kanban-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 10px 10px;
  height: 32px;
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--fg-3);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.kanban-add:hover {
  background: var(--acc-soft);
  color: var(--acc);
  border-color: var(--acc);
  border-style: solid;
}

/* Mobile — kanban horizontal scroll */
@media (max-width: 900px) {
  .kanban-board {
    grid-template-columns: repeat(4, 280px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 14px 14px;
  }
}
@media (max-width: 480px) {
  .kanban-board { grid-template-columns: repeat(4, 86vw); }
}

/* ═══════════════════════════════════════════════════════════════════════
   TASK DRAWER (detail úlohy) — v3 redesign
   ═══════════════════════════════════════════════════════════════════════ */
.task-drawer-color {
  height: 4px;
  border-radius: 999px;
  margin: -2px -2px 14px;
  background: var(--acc);
}
.task-drawer-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
  margin: 0 0 10px 0;
  letter-spacing: -0.015em;
  word-break: break-word;
}
.task-drawer-desc {
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.55;
  margin: 0 0 18px 0;
  white-space: pre-wrap;
}
.task-drawer-section {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.task-drawer-section:last-of-type { border-bottom: 0; }
.task-drawer-section-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.task-drawer-status {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.task-drawer-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
  text-align: left;
  --c: var(--acc);
}
.task-drawer-status-btn:hover { background: var(--bg-3); border-color: var(--line-strong); color: var(--fg); }
.task-drawer-status-btn.active {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border-color: var(--c);
  color: var(--c);
}
.task-drawer-status-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.task-drawer-status-btn.active .task-drawer-status-icon {
  background: var(--c);
  color: #fff;
}
.task-drawer-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}
.task-drawer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--fg-2);
  transition: background var(--d-1);
}
.task-drawer-row:hover { background: var(--bg-2); }
.task-drawer-row i {
  width: 16px;
  text-align: center;
  color: var(--fg-3);
}
.task-drawer-row strong { color: var(--fg); font-weight: 600; }
.task-drawer-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.task-drawer-actions .btn-sec,
.task-drawer-actions .btn-danger {
  flex: 1;
  min-width: 120px;
  justify-content: center;
}

@media (max-width: 480px) {
  .task-drawer-status { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NEWSLETTER & CAMPAIGNS — v3 full-screen redesign
   ═══════════════════════════════════════════════════════════════════════ */
#sec-newsletter { padding: 0 !important; }
#sec-newsletter.sec { padding: 0; }

body.app--fullsec #sec-newsletter.active {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
@supports selector(:has(*)) {
  .app__main:has(#sec-newsletter.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-newsletter.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-newsletter.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}

/* ── Shell ─────────────────────────────────────────────────── */
.nw-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--bg-0);
  border: 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.nw-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px 14px;
}
.nw-side::-webkit-scrollbar { width: 6px; }
.nw-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.nw-side-title { margin-bottom: 16px; }
.nw-side-eyebrow {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--acc);
  display: block;
  margin-bottom: 4px;
}
.nw-side-h {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 19px; font-weight: 700;
  color: var(--fg); margin: 0;
  letter-spacing: -0.01em;
}
.nw-new-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(74,118,74,.40) !important; }
.nw-new-btn:active { transform: translateY(1px); }
.nw-side-section {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-4);
  padding: 14px 6px 8px;
}

/* Tabs */
.nw-tabs { display: flex; flex-direction: column; gap: 2px; }
.nw-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 13.5px; font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all var(--d-1);
}
.nw-tab:hover { background: var(--bg-2); color: var(--fg); }
.nw-tab.is-active {
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 700;
}
.nw-tab-ico { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.nw-tab.is-active .nw-tab-ico { color: var(--acc); }
.nw-tab > span:not(.nw-tab-count) { flex: 1; }
.nw-tab-count {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 1px 8px;
  border-radius: 99px;
  min-width: 24px;
  text-align: center;
}
.nw-tab.is-active .nw-tab-count { background: var(--acc); color: #fff; }

/* Filter select */
.nw-filters { display: flex; flex-direction: column; }
.nw-filter-label { font-size: 11px; font-weight: 600; color: var(--fg-3); display: block; margin-bottom: 5px; }
.nw-select {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--d-1);
}
.nw-select:focus { outline: none; border-color: var(--line-acc); }

/* KPI stats stacked */
.nw-stats { display: flex; flex-direction: column; gap: 6px; }
.nw-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.nw-stat-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.nw-stat-body { flex: 1; min-width: 0; }
.nw-stat-lbl { font-size: 11px; color: var(--fg-3); font-weight: 600; letter-spacing: 0.02em; }
.nw-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px; font-weight: 700;
  color: var(--fg);
  margin-top: 2px;
  letter-spacing: -0.02em;
}

/* Sidebar footer action */
.nw-side-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.nw-side-action {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.nw-side-action:hover { background: var(--bg-3); border-color: var(--line); color: var(--fg); }

/* ── Main ──────────────────────────────────────────────────── */
.nw-main {
  display: flex;
  flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--bg-0);
  overflow: hidden;
}
.nw-toolbar {
  display: flex; align-items: center; gap: 12px;
  height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  flex-shrink: 0;
}
.nw-tb-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--d-1);
}
.nw-tb-btn:hover { background: var(--bg-2); color: var(--fg); }
.nw-toolbar-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--fg);
}
.nw-toolbar-spacer { flex: 1; }

/* Search box */
.nw-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  min-width: 260px;
  transition: border-color var(--d-1);
}
.nw-search:focus-within { border-color: var(--line-acc); }
.nw-search i { color: var(--fg-3); font-size: 13px; }
.nw-search input {
  border: 0;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 13px;
  color: var(--fg);
  font-family: inherit;
}

/* Bulk action buttons */
.nw-bulk { display: inline-flex; gap: 6px; }
.nw-bulk-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px;
  padding: 0 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--fg);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all var(--d-1);
}
.nw-bulk-btn:not(:disabled):hover { background: var(--bg-3); border-color: var(--line); }
.nw-bulk-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.nw-bulk-btn.nw-bulk-danger:not(:disabled) { color: var(--err); }
.nw-bulk-btn.nw-bulk-danger:not(:disabled):hover { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.30); }

/* Content area */
.nw-content {
  flex: 1; min-height: 0;
  overflow: auto;
  padding: 16px 20px 20px;
}
.nw-list { display: flex; flex-direction: column; gap: 6px; }

/* Subscriber row */
.nw-sub-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  transition: all var(--d-1);
}
.nw-sub-row:hover { border-color: var(--line); background: var(--bg-2); }
.nw-sub-row.is-selected { border-color: var(--line-acc); background: var(--acc-soft); }
.nw-sub-cb { width: 18px; height: 18px; cursor: pointer; accent-color: var(--acc); }
.nw-sub-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Space Grotesk', Inter, sans-serif;
}
.nw-sub-info { flex: 1; min-width: 0; }
.nw-sub-email {
  font-size: 13.5px; font-weight: 600;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nw-sub-meta {
  font-size: 11.5px; color: var(--fg-3);
  margin-top: 3px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.nw-sub-meta i { font-size: 10px; margin-right: 4px; opacity: 0.7; }
.nw-sub-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
}
.nw-sub-status.is-confirmed { background: rgba(34,197,94,.16); color: #15803d; }
.nw-sub-status.is-pending { background: rgba(245,158,11,.16); color: #b45309; }
.nw-sub-status.is-unsubscribed { background: rgba(148,163,184,.18); color: var(--fg-3); }
.nw-sub-actions { display: inline-flex; gap: 6px; }
.nw-sub-action {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  transition: all var(--d-1);
}
.nw-sub-action:hover { background: var(--bg-3); color: var(--fg); }
.nw-sub-action.nw-sub-danger:hover { color: var(--err); background: rgba(248,113,113,.10); }

[data-theme="dark"] .nw-sub-status.is-confirmed { color: #86efac; }
[data-theme="dark"] .nw-sub-status.is-pending { color: #fcd34d; }

/* Campaign card */
.nw-camp-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  transition: all var(--d-1);
}
.nw-camp-card:hover { border-color: var(--line); }
.nw-camp-ico {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: rgba(74,118,74,.16);
  color: var(--acc);
  font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nw-camp-body { flex: 1; min-width: 0; }
.nw-camp-name {
  font-size: 14px; font-weight: 700;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'Space Grotesk', Inter, sans-serif;
}
.nw-camp-subj {
  font-size: 12.5px; color: var(--fg-3);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nw-camp-meta {
  font-size: 11.5px; color: var(--fg-4);
  margin-top: 6px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.nw-camp-meta i { font-size: 10px; margin-right: 3px; opacity: 0.7; }
.nw-camp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.nw-camp-badge.is-draft     { background: rgba(148,163,184,.18); color: var(--fg-3); }
.nw-camp-badge.is-scheduled { background: rgba(59,130,246,.16); color: #1d4ed8; }
.nw-camp-badge.is-sent      { background: rgba(34,197,94,.16); color: #15803d; }
.nw-camp-badge.is-sending   { background: rgba(245,158,11,.16); color: #b45309; }
[data-theme="dark"] .nw-camp-badge.is-scheduled { color: #93c5fd; }
[data-theme="dark"] .nw-camp-badge.is-sent { color: #86efac; }
[data-theme="dark"] .nw-camp-badge.is-sending { color: #fcd34d; }
.nw-camp-actions { display: inline-flex; gap: 6px; }

/* Settings pane */
.nw-settings {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 880px;
}
.nw-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 20px 22px;
}
.nw-card-head { margin-bottom: 14px; }
.nw-card-h {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--fg);
  margin: 0 0 4px;
}
.nw-card-sub { font-size: 12.5px; color: var(--fg-3); margin: 0; line-height: 1.55; }
.nw-card-sub code { background: var(--bg-2); padding: 1px 6px; border-radius: 4px; font-size: 11.5px; }
.nw-set-row { margin-top: 14px; }
.nw-set-row:first-child { margin-top: 0; }
.nw-form-lbl {
  font-size: 12px; font-weight: 600;
  color: var(--fg-2);
  display: block;
  margin-bottom: 6px;
}
.nw-copy-wrap {
  display: flex; gap: 8px; align-items: stretch;
  flex-wrap: wrap;
}
.nw-copy-wrap .sk-inp { flex: 1; min-width: 220px; }
.nw-set-hint {
  margin-top: 7px;
  font-size: 11.5px; color: var(--fg-4);
  line-height: 1.5;
}
.nw-set-hint code { background: var(--bg-2); padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.nw-steps {
  margin: 0; padding-left: 22px;
  list-style: decimal;
  display: flex; flex-direction: column; gap: 8px;
}
.nw-steps li {
  font-size: 13px; color: var(--fg-2);
  line-height: 1.55;
}
.nw-steps code { background: var(--bg-2); padding: 1px 6px; border-radius: 4px; font-size: 11.5px; }

/* Form helpers inside campaign modal */
.nw-form { display: flex; flex-direction: column; gap: 14px; }
.nw-form-full { display: flex; flex-direction: column; }
.nw-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nw-form-2 > div { display: flex; flex-direction: column; }

/* Mobile */
.nw-mob-menu { display: none; }
@media (max-width: 900px) {
  .nw-shell { grid-template-columns: 1fr; }
  .nw-side {
    position: absolute;
    inset: 0 auto 0 0;
    width: 280px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--d-3) var(--e-out);
    box-shadow: 8px 0 28px rgba(0,0,0,.3);
  }
  .nw-shell.side-open .nw-side { transform: translateX(0); }
  .nw-mob-menu { display: inline-flex; }
  .nw-search { min-width: 0; flex: 1; }
  .nw-form-2 { grid-template-columns: 1fr; }
}

/* ── Newsletter: map legacy .nl-* JS-emitted classes to v3 styles ───── */
.nl-sub-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  transition: all var(--d-1);
}
.nl-sub-row:hover { border-color: var(--line); background: var(--bg-2); }
.nl-sub-row.selected { border-color: var(--line-acc); background: var(--acc-soft); }
.nl-sub-info { flex: 1; min-width: 0; }
.nl-sub-email {
  font-size: 13.5px; font-weight: 600;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nl-sub-meta {
  font-size: 11.5px; color: var(--fg-3);
  margin-top: 4px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.nl-sub-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-4);
}
.nl-badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
}
.nl-badge-on    { background: rgba(34,197,94,.16); color: #15803d; }
.nl-badge-off   { background: rgba(148,163,184,.18); color: var(--fg-3); }
.nl-badge-pend  { background: rgba(245,158,11,.16); color: #b45309; }
.nl-badge-draft { background: rgba(148,163,184,.18); color: var(--fg-3); }
[data-theme="dark"] .nl-badge-on { color: #86efac; }
[data-theme="dark"] .nl-badge-pend { color: #fcd34d; }
.nl-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 11px;
  border: 1px solid var(--line-soft);
}

/* Campaign row */
.nl-camp-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  cursor: pointer;
  transition: all var(--d-1);
}
.nl-camp-row:hover { border-color: var(--line); background: var(--bg-2); }
.nl-camp-info { flex: 1; min-width: 0; }
.nl-camp-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nl-camp-meta {
  font-size: 12px; color: var(--fg-3);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.nl-camp-stats {
  font-size: 12px; color: var(--fg-2);
  text-align: right;
  flex-shrink: 0;
}
.nl-camp-stats strong { color: var(--acc); font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.nl-camp-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   WEBSITES (Moje weby / E-shopy) — v3 full-screen redesign
   ═══════════════════════════════════════════════════════════════════════ */
#sec-websites { padding: 0 !important; }
#sec-websites.sec { padding: 0; }

body.app--fullsec #sec-websites.active {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
@supports selector(:has(*)) {
  .app__main:has(#sec-websites.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-websites.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-websites.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}

/* Shell + views */
.wb-shell {
  position: absolute;
  inset: 0;
  background: var(--bg-0);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.wb-view {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  overflow: hidden;
}

/* Sidebar */
.wb-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px 14px;
}
.wb-side::-webkit-scrollbar { width: 6px; }
.wb-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.wb-side-title { margin-bottom: 16px; }
.wb-side-eyebrow {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--acc);
  display: block;
  margin-bottom: 4px;
}
.wb-side-h {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 19px; font-weight: 700;
  color: var(--fg); margin: 0;
  letter-spacing: -0.01em;
}
.wb-new-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(74,118,74,.40) !important; }
.wb-new-btn:active { transform: translateY(1px); }
.wb-side-section {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-4);
  padding: 14px 6px 8px;
}

/* Search inside sidebar */
.wb-search-side {
  display: flex; align-items: center; gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  transition: border-color var(--d-1);
}
.wb-search-side:focus-within { border-color: var(--line-acc); }
.wb-search-side i { color: var(--fg-3); font-size: 13px; }
.wb-search-side input {
  border: 0; background: transparent; outline: none;
  flex: 1;
  font-size: 13px; color: var(--fg);
  font-family: inherit;
}

/* Filter select */
.wb-filters { display: flex; flex-direction: column; }
.wb-filter-label { font-size: 11px; font-weight: 600; color: var(--fg-3); display: block; margin-bottom: 5px; }
.wb-select {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--d-1);
}
.wb-select:focus { outline: none; border-color: var(--line-acc); }

/* KPI stats stacked */
.wb-stats { display: flex; flex-direction: column; gap: 6px; }
.wb-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.wb-stat-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.wb-stat-body { flex: 1; min-width: 0; }
.wb-stat-lbl { font-size: 11px; color: var(--fg-3); font-weight: 600; letter-spacing: 0.02em; }
.wb-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px; font-weight: 700;
  color: var(--fg);
  margin-top: 2px;
  letter-spacing: -0.02em;
}

/* Sidebar footer */
.wb-side-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.wb-side-action {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--d-1);
}
.wb-side-action:hover { background: var(--bg-3); border-color: var(--line); color: var(--fg); }
.wb-side-foot-meta {
  font-size: 11px;
  color: var(--fg-4);
  margin-top: 8px;
  padding: 0 4px;
  font-family: 'JetBrains Mono', monospace;
}

/* Main */
.wb-main {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--bg-0);
  overflow: hidden;
}
.wb-toolbar {
  display: flex; align-items: center; gap: 12px;
  height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  flex-shrink: 0;
}
.wb-tb-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--d-1);
}
.wb-tb-btn:hover { background: var(--bg-2); color: var(--fg); }
.wb-toolbar-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--fg);
}
.wb-toolbar-spacer { flex: 1; }
.wb-range-label {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--fg-3);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  font-family: 'JetBrains Mono', monospace;
}
.wb-plugin-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 9px;
  font-size: 12px;
  color: var(--fg-2);
}
.wb-plugin-chip i { color: #3b82f6; font-size: 14px; }
.wb-plugin-chip strong { color: var(--fg); }

/* Content area */
.wb-content {
  flex: 1; min-height: 0;
  overflow: auto;
  padding: 18px 20px 22px;
}

/* ── Website cards grid ──────────────────────────────────── */
.web-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.web-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 18px 18px 14px;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: all var(--d-1);
  position: relative;
  overflow: hidden;
}
.web-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--line-soft), transparent);
  opacity: 0;
  transition: opacity var(--d-2);
}
.web-card:hover {
  border-color: var(--line-acc);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.web-card.is-connected::before {
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  opacity: 0.9;
}

/* Header */
.web-card-header {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  min-width: 0;
}
.web-favicon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(74,118,74,.14);
  color: var(--acc);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.web-card-titles { flex: 1; min-width: 0; }
.web-domain {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.web-url {
  font-size: 12px; color: var(--fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.web-card-head-actions {
  display: inline-flex; gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--d-1);
}
.web-card:hover .web-card-head-actions { opacity: 1; }
.web-card-act {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 12px;
  transition: all var(--d-1);
}
.web-card-act:hover { background: var(--bg-2); color: var(--fg); }
.web-card-act.web-card-act-danger:hover { color: var(--err); background: rgba(248,113,113,.10); }

/* Status row (plugin badge + last sync) */
.web-card-status {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.web-plugin-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px; font-weight: 700;
  background: rgba(148,163,184,.16);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}
.web-plugin-badge i { font-size: 11px; }
.web-plugin-badge.active { background: rgba(34,197,94,.18); color: #15803d; }
[data-theme="dark"] .web-plugin-badge.active { color: #86efac; }
.web-sync-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
}
.web-sync-time i { font-size: 10px; opacity: 0.7; }

/* Stats strip — 3×2 grid, čisté čísla, žiadne hárkové farby */
.web-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}
.web-stat-item {
  background: var(--bg-1);
  padding: 11px 8px 10px;
  text-align: center;
  transition: background var(--d-1);
}
.web-stat-item:hover { background: var(--bg-2); }
.web-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15.5px; font-weight: 700;
  color: var(--fg) !important;            /* prebije inline style="color:..." z legacy markupu */
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.web-stat-lbl {
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Footer akcie */
.web-card-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 4px;
}
.web-card-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.web-card-btn:hover { background: var(--bg-3); border-color: var(--line); color: var(--fg); }
.web-card-btn.web-card-btn-primary {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}
.web-card-btn.web-card-btn-primary:hover { filter: brightness(1.08); }

/* API key prompt (no plugin yet) */
.web-card-apikey {
  background: rgba(59,130,246,.06);
  border: 1px dashed rgba(59,130,246,.25);
  border-radius: 10px;
  padding: 10px 12px;
}
.web-card-apikey-lbl {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-bottom: 4px;
  font-weight: 600;
}
.web-card-apikey-lbl i { margin-right: 4px; color: #3b82f6; }
.web-card-apikey code {
  display: block;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--acc);
  word-break: break-all;
  user-select: all;
}

/* ── Detail view sidebar ─────────────────────────────────── */
.wb-back-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
  transition: all var(--d-1);
}
.wb-back-btn:hover { background: var(--bg-3); border-color: var(--line); color: var(--fg); }
.wb-web-card {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  margin-bottom: 6px;
}
.wb-web-favicon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(74,118,74,.16);
  color: var(--acc);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.wb-web-info { flex: 1; min-width: 0; }
.wb-web-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-web-domain {
  font-size: 11.5px; color: var(--fg-3);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-web-plugin-badge { flex-shrink: 0; }
.wb-web-plugin-badge .web-plugin-badge { font-size: 9.5px; padding: 2px 6px; }

/* Tabs (vertical nav in sidebar) */
.wb-tabs { display: flex; flex-direction: column; gap: 2px; }
.wb-tab,
.wdm-tab.wb-tab {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 13.5px; font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all var(--d-1);
}
.wb-tab:hover { background: var(--bg-2); color: var(--fg); }
.wb-tab.active {
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 700;
}
.wb-tab-ico { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.wb-tab.active .wb-tab-ico { color: var(--acc); }

/* Date range — presets stacked v sidebare */
.wb-daterange {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.wb-preset,
.wdm-preset.wb-preset {
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--fg-2);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  transition: all var(--d-1);
}
.wb-preset:hover { background: var(--bg-3); color: var(--fg); }
.wb-preset.active {
  background: var(--acc-soft);
  color: var(--acc);
  border-color: var(--line-acc);
}
.wb-date-inputs {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px;
}
.wb-date-input { height: 34px; font-size: 12.5px; }

/* Mobile */
.wb-mob-menu { display: none; }
@media (max-width: 900px) {
  .wb-view { grid-template-columns: 1fr; }
  .wb-side {
    position: absolute;
    inset: 0 auto 0 0;
    width: 280px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--d-3) var(--e-out);
    box-shadow: 8px 0 28px rgba(0,0,0,.3);
  }
  .wb-shell.side-open .wb-side { transform: translateX(0); }
  .wb-mob-menu { display: inline-flex; }
  .wb-plugin-chip { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WEBSITES DETAIL — overview, sales, customers, traffic, orders, export
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Overview stats grid ─────────────────────────────────── */
.web-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.web-detail-stat,
.web-detail-stat.glass {
  position: relative;
  background: var(--bg-1) !important;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px 16px 14px;
  transition: all var(--d-1);
  overflow: hidden;
}
.web-detail-stat:hover {
  border-color: var(--line);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
/* Ikona stat karty — jednotne olivová, žiadny rainbow */
.web-detail-stat > div:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--acc-soft) !important;
  color: var(--acc) !important;        /* prebije inline color:${s.color} z JS */
  font-size: 13px !important;
  margin-bottom: 10px !important;
}
.web-detail-stat > div:first-child i { color: var(--acc) !important; }
.web-detail-stat .val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 21px !important;
  font-weight: 700;
  color: var(--fg) !important;            /* prebije inline color */
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.web-detail-stat .lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-3);
  margin-top: 6px;
  letter-spacing: 0.01em;
}
.web-detail-stat .sub {
  font-size: 11px;
  color: var(--fg-4);
  margin-top: 4px;
  line-height: 1.35;
}

/* ── Charts layout ───────────────────────────────────────── */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.chart-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) {
  .chart-grid, .chart-grid-3 { grid-template-columns: 1fr; }
  .chart-box[style*="grid-column"] { grid-column: auto !important; }
}

.chart-box,
.chart-box.glass {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 18px 16px;
  position: relative;
}

.detail-section-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: -0.005em;
}
.detail-section-title i {
  font-size: 15px;
  width: 22px;
  text-align: center;
}

/* Generic .card.glass used inside detail tabs */
.card,
.card.glass {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}

/* ── Orders table ────────────────────────────────────────── */
.orders-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.orders-tbl thead th {
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
}
.orders-tbl thead th:first-child { border-radius: 8px 0 0 0; }
.orders-tbl thead th:last-child  { border-radius: 0 8px 0 0; }
.orders-tbl tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-2);
  vertical-align: middle;
}
.orders-tbl tbody tr:hover td { background: var(--bg-2); }
.orders-tbl tbody tr:last-child td { border-bottom: 0; }
.order-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Top pages list (Traffic tab) ────────────────────────── */
.top-page-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.top-page-row:last-child { border-bottom: 0; }
.top-page-row:hover { background: var(--bg-2); border-radius: 8px; }
.top-page-bar {
  width: 130px;
  height: 6px;
  background: var(--bg-2);
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}
.top-page-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--acc), #66a366);
  border-radius: 99px;
}

/* ── Dead stock list / Top customers — generic row look ─── */
#wdDeadStockList,
#wdTopCustomers,
#wdCitiesList,
#chartCategoriesLegend,
#chartGeoLegend,
#chartCustomerTypeLegend,
#chartDevicesLegend {
  font-size: 13px;
  color: var(--fg-2);
}
#wdDeadStockList > div,
#wdTopCustomers > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
}
#wdDeadStockList > div:last-child,
#wdTopCustomers > div:last-child { border-bottom: 0; }
#wdDeadStockList > div:hover,
#wdTopCustomers > div:hover { background: var(--bg-2); border-radius: 8px; }

/* Legend boxes (chart legends) */
#chartCategoriesLegend > div,
#chartGeoLegend > div,
#chartCustomerTypeLegend > div,
#chartDevicesLegend > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
}

/* ── Freshness banner + diagnostic panel ─────────────────── */
.wd-freshness {
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.22);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--fg-2);
  margin-bottom: 16px;
}
.wd-freshness strong { color: #b45309; }
[data-theme="dark"] .wd-freshness strong { color: #fcd34d; }
.wd-diag-panel {
  background: rgba(248,113,113,.06);
  border: 1px solid rgba(248,113,113,.22);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--fg-2);
  margin-bottom: 16px;
}

/* ── Export cards ────────────────────────────────────────── */
.export-card {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  cursor: pointer;
  transition: all var(--d-1);
}
.export-card:hover {
  border-color: var(--line-acc);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.export-card i { display: block; }

/* ── Spinner used inside #wdStats placeholder ────────────── */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--line);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: wb-spin 0.9s linear infinite;
}
@keyframes wb-spin { to { transform: rotate(360deg); } }

/* ── AI Asistent tab (.wdai-*) ───────────────────────────── */
.wdai-wrap { display: flex; flex-direction: column; min-height: 540px; }
.wdai-attach-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
  max-width: 540px;
  margin: 20px auto;
}
.wdai-attach-card .icon-bg {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: rgba(168,85,247,.14);
  color: #a855f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.wdai-attach-card h3 {
  margin: 0 0 8px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 17px;
  color: var(--fg);
}
.wdai-attach-card p {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.55;
  margin: 0 0 18px;
}
.wdai-chat {
  display: flex !important;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  min-height: 580px;
  max-height: calc(100vh - 200px);
}
.wdai-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.wdai-agent-avatar {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(168,85,247,.14);
  color: #a855f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.wdai-agent-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.wdai-agent-sub {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 2px;
}
.wdai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wdai-empty {
  margin: auto;
  text-align: center;
  color: var(--fg-3);
}
.wdai-empty p { font-size: 13.5px; margin: 12px 0 14px; }
.wdai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
.wdai-suggestions button {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--d-1);
  font-family: inherit;
}
.wdai-suggestions button:hover {
  border-color: var(--line-acc);
  background: var(--acc-soft);
  color: var(--acc);
}
.wdai-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-1);
}
.wdai-input {
  flex: 1;
  resize: none;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--fg);
  outline: none;
  min-height: 42px;
  max-height: 160px;
  transition: border-color var(--d-1);
}
.wdai-input:focus { border-color: var(--line-acc); }
.wdai-send {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--acc);
  border: 0;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter var(--d-1);
}
.wdai-send:hover { filter: brightness(1.1); }
.wdai-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* AI chat messages */
.wdai-msg { display: flex; gap: 10px; align-items: flex-start; }
.wdai-msg.is-user { flex-direction: row-reverse; }
.wdai-msg-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
}
.wdai-msg.is-user .wdai-msg-bubble {
  background: var(--acc-soft);
  border-color: var(--line-acc);
  color: var(--acc);
}

/* ── Blog Studio tab (.bp-*) ─────────────────────────────── */
.bp-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  min-height: 580px;
}
@media (max-width: 1100px) {
  .bp-layout { grid-template-columns: 1fr; }
}
.bp-list-pane {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.bp-head h3 {
  margin: 0;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.bp-agent-pick { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.bp-list { flex: 1; overflow-y: auto; padding: 8px; }
.bp-empty {
  padding: 36px 16px;
  text-align: center;
  color: var(--fg-3);
}
.bp-empty i { font-size: 30px; opacity: 0.4; display: block; margin-bottom: 10px; }
.bp-empty p { font-size: 13.5px; font-weight: 600; margin: 0 0 4px; color: var(--fg-2); }
.bp-empty small { font-size: 11.5px; }

.bp-main {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 24px;
  min-height: 0;
}
.bp-welcome {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  min-height: 360px;
  text-align: center;
  color: var(--fg-3);
}
.bp-welcome i {
  font-size: 44px;
  color: var(--acc);
  opacity: 0.5;
  margin-bottom: 16px;
}
.bp-welcome h3 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 18px;
  color: var(--fg);
  margin: 0 0 8px;
}
.bp-welcome p { font-size: 13.5px; line-height: 1.6; max-width: 380px; margin: 0; }
.bp-welcome strong { color: var(--acc); }

/* Generic btn-xs / btn-add / btn-sec used inside detail */
.btn-xs {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.btn-xs:hover { background: var(--bg-3); border-color: var(--line); color: var(--fg); }
.btn-xs.btn-xs-primary {
  background: var(--acc); border-color: var(--acc); color: #fff;
}
.btn-xs.btn-xs-primary:hover { filter: brightness(1.08); }
.btn-xs.btn-xs-danger:hover { color: var(--err); background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.30); }

/* ═══════════════════════════════════════════════════════════════════════
   WEBSITES OVERVIEW — fresh v3 design (hero KPI + sparklines + ribbon + insights)
   ═══════════════════════════════════════════════════════════════════════ */
.ov-grid { display: flex; flex-direction: column; gap: 16px; }

/* Banner */
.ov-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
}
.ov-banner i { font-size: 14px; flex-shrink: 0; }
.ov-banner strong { color: var(--fg); }
.ov-banner-ok   { background: rgba(74,118,74,.10); border: 1px solid rgba(74,118,74,.20); color: var(--acc); }
.ov-banner-warn { background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.25); color: #b45309; }
[data-theme="dark"] .ov-banner-warn { color: #fcd34d; }

/* ── Hero: 4 KPI karty ───────────────────────────────────── */
.ov-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1200px) { .ov-hero { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ov-hero { grid-template-columns: 1fr; } }

.ov-kpi {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: all var(--d-1);
}
.ov-kpi:hover {
  border-color: var(--line);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.ov-kpi-primary {
  background: linear-gradient(160deg, rgba(74,118,74,.10), transparent 60%), var(--bg-1);
  border-color: var(--line-acc);
}
.ov-kpi-primary::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--acc), transparent);
}
.ov-kpi-head {
  display: flex; align-items: center; gap: 10px;
}
.ov-kpi-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(74,118,74,.16);
  color: var(--acc);
  font-size: 14px;
  flex-shrink: 0;
}
.ov-kpi-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.ov-kpi-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-top: 2px;
}
.ov-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.ov-kpi-delta.is-up    { color: var(--acc); }
.ov-kpi-delta.is-down  { color: var(--err); }
.ov-kpi-delta.is-muted { color: var(--fg-3); font-weight: 500; }
.ov-kpi-delta i        { font-size: 10px; }
.ov-kpi-spark {
  height: 36px;
  margin: 4px -4px 0;
  opacity: 0.95;
}
.ov-kpi-spark-mute { opacity: 0.55; }
.ov-spark-svg { width: 100%; height: 100%; display: block; }
.ov-kpi-foot {
  font-size: 11px;
  color: var(--fg-4);
  font-family: 'JetBrains Mono', monospace;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
  margin-top: 2px;
}

/* ── Card wrapper (ribbon + insights) ────────────────────── */
.ov-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 18px 16px;
}
.ov-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.ov-card-head h3 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.ov-card-meta { display: inline-flex; gap: 8px; }
.ov-pill {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px; font-weight: 700;
  background: var(--acc-soft);
  color: var(--acc);
  font-family: 'JetBrains Mono', monospace;
}
.ov-pill.ov-pill-mute {
  background: var(--bg-2);
  color: var(--fg-2);
}

/* ── 7-day ribbon ────────────────────────────────────────── */
.ov-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
}
.ov-day {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: 8px 6px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid transparent;
  transition: all var(--d-1);
  position: relative;
}
.ov-day:hover {
  background: var(--bg-3);
  border-color: var(--line-soft);
}
.ov-day.is-today {
  background: var(--acc-soft);
  border-color: var(--line-acc);
}
.ov-day-bar-wrap {
  height: 76px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 8px;
}
.ov-day-bar {
  width: 22px;
  min-height: 4px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--acc), #66a366);
  transition: filter var(--d-1);
}
.ov-day:hover .ov-day-bar { filter: brightness(1.1); }
.ov-day.is-today .ov-day-bar {
  background: linear-gradient(180deg, #3a5e3a, var(--acc));
  box-shadow: 0 0 0 2px rgba(74,118,74,.22);
}
.ov-day-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ov-day.is-today .ov-day-name { color: var(--acc); }
.ov-day-date {
  font-size: 10px;
  color: var(--fg-4);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 1px;
}
.ov-day-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-day-sub {
  font-size: 10px;
  color: var(--fg-3);
  margin-top: 1px;
}

/* ── Smart insights ──────────────────────────────────────── */
.ov-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .ov-insights { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ov-insights { grid-template-columns: 1fr; } }

.ov-insight {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  cursor: pointer;
  transition: all var(--d-1);
  position: relative;
}
.ov-insight:hover {
  border-color: var(--line-acc);
  transform: translateY(-1px);
  background: var(--bg-2);
}
.ov-insight.is-warn { border-color: rgba(248,113,113,.30); }
.ov-insight.is-warn:hover { border-color: rgba(248,113,113,.55); }

.ov-insight-ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.ov-insight-body { flex: 1; min-width: 0; }
.ov-insight-lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.ov-insight-val {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg);
  font-family: 'Space Grotesk', Inter, sans-serif;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-insight-vs {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg-3);
  font-family: Inter, sans-serif;
  margin-left: 6px;
}
.ov-insight-sub {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ov-insight-chev {
  color: var(--fg-4);
  font-size: 12px;
  transition: transform var(--d-1), color var(--d-1);
}
.ov-insight:hover .ov-insight-chev {
  color: var(--acc);
  transform: translateX(2px);
}
.ov-insight-act {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--fg-2);
  cursor: pointer;
  font-size: 12px;
  transition: all var(--d-1);
}
.ov-insight-act:hover { background: var(--acc); border-color: var(--acc); color: #fff; }

/* Mini progress bar inside insight */
.ov-mini-bar {
  display: inline-block;
  width: 60px;
  height: 5px;
  background: var(--bg-3);
  border-radius: 99px;
  overflow: hidden;
  vertical-align: middle;
}
.ov-mini-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--acc), #66a366);
  border-radius: 99px;
}

/* ── Quick actions ───────────────────────────────────────── */
.ov-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 1000px) { .ov-actions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .ov-actions { grid-template-columns: 1fr; } }

.ov-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.ov-action:hover {
  background: var(--bg-2);
  border-color: var(--line-acc);
  color: var(--acc);
}
.ov-action.ov-action-acc {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}
.ov-action.ov-action-acc:hover {
  filter: brightness(1.08);
  background: var(--acc);
  color: #fff;
}
.ov-action i { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   WEBSITES DETAIL — tab hero KPIs + new list/row designs
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tab hero — KPI strip nad obsahom každého tabu ──────── */
.tb-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .tb-hero { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tb-hero { grid-template-columns: 1fr; } }

.tb-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  transition: all var(--d-1);
}
.tb-kpi:hover { border-color: var(--line); transform: translateY(-1px); }
.tb-kpi.is-acc {
  background: linear-gradient(160deg, rgba(74,118,74,.08), transparent 60%), var(--bg-1);
  border-color: var(--line-acc);
}
.tb-kpi-ico {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--bg-2);
  color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.tb-kpi.is-acc .tb-kpi-ico {
  background: rgba(74,118,74,.18);
  color: var(--acc);
}
.tb-kpi-body { flex: 1; min-width: 0; }
.tb-kpi-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin-bottom: 3px;
}
.tb-kpi-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.1;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-kpi-sub {
  font-size: 11px;
  color: var(--fg-4);
  margin-top: 3px;
}

/* ── Dead stock rows ────────────────────────────────────── */
.ds-list { display: flex; flex-direction: column; gap: 6px; }
.ds-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  transition: all var(--d-1);
}
.ds-row:hover { border-color: var(--line); background: var(--bg-2); }
.ds-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-4);
  min-width: 28px;
}
.ds-ico {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(248,113,113,.12);
  color: var(--err);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ds-info { flex: 1; min-width: 0; }
.ds-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-meta {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 2px;
}
.ds-meta strong { color: var(--err); }
.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(248,113,113,.12);
  color: var(--err);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.ds-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px;
  background: rgba(74,118,74,.08);
  border: 1px solid rgba(74,118,74,.18);
  border-radius: 12px;
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.5;
}
.ds-empty i { font-size: 22px; color: var(--acc); flex-shrink: 0; }
.ds-empty strong { color: var(--acc); }

/* ── Customer extra cards ───────────────────────────────── */
.cu-extra {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .cu-extra { grid-template-columns: 1fr; } }
.cu-extra-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}
.cu-extra-ico {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.cu-extra-body { flex: 1; min-width: 0; }
.cu-extra-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin-bottom: 3px;
}
.cu-extra-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.1;
}
.cu-extra-unit {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-left: 6px;
  font-weight: 500;
  font-family: Inter, sans-serif;
}

/* ── Top customers — ranked rows with avatar ─────────────── */
.tc-list { display: flex; flex-direction: column; gap: 6px; }
.tc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  transition: all var(--d-1);
}
.tc-row:hover { border-color: var(--line); background: var(--bg-2); }
.tc-row.is-top { border-color: rgba(74,118,74,.30); }
.tc-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-4);
  min-width: 36px;
  text-align: center;
}
.tc-rank-gold,
.tc-rank-silver,
.tc-rank-bronze { font-size: 20px; }
.tc-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Space Grotesk', Inter, sans-serif;
}
.tc-info { flex: 1; min-width: 0; }
.tc-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Space Grotesk', Inter, sans-serif;
}
.tc-email {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-2);
  border-radius: 99px;
  margin-top: 7px;
  overflow: hidden;
}
.tc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--acc), #66a366);
  border-radius: 99px;
  transition: width var(--d-2);
}
.tc-stats {
  text-align: right;
  flex-shrink: 0;
  min-width: 92px;
}
.tc-stats strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--acc);
  letter-spacing: -0.01em;
}
.tc-stats span {
  display: block;
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   WEBSITES — new widgets: product leaderboard, category stacked bar,
   hourly heatmap, new-vs-ret split, conversion funnel, status distribution
   ═══════════════════════════════════════════════════════════════════════ */

/* Empty state pre rôzne widgety */
.pl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 18px;
  color: var(--fg-3);
  text-align: center;
  font-size: 13px;
}
.pl-empty i { font-size: 30px; opacity: 0.4; }
.pl-empty p { margin: 0; }

/* ── Product Leaderboard (Sales tab) ─────────────────────── */
.pl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.pl-total {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--acc);
  background: var(--acc-soft);
  padding: 5px 12px;
  border-radius: 99px;
}
.pl-leaderboard { display: flex; flex-direction: column; gap: 6px; }
.pl-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  transition: all var(--d-1);
}
.pl-row:hover { border-color: var(--line); background: var(--bg-2); }
.pl-row.is-top { border-color: rgba(74,118,74,.30); }
.pl-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-4);
  min-width: 36px;
  text-align: center;
}
.pl-row.is-top:nth-child(1) .pl-rank,
.pl-row.is-top:nth-child(2) .pl-rank,
.pl-row.is-top:nth-child(3) .pl-rank { font-size: 22px; }
.pl-info { flex: 1; min-width: 0; }
.pl-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.pl-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--fg-3);
  margin-bottom: 7px;
}
.pl-meta i { font-size: 10px; opacity: 0.7; margin-right: 4px; }
.pl-share {
  background: var(--bg-2);
  padding: 1px 8px;
  border-radius: 99px;
  font-weight: 600;
  color: var(--fg-2);
}
.pl-bar {
  width: 100%;
  height: 5px;
  background: var(--bg-2);
  border-radius: 99px;
  overflow: hidden;
}
.pl-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--acc), #66a366);
  border-radius: 99px;
}
.pl-stats {
  text-align: right;
  flex-shrink: 0;
  min-width: 96px;
}
.pl-stats strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--acc);
  letter-spacing: -0.01em;
}
.pl-stats span {
  font-size: 11px;
  color: var(--fg-4);
  margin-top: 2px;
  display: block;
}

/* ── Categories stacked bar ──────────────────────────────── */
.cs-stacked-bar {
  display: flex;
  height: 18px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--bg-2);
  margin: 6px 0 12px;
  border: 1px solid var(--line-soft);
}
.cs-seg {
  height: 100%;
  transition: filter var(--d-1);
  position: relative;
}
.cs-seg:hover { filter: brightness(1.12); }
.cs-total {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 12px;
}
.cs-total span {
  font-family: Inter, sans-serif;
  font-size: 11.5px;
  color: var(--fg-3);
  font-weight: 500;
  margin-left: 6px;
}
.cs-legend { display: flex; flex-direction: column; gap: 2px; }
.cs-leg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  transition: background var(--d-1);
}
.cs-leg-row:hover { background: var(--bg-2); }
.cs-leg-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cs-leg-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-leg-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-2);
  min-width: 70px;
  text-align: right;
}
.cs-leg-pct {
  font-size: 11px;
  color: var(--fg-3);
  min-width: 40px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Hourly Heatmap (Sales tab) ──────────────────────────── */
.hm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.hm-total {
  font-size: 12px;
  color: var(--fg-3);
}
.hm-total strong { color: var(--acc); font-family: 'JetBrains Mono', monospace; }
.hm-strip {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
  margin-bottom: 14px;
}
.hm-cell {
  --i: 0;
  aspect-ratio: 1 / 1.4;
  background: color-mix(in srgb, var(--acc) calc(var(--i) * 85%), var(--bg-2));
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 0 3px;
  transition: transform var(--d-1), filter var(--d-1);
  cursor: default;
}
.hm-cell:hover {
  transform: scale(1.1);
  filter: brightness(1.15);
  z-index: 2;
  position: relative;
}
.hm-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
}
.hm-cell[style*="--i:0"] .hm-val,
.hm-cell[style*="--i:0.0"] .hm-val { color: var(--fg-4); }
.hm-hr {
  font-size: 9px;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
  letter-spacing: -0.02em;
}
.hm-buckets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.hm-bucket {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  transition: all var(--d-1);
}
.hm-bucket.is-top {
  border-color: var(--line-acc);
  background: var(--acc-soft);
}
.hm-bucket-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hm-bucket-lbl {
  flex: 1;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-bucket-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--fg);
}
.hm-bucket.is-top .hm-bucket-val { color: var(--acc); }
@media (max-width: 800px) {
  .hm-strip { grid-template-columns: repeat(12, 1fr); }
  .hm-buckets { grid-template-columns: repeat(2, 1fr); }
}

/* ── New vs Returning split (Customers tab) ──────────────── */
.ns-split { display: flex; flex-direction: column; gap: 14px; }
.ns-bar {
  display: flex;
  height: 36px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
}
.ns-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter var(--d-1);
  min-width: 4px;
}
.ns-seg:hover { filter: brightness(1.1); }
.ns-new { background: linear-gradient(90deg, var(--acc), #5d8a5d); }
.ns-ret { background: linear-gradient(90deg, #d4a574, #b08855); }
.ns-seg-lbl {
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
}
.ns-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ns-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
}
.ns-label strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
  letter-spacing: -0.015em;
}
.ns-label span {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 3px;
  display: block;
}
.ns-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ns-dot-new { background: linear-gradient(135deg, var(--acc), #3a5e3a); }
.ns-dot-ret { background: linear-gradient(135deg, #d4a574, #b08855); }
.ns-health {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.4;
}
.ns-health i { font-size: 13px; }
.ns-health.is-excellent { background: rgba(74,118,74,.08); border: 1px solid rgba(74,118,74,.22); color: var(--acc); }
.ns-health.is-healthy   { background: rgba(212,165,116,.10); border: 1px solid rgba(212,165,116,.30); color: #b45309; }
.ns-health.is-risky     { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.25); color: var(--err); }
[data-theme="dark"] .ns-health.is-healthy { color: #fcd34d; }

/* ── Conversion Funnel (Traffic tab) ─────────────────────── */
.fn-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}
.fn-steps { display: flex; flex-direction: column; gap: 10px; }
.fn-step { width: 100%; }
.fn-step-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  min-height: 56px;
  transition: filter var(--d-1);
}
.fn-step-bar:hover { filter: brightness(1.08); }
.fn-step-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.20);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.fn-step-body { flex: 1; min-width: 0; color: #fff; }
.fn-step-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,.85);
  margin-bottom: 2px;
}
.fn-step-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.fn-step-conv {
  background: rgba(255,255,255,.18);
  color: #fff;
  padding: 6px 12px;
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  flex-shrink: 0;
}
.fn-step-conv span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-top: 2px;
}

/* ── Status Distribution (Orders tab) ────────────────────── */
.sd-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}
.sd-list { display: flex; flex-direction: column; gap: 2px; }
.sd-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  transition: background var(--d-1);
}
.sd-row:hover { background: var(--bg-2); }
.sd-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sd-lbl {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
}
.sd-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  min-width: 40px;
  text-align: right;
}
.sd-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-3);
  min-width: 44px;
  text-align: right;
}

@media (max-width: 800px) {
  .ns-labels { grid-template-columns: 1fr; }
  .fn-step-conv { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MARKETING — platform connection cards (embed v integrations tab)
   ═══════════════════════════════════════════════════════════════════════ */

/* Embed intro karta nad gridom */
.mh-embed-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(168,85,247,.08), rgba(74,118,74,.06));
  border: 1px solid rgba(168,85,247,.18);
  border-radius: 14px;
  margin-bottom: 16px;
}
.mh-embed-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(168,85,247,.18);
  color: #a855f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.mh-embed-h {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 3px;
}
.mh-embed-sub {
  font-size: 12.5px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.45;
}

/* Cards grid */
.mh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

/* Individual card */
.mh-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all var(--d-1);
}
.mh-card:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.05); }

.mh-card-strip {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}

.conn-info-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--fg-3);
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--d-1);
  z-index: 2;
}
.conn-info-btn:hover { background: var(--bg-3); color: var(--fg); }

/* Card head */
.mh-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
  padding-right: 32px;
}
.mh-brand-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.mh-ig   { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.mh-tt   { background: linear-gradient(135deg, #25f4ee, #000, #fe2c55); }
.mh-msgr { background: linear-gradient(135deg, #00c6ff, #0084ff, #a033ff); }
.mh-brand-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mh-brand-sub {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Connection status pill */
.conn-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  align-self: flex-start;
}
.conn-status.disconnected {
  background: rgba(148,163,184,.16);
  color: var(--fg-3);
}
.conn-status.connected {
  background: rgba(74,118,74,.18);
  color: var(--acc);
}
.conn-status i { font-size: 11px; }

/* Card body — inputs */
.mh-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mh-card-body .flbl,
.mh-card-body label.flbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-2);
  display: block;
  margin-bottom: 4px;
}
.mh-card-body .finp,
.mh-card-body input.finp {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--d-1);
}
.mh-card-body .finp:focus { outline: none; border-color: var(--line-acc); }
.mh-card-body details summary {
  font-size: 12px;
  color: var(--fg-3);
  cursor: pointer;
  padding: 4px 0;
}
.mh-card-body details summary:hover { color: var(--fg-2); }
.mh-card-body code {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--fg-2);
}

/* Card footer — action buttons */
.mh-card-foot {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.mh-card-foot button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
  border: 1px solid var(--line-soft);
}
.mh-card-foot .btn-add {
  background: var(--acc);
  color: #fff;
  border-color: var(--acc);
}
.mh-card-foot .btn-add:hover { filter: brightness(1.08); }
.mh-card-foot .btn-sec {
  background: var(--bg-2);
  color: var(--fg-2);
}
.mh-card-foot .btn-sec:hover { background: var(--bg-3); color: var(--fg); }
.mh-card-foot .btn-danger {
  background: rgba(248,113,113,.10);
  color: var(--err);
  border-color: rgba(248,113,113,.25);
}
.mh-card-foot .btn-danger:hover { background: rgba(248,113,113,.18); }

/* Big OAuth button (Facebook/IG/Messenger) */
.mh-card-body > .btn-add {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: filter var(--d-1);
}
.mh-card-body > .btn-add:hover { filter: brightness(1.08); }

/* Skry samostatný marketing v sidebari? — necháme tam, len redirectne (alias). */

/* ═══════════════════════════════════════════════════════════════════════
   CHAT — perfected v3 hero (capability chips, 6-card grid, grouped sessions)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Capability chips strip (nahrádza statický mascot) ───── */
.chat-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 22px;
}
.chat-cap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  letter-spacing: 0.01em;
  transition: all var(--d-1);
  cursor: default;
}
.chat-cap i {
  font-size: 12px;
  color: var(--acc);
  width: 14px;
  text-align: center;
}
.chat-cap:hover {
  border-color: var(--line-acc);
  background: var(--acc-soft);
  color: var(--acc);
  transform: translateY(-1px);
}
.chat-cap:hover i { color: var(--acc); }

/* Hide old mascot (nepoužíva sa) */
.chat-hero-mascot { display: none; }

/* ── 6-card prompt grid (3×2) ────────────────────────────── */
.chat-prompt-grid-6 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin: 0 0 22px !important;
}
@media (max-width: 980px) {
  .chat-prompt-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .chat-prompt-grid-6 { grid-template-columns: 1fr !important; }
}

/* Card override — krajší dizajn */
.chat-prompt-grid-6 .chat-prompt-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: all var(--d-1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-prompt-grid-6 .chat-prompt-card:hover {
  border-color: var(--line-acc);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.chat-prompt-grid-6 .chat-prompt-card::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--acc), transparent);
  opacity: 0;
  transition: opacity var(--d-2);
}
.chat-prompt-grid-6 .chat-prompt-card:hover::before { opacity: 1; }

.chat-prompt-grid-6 .chat-prompt-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
.chat-prompt-grid-6 .icon-orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.chat-prompt-grid-6 .icon-blue   { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.chat-prompt-grid-6 .icon-multi  { background: linear-gradient(135deg, #ec4899, #a855f7); }
.chat-prompt-grid-6 .icon-green  { background: linear-gradient(135deg, #4a764a, #6b9a6b); }
.chat-prompt-grid-6 .icon-pink   { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.chat-prompt-grid-6 .icon-yellow { background: linear-gradient(135deg, #fbbf24, #f59e0b); }

.chat-prompt-grid-6 .chat-prompt-card-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.chat-prompt-grid-6 .chat-prompt-card-desc {
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.5;
  flex: 1;
}
.chat-prompt-grid-6 .chat-prompt-card-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 9px;
  background: var(--acc-soft);
  color: var(--acc);
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ── Hero greeting — väčšia typografia ───────────────────── */
.chat-hero-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0;
}
.chat-hero-title-pri { color: var(--fg); }
.chat-hero-title-sec { color: var(--fg-3); font-weight: 500; }

/* ── Composer — polished ─────────────────────────────────── */
.chat-composer.chat-composer-hero {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.04);
  transition: all var(--d-2);
}
.chat-composer.chat-composer-hero:focus-within {
  border-color: var(--line-acc);
  box-shadow: 0 6px 22px rgba(74,118,74,.10);
}
.chat-hero-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-composer-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 14.5px;
  color: var(--fg);
  font-family: inherit;
  resize: none;
  padding: 8px 4px;
  min-height: 36px;
  max-height: 200px;
  line-height: 1.5;
}
.chat-composer-input::placeholder { color: var(--fg-4); }

.chat-plus-btn,
.chat-icon-btn {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all var(--d-1);
  flex-shrink: 0;
}
.chat-plus-btn:hover,
.chat-icon-btn:hover { background: var(--bg-3); color: var(--fg); }

.chat-send-btn {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--acc);
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: filter var(--d-1), transform var(--d-1);
}
.chat-send-btn:hover { filter: brightness(1.08); transform: scale(1.04); }
.chat-send-btn:active { transform: scale(0.96); }

/* ── Chips toolbar pod inputom ───────────────────────────── */
.chat-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.chat-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.chat-hero-chip:hover {
  background: var(--bg-3);
  color: var(--fg);
  border-color: var(--line);
}
.chat-hero-chip i { font-size: 12px; opacity: 0.85; }
.chat-hero-chip.chip-more {
  width: 36px;
  padding: 0;
  justify-content: center;
}

/* ── Sidebar — minimalistická história (ChatGPT-style) ──── */
.sess-group { margin-bottom: 14px; }
.sess-group-h {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  padding: 4px 12px 4px;
}

.sess-item {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: background var(--d-1);
  margin: 0 4px 1px;
}
.sess-item:hover { background: var(--bg-2); }
.sess-item.active { background: var(--acc-soft); }

/* Skry avatar — minimalistické */
.sess-avatar { display: none !important; }

.sess-body { min-width: 0; }
.sess-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 28px; /* miesto pre hover-share button */
}
.sess-item.active .sess-title { color: var(--acc); font-weight: 600; }
.sess-meta {
  font-size: 10.5px;
  color: var(--fg-4);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sess-shared-by {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  color: #a855f7;
  background: rgba(168,85,247,.12);
  padding: 0 5px;
  border-radius: 6px;
  margin-left: 4px;
  font-weight: 700;
  height: 14px;
}
.sess-share-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 10.5px;
  opacity: 0;
  transition: all var(--d-1);
}
.sess-item:hover .sess-share-btn { opacity: 1; }
.sess-share-btn:hover { background: var(--bg-3); color: var(--acc); }

/* Empty state */
.chat-sess-empty {
  padding: 30px 14px;
  text-align: center;
  color: var(--fg-3);
}
.chat-sess-empty i {
  font-size: 32px;
  opacity: 0.35;
  display: block;
  margin-bottom: 10px;
  color: var(--acc);
}
.chat-sess-empty p { font-size: 13px; font-weight: 600; color: var(--fg-2); margin: 0 0 4px; }
.chat-sess-empty small { font-size: 11.5px; color: var(--fg-4); }

/* ═══════════════════════════════════════════════════════════════════════
   INBOX — Intercom-style 4-column layout (olive v3)
   ═══════════════════════════════════════════════════════════════════════ */

/* Shell — 3-column layout: sidebar + thread-list + conversation + optional detail */
.ix-shell {
  position: absolute;
  inset: 0;
  display: grid !important;
  grid-template-columns: 260px 280px 1fr 300px;
  gap: 0;
  background: var(--bg-0);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.ix-shell.ix-detail-hidden { grid-template-columns: 260px 280px 1fr 0; }
@media (max-width: 1300px) { .ix-shell { grid-template-columns: 240px 260px 1fr; } .ix-detail { display: none !important; } }
@media (max-width: 900px)  {
  .ix-shell { grid-template-columns: 240px 1fr; }
  .ix-main  { display: none; }
  .ix-shell.conv-open .ix-main      { display: flex; }
  .ix-shell.conv-open .ix-list-pane { display: none; }
}
@media (max-width: 600px)  {
  .ix-shell { grid-template-columns: 1fr; }
  .ix-side  { display: none; }
  .ix-list-pane { display: flex; }
  .ix-main  { display: none; }
  .ix-shell.conv-open .ix-main      { display: flex; }
  .ix-shell.conv-open .ix-list-pane { display: none; }
  .ix-shell.side-open .ix-side {
    display: flex;
    position: absolute; inset: 0; width: 260px;
    z-index: 20;
    box-shadow: 8px 0 28px rgba(0,0,0,.35);
  }
}

/* ══ LEFT SIDEBAR ══════════════════════════════════════════════ */
.ix-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 14px 0 0;
}

/* Compose button — mirrors .ml-compose from mail */
.ix-compose {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 12px 12px;
  padding: 0 20px 0 14px;
  height: 52px;
  background: linear-gradient(135deg, #4a764a, #3a5e3a);
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(74,118,74,.30), inset 0 1px 0 rgba(255,255,255,.18);
  transition: all var(--d-1);
  text-align: left;
  flex-shrink: 0;
}
.ix-compose:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 18px rgba(74,118,74,.38); }
.ix-compose:active { transform: translateY(0); }
.ix-compose-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.ix-compose-text { color: #fff; white-space: nowrap; }

/* Folder navigation — mirrors .ml-folder from mail */
.ix-folders {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 8px 8px;
}
.ix-folder {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all var(--d-1);
  position: relative;
}
.ix-folder:hover { background: var(--bg-2); color: var(--fg); }
.ix-folder.is-active {
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 600;
}
.ix-folder.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--acc);
  border-radius: 0 3px 3px 0;
}
.ix-folder-ico {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
  color: var(--fg-3);
}
.ix-folder.is-active .ix-folder-ico { color: var(--acc); }
.ix-folder-name { flex: 1; }
.ix-folder-count {
  background: var(--acc);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

/* Section header */
.ix-side-section {
  padding: 14px 20px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-4);
  flex-shrink: 0;
}

/* Online teammates list */
.ix-online-list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 8px;
  min-height: 0;
}
.ix-online-list::-webkit-scrollbar { width: 4px; }
.ix-online-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.ix-online-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background var(--d-1);
  text-align: left;
  font-family: inherit;
  position: relative;
}
.ix-online-item:hover { background: var(--bg-2); }
.ix-online-item:hover::after {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 10px;
  color: var(--fg-4);
  font-size: 10px;
}
.ix-online-ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  position: relative;
  flex-shrink: 0;
  /* NO overflow:hidden — that clips the status dot; image clips itself via border-radius */
}
.ix-online-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ix-online-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--bg-1);
}
.ix-online-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.ix-online-empty { padding: 12px 12px; color: var(--fg-4); font-size: 12px; }

/* Sidebar footer — current user */
.ix-side-foot {
  border-top: 1px solid var(--line-soft);
  padding: 8px 8px;
  position: relative;
  flex-shrink: 0;
}
.ix-side-user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--d-1);
  text-align: left;
  font-family: inherit;
}
.ix-side-user:hover { background: var(--bg-2); }
.ix-side-ava {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.ix-side-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ix-side-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--bg-1);
}
.ix-side-info { flex: 1; min-width: 0; }
.ix-side-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ix-side-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ok);
  margin-top: 1px;
}
.ix-side-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
}

/* ── Sidebar user footer (clean, no popup) ──────────────────── */
.ix-side-sec {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  margin: 0 8px 6px;
  background: var(--acc-soft);
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--acc);
}
.ix-side-sec i { font-size: 12px; }

.ix-side-user-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 10px;
}
.ix-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  color: var(--fg-3);
  font-size: 13px;
  transition: all var(--d-1);
  text-decoration: none;
  flex-shrink: 0;
}
.ix-logout-btn:hover { background: rgba(239,68,68,.12); color: #ef4444; }

/* ── Detail panel security card ─────────────────────────────── */
.ix-sec-card {
  padding: 20px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ix-sec-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #4a764a, #3a5e3a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 14px;
  box-shadow: 0 4px 16px rgba(74,118,74,.28);
}
.ix-sec-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.ix-sec-sub {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 240px;
}
.ix-feat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-bottom: 14px;
}
.ix-feat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--bg-2);
  border-radius: 10px;
  text-align: left;
  border: 1px solid var(--line-soft);
}
.ix-feat-ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  flex-shrink: 0;
}
.ix-feat-body { flex: 1; min-width: 0; }
.ix-feat-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
}
.ix-feat-desc {
  font-size: 11px;
  color: var(--fg-4);
  margin-top: 1px;
}
.ix-sec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--acc-soft);
  color: var(--acc);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}
.ix-sec-badge i { font-size: 11px; }

/* Separator in conv header actions */
.ix-conv-sep {
  width: 1px;
  height: 20px;
  background: var(--line-soft);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── 1) Far-left rail (slim icon nav) ────────────────────── */
.ix-rail {
  background: var(--bg-1);
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 6px;
}
.ix-rail-btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  position: relative;
  transition: all var(--d-1);
}
.ix-rail-btn:hover { background: var(--bg-2); color: var(--fg); }
.ix-rail-btn.is-active {
  background: var(--acc-soft);
  color: var(--acc);
}
.ix-rail-btn.is-active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  background: var(--acc);
  border-radius: 0 3px 3px 0;
}
.ix-rail-me .ix-rail-ava {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  position: relative;
  overflow: hidden;
}
.ix-rail-me .ix-rail-ava img { width: 100%; height: 100%; object-fit: cover; }
.ix-rail-me .ix-rail-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 11px; height: 11px;
  background: #22c55e;
  border: 2px solid var(--bg-1);
  border-radius: 50%;
}
.ix-rail-divider {
  width: 24px;
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}
.ix-rail-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.ix-rail-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--err);
  color: #fff;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}
.ix-rail-bottom { padding-top: 8px; }
.ix-rail-new {
  background: var(--acc) !important;
  color: #fff !important;
}
.ix-rail-new:hover { filter: brightness(1.08); }

/* ── 2) Middle-left list pane ───────────────────────────── */
.ix-list-pane {
  background: var(--bg-1);
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.ix-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
}
.ix-list-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.015em;
}
.ix-icon-btn {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all var(--d-1);
}
.ix-icon-btn:hover { background: var(--bg-2); color: var(--fg); }
.ix-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 8px;
}
.ix-list-count {
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 600;
}
.ix-list-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.ix-list-sort:hover { background: var(--bg-2); }
.ix-list-sort i { font-size: 10px; opacity: 0.7; }

.ix-search {
  margin: 0 12px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  transition: border-color var(--d-1);
}
.ix-search:focus-within { border-color: var(--line-acc); }
.ix-search i { color: var(--fg-3); font-size: 12px; }
.ix-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 13px;
  color: var(--fg);
  font-family: inherit;
}

.ix-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 6px 12px;
}
.ix-list::-webkit-scrollbar { width: 6px; }
.ix-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* Force the JS-rendered thread rows to use Intercom-style.
   Existing inbox-v3.js emits various class names; cover the common ones. */
.ix-list .tm-thread,
.ix-list .tm-row,
.ix-list .tm-list-item,
.ix-list > div:not(.tm-list-loading):not(.tm-list-empty) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--d-1);
  position: relative;
  margin: 0 6px 1px;
}
.ix-list .tm-thread:hover,
.ix-list .tm-row:hover,
.ix-list .tm-list-item:hover { background: var(--bg-2); }
.ix-list .tm-thread.is-active,
.ix-list .tm-thread.active,
.ix-list .tm-row.is-active,
.ix-list .tm-row.active,
.ix-list .tm-list-item.is-active {
  background: var(--acc-soft);
}
.ix-list .tm-thread.is-active::before,
.ix-list .tm-row.is-active::before,
.ix-list .tm-list-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--acc);
  border-radius: 0 3px 3px 0;
}

/* ── 3) Center conversation ─────────────────────────────── */
.ix-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-0);
  overflow: hidden;
  position: relative; /* needed for drag overlay positioning */
}

/* ── Drag & Drop overlay ─────────────────────────────────────── */
.ix-drop-overlay {
  position: absolute;
  inset: 8px;
  background: var(--bg-1);
  border: 2.5px dashed var(--acc);
  border-radius: 16px;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-2);
  backdrop-filter: blur(6px);
}
.ix-drop-overlay.is-active {
  display: flex;
  pointer-events: auto;
  opacity: 1;
  animation: ixDropIn var(--d-2) var(--e-out);
}
@keyframes ixDropIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.ix-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  pointer-events: none;
}
.ix-drop-inner i {
  font-size: 52px;
  color: var(--acc);
  animation: ixDropBounce 0.9s ease-in-out infinite alternate;
}
@keyframes ixDropBounce {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-10px) scale(1.05); }
}
.ix-drop-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.ix-drop-sub {
  font-size: 13px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.ix-empty {
  margin: auto;
  text-align: center;
  padding: 40px 24px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ix-empty-* classes (used in new inbox.php) */
.ix-empty-ico {
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border-radius: 24px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.ix-empty-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
}
.ix-empty-sub {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.55;
  margin-bottom: 18px;
  max-width: 320px;
}
.ix-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: var(--grad-acc);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(74,118,74,.28);
  transition: filter var(--d-1);
}
.ix-empty-cta:hover { filter: brightness(1.08); }
/* legacy alias — old JS/PHP may still use .tm-empty-* inside ix-empty */
.ix-empty .tm-empty-ico  { width:76px;height:76px;margin:0 auto 18px;border-radius:24px;background:var(--acc-soft);color:var(--acc);display:inline-flex;align-items:center;justify-content:center;font-size:30px; }
.ix-empty .tm-empty-title { font-family:'Space Grotesk',Inter,sans-serif;font-size:18px;font-weight:700;color:var(--fg);margin-bottom:6px; }
.ix-empty .tm-empty-sub   { font-size:13px;color:var(--fg-3);line-height:1.55;margin-bottom:18px; }
.ix-empty .tm-quick-new   { display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:var(--acc);color:#fff;border:0;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit; }
.ix-empty .tm-quick-new:hover { filter: brightness(1.08); }

/* POZOR: ŽIADNY !important na display — inak inline `style="display:none"`
   z tmCloseConv() je ignorované a empty+conv sa zobrazia spolu (rozbitý layout).
   JS na otvorení nastavuje tmConv.style.display='flex' — to inline beat-uje CSS. */
.ix-conv {
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.ix-conv-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
  min-height: 60px;
  flex-shrink: 0;
}
.ix-conv-ava {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  position: relative;
  flex-shrink: 0;
}
.ix-conv-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ix-conv-info { flex: 1; min-width: 0; }
.ix-conv-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ix-conv-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 1px;
}
.ix-conv-actions { display: inline-flex; gap: 2px; }
#tmStarBtn.is-on { color: #f59e0b; }
#tmStarBtn.is-on:hover { background: rgba(245,158,11,.10); }

.ix-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 24px 22px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-0);
}
.ix-msgs::-webkit-scrollbar { width: 6px; }
.ix-msgs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* Composer */
.ix-composer {
  background: var(--bg-1);
  border-top: 1px solid var(--line-soft);
  padding: 12px 18px 14px;
  flex-shrink: 0;
}
.ix-composer-row { display: flex; }
.ix-input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 14px;
  color: var(--fg);
  font-family: inherit;
  resize: none;
  min-height: 36px;
  max-height: 160px;
  padding: 6px 0;
  line-height: 1.5;
}
.ix-input::placeholder { color: var(--fg-4); }
.ix-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
}
.ix-composer-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ix-composer-hint {
  font-size: 10.5px;
  color: var(--fg-4);
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
}
.ix-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  background: var(--acc);
  border: 0;
  border-radius: 9px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition: filter var(--d-1), transform var(--d-1);
}
.ix-send-btn:hover { filter: brightness(1.08); }
.ix-send-btn:active { transform: scale(0.97); }

/* ── 4) Right details / Copilot panel ───────────────────── */
.ix-detail {
  background: var(--bg-1);
  border-left: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  transition: all var(--d-2);
}
.ix-detail.is-collapsed {
  width: 0;
  overflow: hidden;
  border-left: 0;
}
.ix-detail-tabs {
  display: flex;
  border-bottom: 1px solid var(--line-soft);
  padding: 0 16px;
  flex-shrink: 0;
}
.ix-detail-tab {
  flex: 1;
  height: 48px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--d-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ix-detail-tab:hover { color: var(--fg); }
.ix-detail-tab.is-active {
  color: var(--acc);
  border-bottom-color: var(--acc);
}
.ix-detail-tab i { font-size: 12px; }
.ix-detail-pane {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.ix-empty-pane {
  text-align: center;
  padding: 0;
  color: var(--fg-3);
  overflow-y: auto;
}
/* Legacy empty-pane with direct icon+p (copilot-style fallback) */
.ix-empty-pane > i {
  font-size: 38px;
  color: var(--acc);
  opacity: 0.35;
  display: block;
  margin: 40px auto 14px;
}
.ix-empty-pane > p {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  padding: 0 18px;
}

/* Copilot pane */
.ix-cop-hello {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(168,85,247,.10), rgba(74,118,74,.08));
  border: 1px solid rgba(168,85,247,.20);
  border-radius: 12px;
  margin-bottom: 14px;
}
.ix-cop-ava {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(168,85,247,.20);
  color: #a855f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.ix-cop-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
}
.ix-cop-sub {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 1px;
}
.ix-cop-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.ix-cop-chip {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.ix-cop-chip:hover {
  background: var(--acc-soft);
  border-color: var(--line-acc);
  color: var(--acc);
}
.ix-cop-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.ix-cop-row { display: flex; flex-direction: column; gap: 6px; }
.ix-cop-msg {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.ix-cop-msg-user {
  align-self: flex-end;
  background: var(--acc-soft);
  color: var(--acc);
  max-width: 90%;
}
.ix-cop-msg-bot {
  align-self: flex-start;
  background: var(--bg-2);
  color: var(--fg);
  max-width: 100%;
}
.ix-cop-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  margin-top: auto;
}
.ix-cop-input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 13px;
  color: var(--fg);
  font-family: inherit;
}
.ix-cop-input button {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--acc);
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}
.ix-cop-input button:hover { filter: brightness(1.08); }

/* ── Mobile FAB & backdrop ─────────────────────────────────── */
.ix-mob-fab {
  display: none;
  position: fixed;
  top: calc(var(--top-h) + 12px);
  left: 12px;
  width: 40px; height: 40px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  cursor: pointer;
  z-index: 48;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: all var(--d-1);
}
.ix-mob-fab:hover { background: var(--bg-2); }
@media (max-width: 900px) {
  .ix-mob-fab { display: inline-flex; }
  .ix-shell.conv-open .ix-mob-fab { display: none; }
  .ix-mob-back { display: inline-flex !important; }
}
.ix-mob-back { display: none; }

.ix-mob-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 19;
  backdrop-filter: blur(2px);
}
.ix-mob-backdrop.open { display: block; }

/* ── Attachment strip above composer ──────────────────────── */
.ix-att-strip {
  padding: 8px 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ═════════════════════════════════════════════════════════════════════
   DASHBOARD V3 — Home redesign (real-data hero, KPIs, charts, team)
   prefix: .dh-, .kpi
   ═════════════════════════════════════════════════════════════════════ */

#sec-dashboard { animation: dhFadeIn .4s ease-out; }
@keyframes dhFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── HERO ────────────────────────────────────────────────────────── */
.dh-hero {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: 32px 36px 28px;
  background: linear-gradient(135deg, rgba(74,118,74,.10), rgba(74,118,74,.03) 40%, rgba(74,118,74,.08));
  border: 1px solid var(--line);
  margin-bottom: 22px;
  isolation: isolate;
}
[data-theme="light"] .dh-hero {
  background: linear-gradient(135deg, rgba(74,118,74,.08), rgba(255,255,255,.4) 50%, rgba(74,118,74,.06));
}
.dh-hero__bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(800px 360px at 90% -10%, rgba(74,118,74,.18), transparent 60%),
    radial-gradient(600px 320px at 0% 110%, rgba(90,158,106,.10), transparent 60%);
  animation: dhBgPulse 14s ease-in-out infinite alternate;
}
@keyframes dhBgPulse {
  from { transform: scale(1) translate(0,0); opacity: .9; }
  to   { transform: scale(1.05) translate(-12px, 6px); opacity: 1; }
}
.dh-hero__inner { position: relative; z-index: 1; }

.dh-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
/* Hero — clean design + ambient satellite map ako background z prava do ľava */
.dh-hero {
  position: relative;
  overflow: hidden;            /* aby mapa nepretiekla mimo card */
  min-height: 380px;           /* aby mapa mala explicitnú výšku pri Leaflet init */
}
.dh-hero__inner {
  position: relative;
  z-index: 2;                  /* nad mapou */
}
.dh-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.dh-hero__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 50%;              /* text v ľavej polovici — mapa fade-uje do 60% */
}
@media (max-width: 1100px) {
  .dh-hero__content { max-width: 100%; }
}

/* AMBIENT MAP — full hero, plynule sa rozplýva do lava cez mask-image */
.dh-hero-map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 75%;                   /* širšia mapa — viac priestoru pre fade */
  z-index: 1;                   /* pod textmi */
  pointer-events: auto;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  overflow: hidden;
  /* MASK — mapa skutočne fade-uje transparent doľava, nie len overlay */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,0.05) 10%,
    rgba(0,0,0,0.25) 20%,
    rgba(0,0,0,0.55) 32%,
    rgba(0,0,0,0.85) 45%,
    rgba(0,0,0,1) 60%
  );
  mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,0.05) 10%,
    rgba(0,0,0,0.25) 20%,
    rgba(0,0,0,0.55) 32%,
    rgba(0,0,0,0.85) 45%,
    rgba(0,0,0,1) 60%
  );
}
.dh-hero-map-canvas {
  width: 100%;
  height: 100%;
}
/* Fade overlay div sa už nepoužíva (mask-image robí všetko) */
.dh-hero-map-fade { display: none; }
.dh-hero-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.5);
  z-index: 6;
  color: var(--acc);
  font-size: 22px;
  backdrop-filter: blur(2px);
}
.dh-hero-map-legend {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  pointer-events: auto;
}
.dh-hero-map-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: rgba(0,0,0,.65);
  color: #fff;
  border-radius: 7px;
  font: 700 10.5px Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
}
.dh-hero-map-tag i { color: #84cc16; }
.dh-hero-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(0,0,0,.65);
  color: #fff;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 10px;
  backdrop-filter: blur(6px);
  transition: all .15s;
}
.dh-hero-map-link:hover { background: var(--acc, #4a764a); transform: scale(1.08); }

@media (max-width: 1100px) {
  /* Na menších obrazovkách skry ambient mapu — text by inak nebol čitateľný */
  .dh-hero-map { display: none; }
}

/* ═══ KOMPAKTNÝ WEATHER CHIP (len temp + city + slider) ═══ */
.dh-wx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: all .15s;
}
.dh-wx-chip:hover { border-color: var(--acc); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.dh-wx-chip-nav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.dh-wx-chip-nav:hover { background: var(--bg-2, var(--bg2)); color: var(--acc); }
.dh-wx-chip-nav[disabled] { opacity: .3; cursor: not-allowed; }
.dh-wx-chip-nav[disabled]:hover { background: transparent; color: var(--fg-3); }

.dh-wx-chip-body {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}
.dh-wx-chip-ico {
  font-size: 18px;
  color: var(--acc, #4a764a);
}
.dh-wx-chip-temp {
  font: 800 18px/1 'Space Grotesk', Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--text, var(--fg));
}
.dh-wx-chip-temp small {
  font: 600 10px Inter, sans-serif;
  color: var(--fg-3);
  margin-left: 1px;
}
.dh-wx-chip-city {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 12.5px Inter, sans-serif;
  color: var(--fg-2);
  padding-right: 4px;
  border-right: 1px solid var(--line, var(--border));
  margin-right: 2px;
  padding-right: 10px;
}
.dh-wx-chip-dots {
  display: flex;
  gap: 3px;
  align-items: center;
  padding-right: 4px;
}
.dh-wx-chip-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line, var(--border, #cbd5e1));
  transition: all .2s;
}
.dh-wx-chip-dot.is-active {
  background: var(--acc);
  width: 14px;
  border-radius: 2px;
}

/* ═══ PREDAJNE NA MAPE — samostatná sekcia pod hero ═══ */
.dh-locations {
  margin: 24px 0;
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 18px;
  padding: 20px;
}
.dh-locations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.dh-locations-head h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--text, var(--fg));
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dh-locations-head h2 i { color: var(--acc); }
.dh-locations-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dh-locations-count {
  font: 700 11px Inter, sans-serif;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dh-loc-btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  font: 600 12.5px Inter, sans-serif;
  border: 1px solid var(--line, var(--border));
  background: var(--bg, var(--bg-1));
  color: var(--text, var(--fg));
  transition: all .15s;
}
.dh-loc-btn-sec:hover { border-color: var(--acc); color: var(--acc); }

.dh-locations-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .dh-locations-grid { grid-template-columns: 1fr; }
}

/* Location cards (per-city) */
.dh-loc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}
.dh-loc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg, var(--bg-1));
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
  position: relative;
}
.dh-loc-card:hover {
  border-color: var(--acc);
  transform: translateX(2px);
}
.dh-loc-card.is-active {
  background: linear-gradient(135deg, rgba(74,118,74,.08), rgba(74,118,74,.02));
  border-color: var(--acc);
  box-shadow: 0 4px 12px rgba(74,118,74,.12);
}
.dh-loc-card-flag {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.dh-loc-card-body { flex: 1; min-width: 0; }
.dh-loc-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}
.dh-loc-card-name {
  font: 700 13.5px Inter, sans-serif;
  color: var(--text, var(--fg));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dh-loc-card-temp {
  font: 800 16px/1 'Space Grotesk', Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--text, var(--fg));
  flex-shrink: 0;
}
.dh-loc-card-temp small {
  font: 600 10px Inter, sans-serif;
  color: var(--fg-3);
}
.dh-loc-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 11px Inter, sans-serif;
  color: var(--fg-3);
  margin-top: 2px;
}
.dh-loc-card-meta i { font-size: 10px; }
.dh-loc-card-stats {
  font: 500 10.5px Inter, sans-serif;
  color: var(--fg-3);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dh-loc-card-del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 10px;
  opacity: 0;
  transition: all .15s;
}
.dh-loc-card:hover .dh-loc-card-del { opacity: 0.6; }
.dh-loc-card-del:hover { background: rgba(239,68,68,.1); color: #ef4444; opacity: 1 !important; }
.dh-loc-card-del[disabled] { display: none; }

/* Big map */
.dh-loc-map-wrap {
  position: relative;
  min-height: 380px;
}
.dh-loc-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line, var(--border));
  background: var(--bg-2);
}
.dh-loc-map-canvas {
  width: 100%;
  height: 100%;
}
.dh-loc-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.6);
  z-index: 6;
  color: var(--acc);
  font-size: 22px;
  backdrop-filter: blur(2px);
}
.dh-loc-map-legend {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}
.dh-loc-map-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(0,0,0,.7);
  color: #fff;
  border-radius: 7px;
  font: 700 11px Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}
.dh-loc-map-tag i { color: #84cc16; }
.dh-loc-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(0,0,0,.7);
  color: #fff;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 11px;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  transition: all .15s;
}
.dh-loc-map-link:hover { background: var(--acc); transform: scale(1.05); }

@media (max-width: 720px) {
  .dh-locations { padding: 14px; }
  .dh-loc-list { max-height: 240px; }
  .dh-loc-map-wrap, .dh-loc-map { min-height: 300px; }
}
.dh-live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--acc-soft);
  border: 1px solid var(--line-acc);
  color: var(--acc);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.dh-live__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 3px rgba(74,118,74,.20), 0 0 10px var(--acc);
  animation: dhPulse 2s infinite;
}
@keyframes dhPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(74,118,74,.22), 0 0 10px var(--acc); }
  50%     { box-shadow: 0 0 0 6px rgba(74,118,74,0),   0 0 14px var(--acc); }
}
.dh-hero__weather {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 11.5px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
   Weather widget v2 (.wxw-*) — Uiverse Praashoo7-style, click-to-expand
   ═══════════════════════════════════════════════════════════════════════ */
.wxw {
  position: relative;
  width: 240px;
  font-family: Inter, 'Space Grotesk', system-ui, sans-serif;
}
.wxw-card {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 14px 16px;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 12px;
  transition: transform var(--d-1), box-shadow var(--d-1), border-color var(--d-1);
  position: relative;
  z-index: 2;
  text-align: left;
  font-family: inherit;
}
.wxw-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  border-color: var(--line-acc);
}
.wxw-icon {
  grid-row: 1 / 3;
  font-size: 32px;
  color: var(--acc);
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wxw-main {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font: 700 28px/1 'Space Grotesk', sans-serif;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.wxw-deg { font-size: 16px; color: var(--fg-3); font-weight: 600; }
.wxw-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--fg-3);
}
.wxw-city { font-weight: 600; }
.wxw-chev {
  font-size: 10px;
  transition: transform var(--d-1);
  margin-left: auto;
  color: var(--fg-4);
}
.wxw[data-expanded="1"] .wxw-chev { transform: rotate(180deg); }
.wxw-desc {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--fg-4);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Expand panel — FIXED position (portal-style), uniká stacking context-om dashboard kariet.
   JS nastaví top/right cez inline style podľa bounding rect widgetu pri otvorení. */
.wxw-expand {
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  max-width: 92vw;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 16px;
  z-index: 9999;
  box-shadow: 0 18px 48px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.06);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(-6px) scale(.96);
  transform-origin: top right;
  transition: opacity var(--d-1), transform var(--d-1), visibility 0s linear var(--d-1, .2s);
}
.wxw[data-expanded="1"] .wxw-expand {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity var(--d-1), transform var(--d-1), visibility 0s;
}
.wxw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.wxw-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: var(--bg-2);
  border-radius: 11px;
}
.wxw-cell-ico {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: var(--bg-1);
  border-radius: 8px;
  flex-shrink: 0;
}
.wxw-cell-meta { display: flex; flex-direction: column; min-width: 0; }
.wxw-cell-lbl { font-size: 10.5px; color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.wxw-cell-val { font: 700 13.5px 'Space Grotesk', sans-serif; color: var(--fg); }

.wxw-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 11px;
  font: 600 12px Inter, sans-serif;
  color: var(--fg-3);
  transition: background var(--d-1), color var(--d-1);
}
.wxw-foot i { font-size: 12px; }

/* ─── Multi-city SLIDER (arrows + dots + swipe) ─────────────────── */
.wxw { position: relative; }
.wxw-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line, var(--border));
  background: var(--bg-1, var(--bg, #fff));
  color: var(--fg-2);
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  opacity: 0;
}
.wxw:hover .wxw-nav,
.wxw[data-expanded="1"] .wxw-nav { opacity: 1; }
.wxw-nav-prev { left: -10px; }
.wxw-nav-next { right: -10px; }
.wxw-nav:hover {
  background: var(--acc, #4a764a);
  color: #fff;
  border-color: var(--acc);
  transform: translateY(-50%) scale(1.1);
}

/* Slide animation flash */
.wxw-card.is-sliding-l { animation: wxwSlideL .25s ease-out; }
.wxw-card.is-sliding-r { animation: wxwSlideR .25s ease-out; }
@keyframes wxwSlideL {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(-12px); opacity: 0.4; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes wxwSlideR {
  0% { transform: translateX(0); opacity: 1; }
  40% { transform: translateX(12px); opacity: 0.4; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Dots indicator pod hlavičkou v karte */
.wxw-dots {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
  pointer-events: none;
}
.wxw-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line, var(--border, #cbd5e1));
  transition: all .2s;
}
.wxw-dot.is-active {
  background: var(--acc, #4a764a);
  width: 16px;
  border-radius: 3px;
}

/* Flag pred názvom mesta v karte */
.wxw-card .wxw-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wxw-card .wxw-city-flag {
  font-size: 12px;
  line-height: 1;
}

/* Cities edit foot (kompaktný v expand paneli) */
.wxw-cities-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-2);
  border-radius: 9px;
}
.wxw-cities-info {
  font: 600 11px Inter, sans-serif;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wxw-cities-foot-actions { display: flex; gap: 5px; }
.wxw-cities-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid var(--line, var(--border));
  background: var(--bg-1, var(--bg, #fff));
  color: var(--fg-2);
  font: 600 11px Inter, sans-serif;
  cursor: pointer;
  transition: all .15s;
}
.wxw-cities-btn:hover { border-color: var(--acc); color: var(--acc); }
.wxw-cities-btn-danger:hover {
  background: rgba(239,68,68,.08);
  border-color: #ef4444;
  color: #ef4444;
}
.wxw-cities-btn[disabled] { opacity: .4; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════ */
/*  WEATHER WIDGET v4 — INLINE EXPANDED (no dropdown, no overlay)   */
/* ════════════════════════════════════════════════════════════════ */
.wxw-v4 {
  width: 540px;
  max-width: 100%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--bg-1, var(--bg, #fff)), var(--bg-2, var(--bg2, #f8fafc)));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  /* Landscape layout: 3 rows v stacku — top hero, metrics row, footer */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wxw-v4.is-loading { opacity: .6; pointer-events: none; }

/* TOP — main info + slider arrows (HORIZONTAL row) */
.wxw-v4-top {
  display: grid;
  grid-template-columns: 26px 1fr 26px;
  align-items: center;
  gap: 8px;
}
.wxw-v4-nav {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line, var(--border));
  background: var(--bg-1, var(--bg, #fff));
  color: var(--fg-2);
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.wxw-v4-nav:hover {
  background: var(--acc, #4a764a);
  color: #fff;
  border-color: var(--acc);
  transform: scale(1.08);
}
.wxw-v4-nav[disabled] { opacity: .3; cursor: not-allowed; }
.wxw-v4-nav[disabled]:hover { background: var(--bg-1); color: var(--fg-2); transform: none; }

/* HERO — horizontálny rad: [icon] [temp] [city + desc + dots] */
.wxw-v4-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.wxw-v4-icon {
  font-size: 28px;
  color: var(--acc, #4a764a);
  flex-shrink: 0;
}
.wxw-v4-temp-wrap {
  display: inline-flex;
  align-items: flex-start;
  gap: 1px;
  flex-shrink: 0;
}
.wxw-v4-temp {
  font: 800 26px/1 'Space Grotesk', Inter, sans-serif;
  letter-spacing: -0.03em;
  color: var(--text, var(--fg));
}
.wxw-v4-deg {
  font: 600 12px Inter, sans-serif;
  color: var(--fg-3);
  margin-top: 2px;
}
.wxw-v4-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.wxw-v4-city-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wxw-v4-flag { font-size: 12px; line-height: 1; }
.wxw-v4-city {
  font: 700 13px Inter, sans-serif;
  color: var(--text, var(--fg));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wxw-v4-desc {
  font: 600 9.5px Inter, sans-serif;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Dot indicator — vpravo v hero rade */
.wxw-v4-dots {
  display: flex;
  gap: 3px;
  margin-top: 3px;
}
.wxw-v4-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line, var(--border, #cbd5e1));
  transition: all .25s;
}
.wxw-v4-dot.is-active {
  background: var(--acc, #4a764a);
  width: 18px;
  border-radius: 3px;
}

/* GRID — metrics v jednom horizontálnom rade (6 stĺpcov) */
.wxw-v4-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.wxw-v4-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  padding: 5px 7px;
  background: var(--bg, var(--bg-1, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 7px;
  transition: border-color .15s;
  min-height: 38px;
  position: relative;
}
.wxw-v4-cell:hover { border-color: var(--acc); }
.wxw-v4-cell > i {
  font-size: 11px;
  flex-shrink: 0;
  position: absolute;
  top: 5px;
  right: 6px;
  opacity: .7;
}
.wxw-v4-cell > div {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  line-height: 1.1;
  width: 100%;
  padding-right: 14px;
}
.wxw-v4-lbl {
  font: 700 8px Inter, sans-serif;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wxw-v4-val {
  font: 700 11px 'Space Grotesk', Inter, sans-serif;
  color: var(--text, var(--fg));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* BOTTOM — AQI + city actions */
.wxw-v4-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wxw-v4-aqi {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--bg-2, var(--bg2));
  border-radius: 7px;
  font: 600 10.5px Inter, sans-serif;
  color: var(--fg-3);
  transition: all .2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wxw-v4-aqi i { font-size: 10px; }
.wxw-v4-cities-actions {
  display: flex;
  gap: 3px;
  align-items: center;
}
.wxw-v4-cities-count {
  font: 700 9.5px Inter, sans-serif;
  color: var(--fg-3);
  padding: 0 4px;
}
.wxw-v4-cities-btn {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--line, var(--border));
  background: var(--bg, var(--bg-1));
  color: var(--fg-3);
  cursor: pointer;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.wxw-v4-cities-btn:hover { border-color: var(--acc); color: var(--acc); }
.wxw-v4-cities-btn-danger:hover {
  background: rgba(239,68,68,.08);
  border-color: #ef4444;
  color: #ef4444;
}
.wxw-v4-cities-btn[disabled] { opacity: .35; cursor: not-allowed; }
.wxw-v4-cities-btn[disabled]:hover { background: var(--bg); color: var(--fg-3); border-color: var(--line); }

/* SATELLITE MAP (Leaflet + OSM + RainViewer radar overlay) */
.wxw-v4-map {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line, var(--border));
  background: var(--bg-2);
  margin-top: 2px;
}
.wxw-v4-map-canvas {
  width: 100%;
  height: 100%;
  background: #e5e7eb;
}
.wxw-v4-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.6);
  z-index: 6;
  color: var(--acc);
  font-size: 18px;
  backdrop-filter: blur(2px);
}

/* ═══════════════════════════════════════════════════════════════ */
/*  CLARITY (sec-clarity) — UX Analytika — kompletné štýly          */
/* ═══════════════════════════════════════════════════════════════ */
#sec-clarity { max-width: 1300px; margin: 0 auto; padding: 24px 24px 60px; }

/* Hero header (.dash-hero) — používa aj iné sekcie */
.dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.dash-hero .pg-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text, var(--fg));
}
.dash-hero .pg-title .grad {
  background: linear-gradient(135deg, var(--acc, #4a764a), #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dash-hero .pg-sub {
  margin: 4px 0 0;
  color: var(--text3, var(--fg-3));
  font-size: 13.5px;
  max-width: 640px;
}
.dash-hero-quick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Range toggle (1 deň / 2 dni / 3 dni) */
.cl-range {
  display: inline-flex;
  background: var(--bg-2, var(--bg2));
  border: 1px solid var(--line, var(--border));
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.cl-range-btn {
  border: 0;
  background: transparent;
  padding: 7px 14px;
  border-radius: 7px;
  font: 600 12.5px Inter, sans-serif;
  color: var(--text3, var(--fg-3));
  cursor: pointer;
  transition: all .15s;
}
.cl-range-btn:hover { color: var(--text, var(--fg)); }
.cl-range-btn.active {
  background: var(--bg-1, var(--bg, #fff));
  color: var(--acc, #4a764a);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* Cache info banner */
.cl-cache-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(245,158,11,.08);
  border-left: 3px solid #f59e0b;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--text2, var(--fg-2));
  margin-bottom: 18px;
}
.cl-cache-info i { color: #f59e0b; }
.cl-cache-clear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--line, var(--border));
  border-radius: 7px;
  font: 600 11.5px Inter, sans-serif;
  color: var(--text3, var(--fg-3));
  cursor: pointer;
  transition: all .15s;
}
.cl-cache-clear:hover { border-color: #ef4444; color: #ef4444; }

/* KPI grid — pre Clarity karty */
#sec-clarity .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
#sec-clarity .kpi-card.cl-kpi {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  transition: all .15s;
}
#sec-clarity .kpi-card.cl-kpi:hover {
  border-color: var(--acc);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
#sec-clarity .kpi-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
#sec-clarity .kpi-body { flex: 1; min-width: 0; }
#sec-clarity .kpi-lbl {
  font: 700 10.5px Inter, sans-serif;
  color: var(--text3, var(--fg-3));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
#sec-clarity .kpi-val {
  font: 800 22px/1 'Space Grotesk', Inter, sans-serif;
  letter-spacing: -0.02em;
  color: var(--text, var(--fg));
}
#sec-clarity .kpi-sub {
  font-size: 11px;
  color: var(--text3, var(--fg-3));
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2x2 grid pre Top URLs / Countries / Devices / Browsers */
.cl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 900px) { .cl-grid { grid-template-columns: 1fr; } }

.cl-card {
  background: var(--bg-1, var(--bg, #fff));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 16px;
}
.cl-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}
.cl-card-head h3 {
  font: 700 14.5px Inter, sans-serif;
  margin: 0;
  color: var(--text, var(--fg));
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cl-card-head small {
  font-size: 11px;
  color: var(--text3, var(--fg-3));
}

.cl-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: auto;
}

/* Row v liste — rank + ico + label + bar + value */
.cl-row {
  display: grid;
  grid-template-columns: 22px 22px 1fr 80px 50px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  font: 600 12.5px Inter, sans-serif;
  color: var(--text, var(--fg));
  transition: background .15s;
}
.cl-row:hover { background: var(--bg-2, var(--bg2, #f8fafc)); }
.cl-row-clickable { cursor: pointer; }
.cl-row-clickable:hover { background: var(--acc-soft, rgba(74,118,74,.08)); }
.cl-row-rank {
  font-weight: 800;
  color: var(--text3, var(--fg-3));
  text-align: center;
  font-size: 11px;
}
.cl-row-ico { color: var(--text3, var(--fg-3)); font-size: 13px; }
.cl-row-lbl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.cl-row-bar {
  height: 6px;
  background: var(--bg-2, var(--bg2));
  border-radius: 3px;
  overflow: hidden;
}
.cl-row-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--acc, #4a764a), #6b9a6b);
  border-radius: 3px;
  transition: width .4s;
}
.cl-row-val {
  font: 700 12px 'Space Grotesk', Inter, sans-serif;
  color: var(--text2, var(--fg-2));
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cl-row-ext {
  font-size: 10px;
  color: var(--text3, var(--fg-3));
  margin-left: 4px;
}
.cl-row-clickable:hover .cl-row-ext { color: var(--acc); }
.cl-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--text3, var(--fg-3));
  font-size: 13px;
}
.cl-empty i { display: block; font-size: 22px; margin-bottom: 8px; opacity: .4; }

/* Deeplinks banner — Heatmaps + Recordings external links */
.cl-deeplinks {
  background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(139,92,246,.08));
  border: 1px solid var(--line, var(--border));
  border-radius: 14px;
  padding: 18px 20px;
}
.cl-dl-head {
  font-size: 13px;
  color: var(--text, var(--fg));
  margin-bottom: 12px;
  line-height: 1.5;
}
.cl-dl-head i { color: #0ea5e9; margin-right: 6px; }
.cl-dl-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cl-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--bg-1, var(--bg, #fff));
  color: var(--text, var(--fg));
  border: 1px solid var(--line, var(--border));
  border-radius: 9px;
  text-decoration: none;
  font: 600 12.5px Inter, sans-serif;
  transition: all .15s;
}
.cl-dl-btn:hover {
  border-color: var(--acc);
  color: var(--acc);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.cl-dl-btn i { font-size: 13px; }

@media (max-width: 720px) {
  #sec-clarity { padding: 16px 16px 40px; }
  .dash-hero { flex-direction: column; align-items: stretch; }
  .dash-hero-quick { flex-wrap: wrap; }
  .cl-range { width: 100%; }
  .cl-range-btn { flex: 1; }
  .cl-row { grid-template-columns: 18px 18px 1fr 50px 40px; gap: 6px; font-size: 11.5px; }
  .cl-dl-buttons { flex-direction: column; }
  .cl-dl-btn { width: 100%; justify-content: center; }
}

/* Cloud overlay blend mode — výrazné clouds nad svetlou mapou */
.wxw-clouds-blend {
  mix-blend-mode: multiply;
  filter: saturate(1.3) contrast(1.1);
}
@media (prefers-color-scheme: dark) {
  .wxw-clouds-blend {
    mix-blend-mode: screen;     /* na tmavej mape zase clouds rozjasňujú */
  }
}

/* Leaflet pin — len drobná dotka (klik → popup s detailom) */
.wxw-mp {
  background: transparent !important;
  border: 0 !important;
}
.wxw-mp-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f59e0b;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  cursor: pointer;
  transition: transform .15s;
}
.wxw-mp-dot:hover { transform: scale(1.3); }
.wxw-mp-dot.is-active {
  background: var(--acc, #4a764a);
  width: 16px;
  height: 16px;
  border-width: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 4px rgba(74,118,74,.35);
  animation: wxwMpPulse 2s infinite;
}
@keyframes wxwMpPulse {
  0%,100% { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 4px rgba(74,118,74,.35); }
  50%     { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 12px rgba(74,118,74,0); }
}

/* Popup styling */
.wxw-mp-popup .leaflet-popup-content-wrapper {
  background: rgba(255,255,255,.98);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  padding: 0;
}
.wxw-mp-popup .leaflet-popup-content {
  margin: 0;
  padding: 0;
  min-width: 160px;
}
.wxw-mp-popup .leaflet-popup-tip { background: rgba(255,255,255,.98); }
.wxw-mp-pop {
  padding: 10px 12px;
}
.wxw-mp-pop-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 13px Inter, sans-serif;
  color: #1f2937;
  margin-bottom: 8px;
}
.wxw-mp-pop-flag { font-size: 14px; line-height: 1; }
.wxw-mp-pop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: var(--acc, #4a764a);
  color: #fff;
  border: 0;
  border-radius: 7px;
  font: 600 11.5px Inter, sans-serif;
  cursor: pointer;
  justify-content: center;
  transition: filter .15s;
}
.wxw-mp-pop-btn:hover { filter: brightness(1.1); }

/* Leaflet tile container nech sa neprejaví bordering od leaflet.css */
.wxw-v4-map .leaflet-container { background: #aadaff; font-family: inherit; }
.wxw-v4-map .leaflet-control-attribution { display: none; }
.wxw-v4-map .leaflet-tile-pane { z-index: 1; }
.wxw-v4-map-legend {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.wxw-v4-map-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(0,0,0,.62);
  color: #fff;
  border-radius: 6px;
  font: 700 9.5px Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
}
.wxw-v4-map-tag i { color: #84cc16; }
.wxw-v4-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: rgba(0,0,0,.62);
  color: #fff;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  font-size: 11px;
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s, transform .15s;
}
.wxw-v4-map-link:hover { background: rgba(74,118,74,.92); transform: scale(1.05); }

@media (max-width: 720px) {
  .wxw-v4 { width: 100%; }
  .dh-hero__top { flex-direction: column; align-items: stretch; }
  .dh-live { align-self: flex-start; }
}

@media (max-width: 768px) {
  .wxw { width: 100%; }
  .wxw-expand { right: 0; left: 0; width: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Weather widget — subtle v3 (olive paleta, bez krikľavého gradientu)
   ═══════════════════════════════════════════════════════════════════════ */
.dh-weather {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
  min-height: 130px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  background: var(--bg-1);
  color: var(--fg);
  transition: all var(--d-1);
}
.dh-weather:hover {
  border-color: var(--line-acc);
  background: var(--bg-2);
  transform: translateY(-1px);
}
.dh-weather:active { transform: translateY(0); }
.dh-weather.is-loading { opacity: 0.55; }

.dh-weather__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dh-weather__loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg-2);
  max-width: 110px;
  overflow: hidden;
}
.dh-weather__city {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-weather__pin {
  font-size: 8.5px;
  color: var(--acc);
  transform: rotate(45deg);
  opacity: 0.7;
}
.dh-weather__temp {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--fg);
  letter-spacing: -0.04em;
}

.dh-weather__mid {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
}
.dh-weather__ico {
  font-size: 16px;
  color: var(--acc);              /* defaultne olive — JS prepíše ak treba kontext */
}
.dh-weather__desc {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: -0.005em;
}

.dh-weather__bot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--fg-4);
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}
.dh-weather__bot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dh-weather__bot i {
  font-size: 8.5px;
  opacity: 0.65;
}
.dh-weather__bot strong {
  color: var(--fg);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

@media (max-width: 600px) {
  .dh-weather { width: 100%; }
}

.dh-hero__title {
  font-size: 42px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
}
.dh-grad {
  background: linear-gradient(135deg, var(--acc) 0%, var(--acc-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dh-hero__sub {
  font-size: 15px;
  color: var(--fg-2);
  margin: 10px 0 22px;
  max-width: 680px;
  line-height: 1.5;
}
.dh-hero__sub strong { color: var(--fg); font-weight: 600; }

/* AI Prompt input inside hero */
.dh-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin-bottom: 14px;
}
.dh-prompt__field {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  transition: all .18s ease;
  padding: 0 14px;
  height: 50px;
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px rgba(0,0,0,.06);
}
[data-theme="light"] .dh-prompt__field { background: #fff; }
.dh-prompt__field:focus-within {
  border-color: var(--acc);
  box-shadow: 0 0 0 4px rgba(74,118,74,.16), 0 8px 26px rgba(74,118,74,.12);
}
.dh-prompt__ico {
  color: var(--acc);
  font-size: 15px;
  margin-right: 10px;
  flex-shrink: 0;
}
.dh-prompt__field input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
  height: 100%;
  padding: 0;
}
.dh-prompt__field input::placeholder { color: var(--fg-4); }
.dh-prompt__kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 3px 6px;
  border-radius: 5px;
  flex-shrink: 0;
}
.dh-prompt__send {
  width: 50px; height: 50px;
  border-radius: 14px;
  border: 0;
  background: linear-gradient(135deg, var(--acc), var(--acc-d));
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 18px var(--acc-glow);
  transition: all .18s ease;
}
.dh-prompt__send:hover { transform: translateY(-1px); box-shadow: 0 10px 26px var(--acc-glow); }
.dh-prompt__send:active { transform: translateY(0); }

/* Suggestion chips */
.dh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dh-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.dh-chip:hover {
  background: var(--acc-soft);
  border-color: var(--line-acc);
  color: var(--acc);
  transform: translateY(-1px);
}
.dh-chip i { font-size: 11px; opacity: .85; }

/* ── KPI Ribbon ──────────────────────────────────────────────────── */
.dh-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  transition: all .2s ease;
  text-align: left;
  overflow: hidden;
  font-family: inherit;
  color: inherit;
}
.kpi::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(74,118,74,.06), transparent 50%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.kpi:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.kpi:hover::before { opacity: 1; }
.kpi__head {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.kpi__ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acc-soft);
  color: var(--acc-icon);
  font-size: 15px;
  border: 1px solid var(--line-acc);
}
.kpi--rev .kpi__ico { background: linear-gradient(135deg, rgba(74,118,74,.22), rgba(74,118,74,.10)); color: var(--acc-icon); }
.kpi--ord .kpi__ico { background: linear-gradient(135deg, rgba(240,180,41,.20), rgba(240,180,41,.08)); color: #d4a017; border-color: rgba(240,180,41,.3); }
[data-theme="light"] .kpi--ord .kpi__ico { color: #b07c00; }
.kpi--vis .kpi__ico { background: linear-gradient(135deg, rgba(90,158,106,.22), rgba(90,158,106,.10)); color: var(--acc-4); }
.kpi--msg .kpi__ico { background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(96,165,250,.06)); color: #6aa1e8; border-color: rgba(96,165,250,.28); }

.kpi__delta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.kpi__delta--up      { background: rgba(74,118,74,.16);  color: var(--acc); }
.kpi__delta--down    { background: rgba(248,113,113,.12); color: var(--err); }
.kpi__delta--neutral { background: var(--bg-2); color: var(--fg-3); }
.kpi__delta--ok      { background: rgba(74,118,74,.14);  color: var(--acc); }
.kpi__delta--alert   { background: rgba(240,180,41,.16); color: #d4a017; }
[data-theme="light"] .kpi__delta--alert { color: #b07c00; }

.kpi__value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--fg);
  position: relative; z-index: 1;
}
.kpi__label {
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 500;
  position: relative; z-index: 1;
}
.kpi__foot {
  font-size: 11px;
  color: var(--fg-4);
  margin-top: 4px;
  position: relative; z-index: 1;
}
.kpi__spark {
  width: 100%;
  height: 30px;
  margin-top: 2px;
  display: block;
  position: relative;
  z-index: 1;
}

/* ── Chart card ──────────────────────────────────────────────────── */
.dh-row { margin-bottom: 18px; }
.dh-chart-card { display: flex; flex-direction: column; }
.dh-chart-wrap {
  flex: 1;
  position: relative;
  height: 320px;
  min-height: 300px;
}
.dh-chart-wrap canvas { width: 100% !important; height: 100% !important; }

.dh-chart-ctrl {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.dh-seg {
  background: transparent;
  border: 0;
  padding: 5px 11px;
  border-radius: 7px;
  color: var(--fg-3);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.dh-seg:hover { color: var(--fg); }
.dh-seg.is-active {
  background: var(--bg-1);
  color: var(--acc);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.dh-chart-legend {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.dh-leg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--fg-2);
  font-weight: 500;
}
.dh-leg__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.dh-leg--mute { color: var(--fg-4); }

/* ── AI Sidekick panel ───────────────────────────────────────────── */
.dh-side { display: flex; flex-direction: column; }
.dh-side__more {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg-3);
  cursor: pointer;
  font-size: 11px;
}
.dh-side__more:hover { color: var(--acc); border-color: var(--line-acc); }
.dh-side__intro {
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.5;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.dh-actions { display: flex; flex-direction: column; gap: 6px; }
.dh-act {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.dh-act:hover {
  background: var(--bg-2);
  border-color: var(--line);
}
.dh-act__ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--acc-soft);
  color: var(--acc-icon);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.dh-act__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dh-act__t { font-size: 13px; font-weight: 600; color: var(--fg); }
.dh-act__s { font-size: 11.5px; color: var(--fg-3); }
.dh-act__arrow {
  color: var(--fg-4);
  font-size: 10px;
  opacity: 0;
  transform: translateX(-6px);
  transition: all .15s ease;
}
.dh-act:hover .dh-act__arrow { opacity: 1; transform: translateX(0); color: var(--acc); }

.dh-side__cta {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg, var(--acc), var(--acc-d));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 18px var(--acc-glow);
  transition: all .18s ease;
}
.dh-side__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px var(--acc-glow); }

/* ── Activity feed ───────────────────────────────────────────────── */
.dh-feed { display: flex; flex-direction: column; gap: 2px; }
.dh-feed-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .15s ease;
}
.dh-feed-row:hover { background: var(--bg-2); }
.dh-feed-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.dh-feed-row[data-tone="green"]  .dh-feed-ico { background: rgba(74,118,74,.16);  color: var(--acc); }
.dh-feed-row[data-tone="amber"]  .dh-feed-ico { background: rgba(240,180,41,.16); color: #d4a017; }
.dh-feed-row[data-tone="red"]    .dh-feed-ico { background: rgba(248,113,113,.12); color: var(--err); }
.dh-feed-row[data-tone="blue"]   .dh-feed-ico { background: rgba(96,165,250,.14); color: #6aa1e8; }
.dh-feed-row[data-tone="violet"] .dh-feed-ico { background: rgba(167,139,250,.14); color: #a78bfa; }
.dh-feed-row[data-tone="gray"]   .dh-feed-ico { background: var(--bg-2); color: var(--fg-3); }
.dh-feed-row[data-tone="mute"]   .dh-feed-ico { background: var(--acc-soft); color: var(--acc-icon); }
[data-theme="light"] .dh-feed-row[data-tone="amber"] .dh-feed-ico { color: #b07c00; }

.dh-feed-body { flex: 1; min-width: 0; }
.dh-feed-title {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-feed-title strong { font-weight: 600; }
.dh-feed-title span { color: var(--fg-2); }
.dh-feed-time {
  font-size: 11.5px;
  color: var(--fg-4);
  margin-top: 2px;
}

.dh-link {
  font-size: 12px;
  color: var(--acc);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .15s ease;
}
.dh-link:hover { color: var(--acc-d); }
.dh-link i { font-size: 9px; }

/* ── Team / online members ───────────────────────────────────────── */
.dh-team { display: flex; flex-direction: column; gap: 2px; }
.dh-mem-group-h {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-4);
  padding: 10px 12px 4px;
}
.dh-mem-group-h:first-child { padding-top: 4px; }

.dh-mem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.dh-mem:hover { background: var(--bg-2); border-color: var(--line); }
.dh-mem-ava {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: visible;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--acc), var(--acc-d));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Space Grotesk', sans-serif;
  flex-shrink: 0;
}
.dh-mem-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dh-mem-dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid var(--bg-1);
  box-shadow: 0 0 8px rgba(52,211,153,.55);
}
.dh-mem-info { flex: 1; min-width: 0; }
.dh-mem-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-mem-meta {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 1px;
}
.dh-mem-status { color: #34d399; font-weight: 600; }
.dh-mem-ico {
  font-size: 12px;
  color: var(--fg-4);
  opacity: 0;
  transform: translateX(-6px);
  transition: all .15s ease;
}
.dh-mem:hover .dh-mem-ico { opacity: 1; transform: translateX(0); color: var(--acc); }

/* ── Websites tiles ──────────────────────────────────────────────── */
.dh-webs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.dh-web {
  position: relative;
  display: flex; flex-direction: column;
  padding: 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: all .2s ease;
  overflow: hidden;
}
.dh-web:hover {
  border-color: var(--line-acc);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.dh-web__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.dh-web__name {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}
.dh-web__stat {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dh-web__stat.is-on  { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.5); }
.dh-web__stat.is-off { background: var(--fg-mute); }
.dh-web__sync {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px;
  color: var(--fg-4);
}
.dh-web__sync.is-fresh { color: var(--acc); }
.dh-web__sync i { font-size: 9px; }

.dh-web__domain {
  font-size: 11.5px;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dh-web__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.dh-web__s {
  padding: 8px 6px;
  background: var(--bg-2);
  border-radius: 8px;
  text-align: center;
}
.dh-web__sv {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
}
.dh-web__sl {
  font-size: 10px;
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
}

.dh-web__month {
  display: flex; flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--fg-3);
}
.dh-web__month i { color: var(--acc); font-size: 10px; margin-right: 6px; }
.dh-web__month strong { color: var(--fg); font-weight: 600; }
.dh-web__spark {
  width: 100%; height: 24px;
  margin-top: 12px;
  display: block;
}

/* ── Agents list ─────────────────────────────────────────────────── */
.dh-agents { display: flex; flex-direction: column; gap: 8px; }
.dh-agent {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s ease;
}
.dh-agent:hover { border-color: var(--line-acc); transform: translateX(2px); }
.dh-agent__ava {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}
.dh-agent__dot {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-1);
}
.dh-agent__dot.is-on  { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.5); }
.dh-agent__dot.is-off { background: var(--fg-mute); }
.dh-agent__body { flex: 1; min-width: 0; }
.dh-agent__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-agent__role {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-agent__stats {
  display: flex; gap: 12px;
  font-size: 11.5px;
  color: var(--fg-3);
  flex-shrink: 0;
}
.dh-agent__stats i { color: var(--acc); font-size: 10px; margin-right: 4px; }

/* ── Quick shortcuts ─────────────────────────────────────────────── */
.dh-shortcuts { display: flex; flex-direction: column; }
.dh-quick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.dh-quick__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--fg);
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
}
.dh-quick__btn:hover {
  border-color: var(--line-acc);
  background: var(--acc-soft);
  transform: translateY(-2px);
}
.dh-quick__ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--acc-soft);
  color: var(--acc-icon);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  border: 1px solid var(--line-acc);
}
.dh-quick__btn:hover .dh-quick__ico {
  background: var(--acc);
  color: #fff;
}
.dh-quick__lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-2);
  text-align: center;
}

/* ── Skeleton loader + empty states ─────────────────────────────── */
.dh-feed-skel { display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.dh-skel {
  height: 50px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: dhShimmer 1.4s linear infinite;
}
.dh-skel--lg { height: 140px; }
@keyframes dhShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.dh-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--fg-3);
}
.dh-empty i { font-size: 26px; color: var(--fg-mute); display: block; margin-bottom: 10px; }
.dh-empty div { font-size: 13px; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .dh-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .dh-hero { padding: 24px 22px 22px; }
  .dh-hero__title { font-size: 32px; }
  .dh-prompt__field { height: 44px; }
  .dh-prompt__send  { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .dh-hero { padding: 20px 18px 18px; border-radius: 18px; }
  .dh-hero__title { font-size: 26px; }
  .dh-hero__sub { font-size: 13.5px; margin-bottom: 16px; }
  .dh-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px; border-radius: 14px; }
  .kpi__value { font-size: 24px; }
  .dh-webs { grid-template-columns: 1fr; }
  .dh-chart-wrap { height: 260px; }
  .dh-chips { gap: 6px; }
  .dh-chip { font-size: 11.5px; padding: 6px 11px; }
}

/* ═════════════════════════════════════════════════════════════════════
   CHAT EXPERIENCE V3 — Modern AI workspace
   prefix: .cx-  (replaces old .chat-* / .msg / .sess-* styling)
   Old classes are kept for compat but new HTML targets only .cx-*.
   ═════════════════════════════════════════════════════════════════════ */

#sec-chat .cx-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  /* width:100% + flex:1 = vypĺňa celú šírku flex parenta (#sec-chat.active je flex).
     Bez tohto má grid iba intrinsic šírku a pravá strana ostáva prázdna. */
  width: 100%;
  flex: 1;
  min-width: 0;
  height: calc(100dvh - 70px);
  background: var(--bg);
  overflow: hidden;
}
.app--fullsec #sec-chat .cx-shell {
  height: calc(100dvh - 70px);
  border-radius: 0;
}

/* ── LEFT SIDEBAR ─────────────────────────────────────────────────── */
.cx-side {
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.cx-side-top {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cx-new {
  display: flex; align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg, var(--acc), var(--acc-d));
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 6px 16px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.18);
  transition: all .18s ease;
}
.cx-new:hover { transform: translateY(-1px); box-shadow: 0 10px 22px var(--acc-glow); }
.cx-new:active { transform: translateY(0); }
.cx-new-ico {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.cx-new-lbl { flex: 1; }
.cx-new-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  background: rgba(255,255,255,.18);
  padding: 2px 6px;
  border-radius: 5px;
  color: rgba(255,255,255,.85);
}

.cx-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  transition: all .15s ease;
}
.cx-search:focus-within {
  border-color: var(--line-acc);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(74,118,74,.10);
}
.cx-search > i {
  color: var(--fg-4);
  font-size: 12px;
  margin-right: 9px;
}
.cx-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--fg);
  font-size: 12.5px;
  font-family: inherit;
}
.cx-search input::placeholder { color: var(--fg-4); }
.cx-search kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--fg-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: 2px 5px;
  border-radius: 4px;
}

.cx-side-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px 12px;
}
.cx-side-list::-webkit-scrollbar { width: 6px; }
.cx-side-list::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }

.cx-side-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--fg-3);
}
.cx-side-empty i {
  font-size: 28px;
  color: var(--fg-mute);
  margin-bottom: 10px;
  display: block;
}
.cx-side-empty p {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
  margin: 0 0 4px;
}
.cx-side-empty small {
  font-size: 11.5px;
  color: var(--fg-4);
}

.cx-side-foot {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.cx-side-tip {
  font-size: 10.5px;
  color: var(--fg-4);
  line-height: 1.6;
  display: flex; align-items: flex-start; gap: 8px;
}
.cx-side-tip i { color: var(--acc); font-size: 11px; margin-top: 2px; }
.cx-side-tip kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--fg-2);
}

/* Session items (already styled by legacy .sess-item, but we override) */
.cx-side-list .sess-group { margin-bottom: 16px; }
.cx-side-list .sess-group-h {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-4);
  padding: 6px 10px 8px;
}
.cx-side-list .sess-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s ease;
  margin-bottom: 1px;
}
.cx-side-list .sess-item:hover { background: var(--bg-2); }
.cx-side-list .sess-item.active {
  background: var(--acc-soft);
  border: 1px solid var(--line-acc);
}
.cx-side-list .sess-title {
  font-size: 13px;
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-side-list .sess-item.active .sess-title {
  color: var(--acc);
  font-weight: 600;
}
.cx-side-list .sess-meta {
  font-size: 10.5px;
  color: var(--fg-4);
  margin-top: 1px;
}

/* ── RIGHT MAIN ───────────────────────────────────────────────────── */
.cx-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: var(--bg);
  overflow: hidden;
}

.cx-mob-hist {
  display: none;
  position: absolute;
  top: 14px; left: 14px;
  z-index: 5;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ── HERO (empty state) ──────────────────────────────────────────── */
.cx-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
}

.cx-hero-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.cx-hero-spacer { flex: 1; }

.cx-agent-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 12px 6px 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.cx-agent-pill:hover {
  border-color: var(--line-acc);
  background: var(--bg-2);
}
.cx-agent-ava {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}
.cx-agent-info { display: flex; flex-direction: column; line-height: 1.2; }
.cx-agent-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  text-align: left;
}
.cx-agent-model {
  font-size: 10.5px;
  color: var(--fg-3);
  text-align: left;
}
.cx-agent-arrow {
  font-size: 9px;
  color: var(--fg-4);
  margin-left: 4px;
}

.cx-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--acc-soft);
  border: 1px solid var(--line-acc);
  color: var(--acc);
  font-size: 11px;
  font-weight: 600;
}
.cx-hero-tag-dot {
  width: 6px; height: 6px;
  background: var(--acc);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--acc);
  animation: cxPulse 2s infinite;
}
@keyframes cxPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.5; }
}
.cx-hero-tag strong { color: var(--acc); font-weight: 700; }

.cx-hero-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 48px 32px;
  /* Plná šírka — žiadny umelý 820px stĺpec.
     Vnútorné komponenty (title, prompts, composer) majú vlastné max-widthy
     ak ich potrebujú, aby riadky textu boli čitateľné aj na širokých monitoroch. */
  max-width: none;
  margin: 0;
  width: 100%;
  position: relative;
}
@media (max-width: 768px) { .cx-hero-body { padding: 32px 18px 24px; } }
/* Pôvodný statický glow — žiadne animácie, žiadne pseudo-element prstence. */
.cx-hero-glow {
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 400px;
  background: radial-gradient(circle at 50% 0%, rgba(74,118,74,.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.cx-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-align: center;
  color: var(--fg);
  margin: 0 0 12px;
  position: relative;
  z-index: 1;
}
.cx-hero-comma { color: var(--fg-3); }
.cx-hero-name {
  background: linear-gradient(135deg, var(--acc), var(--acc-4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cx-hero-sub {
  font-size: 15px;
  color: var(--fg-3);
  text-align: center;
  max-width: 540px;
  margin: 0 0 24px;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

.cx-caps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.cx-cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 500;
}
.cx-cap i {
  font-size: 10px;
  color: var(--acc);
}

/* Composer v hero — plná šírka (s rozumným stropom pre ultra-wide monitory) */
.cx-hero-form {
  width: 100%;
  max-width: 1280px;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.cx-composer {
  background: var(--bg-1);
  border: 1.5px solid var(--line-strong);
  border-radius: 18px;
  padding: 12px 12px 8px;
  transition: all .2s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.02);
}
[data-theme="light"] .cx-composer { background: #fff; box-shadow: 0 8px 28px rgba(74,118,74,.10), inset 0 1px 0 rgba(255,255,255,.5); }
.cx-composer:focus-within {
  border-color: var(--acc);
  box-shadow: 0 0 0 4px rgba(74,118,74,.14), 0 8px 28px rgba(74,118,74,.12);
}
.cx-composer--hero { padding: 14px 14px 10px; }

.cx-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.55;
  resize: none;
  min-height: 28px;
  max-height: 240px;
  padding: 4px 6px;
}
.cx-input::placeholder { color: var(--fg-4); }
.cx-input:disabled { opacity: .5; cursor: not-allowed; }

.cx-composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.cx-composer-left, .cx-composer-right { display: inline-flex; gap: 6px; align-items: center; }

.cx-iconbtn {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.cx-iconbtn:hover {
  background: var(--bg-2);
  color: var(--fg);
}
.cx-iconbtn.recording {
  background: rgba(248,113,113,.14);
  color: var(--err);
  animation: cxRecPulse 1.1s infinite;
}
@keyframes cxRecPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,.4); }
  50%     { box-shadow: 0 0 0 6px rgba(248,113,113,0); }
}

.cx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.cx-pill:hover {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line-strong);
}
.cx-pill i { font-size: 11px; opacity: 0.9; }

.cx-send {
  width: 38px; height: 38px;
  border-radius: 11px;
  border: 0;
  background: linear-gradient(135deg, var(--acc), var(--acc-d));
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px var(--acc-glow);
  transition: all .15s ease;
}
.cx-send:hover { transform: translateY(-1px); box-shadow: 0 8px 22px var(--acc-glow); }
.cx-send:active { transform: scale(0.96); }

.cx-plus-wrap { position: relative; }
.cx-plus-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 36px rgba(0,0,0,.16);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
  transition: all .18s ease;
  z-index: 20;
}
.cx-plus-menu.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cx-plus-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .12s ease;
}
.cx-plus-menu button:hover {
  background: var(--bg-2);
  color: var(--fg);
}
.cx-plus-menu button i { color: var(--acc); width: 16px; font-size: 13px; }

/* Attachment strip */
.cx-att-strip {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 8px;
}
.cx-att-strip:not(:empty) { display: flex; }

/* Hero prompt suggestions */
.cx-suggest {
  width: 100%;
  max-width: 1280px;            /* plná šírka so stropom pre ultra-wide */
  position: relative;
  z-index: 1;
}
.cx-suggest-h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-4);
  text-align: center;
  margin-bottom: 14px;
}
.cx-suggest-grid {
  display: grid;
  /* auto-fit → na širších monitoroch viac stĺpcov, na užších menej */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.cx-sug {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: all .15s ease;
}
.cx-sug:hover {
  border-color: var(--line-acc);
  background: var(--bg-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.cx-sug-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
.cx-sug-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cx-sug-t {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-sug-s {
  font-size: 11.5px;
  color: var(--fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-sug-go {
  color: var(--fg-4);
  font-size: 10px;
  opacity: 0;
  transform: translate(-4px, -4px);
  transition: all .15s ease;
}
.cx-sug:hover .cx-sug-go { opacity: 1; transform: translate(0,0); color: var(--acc); }

.cx-hero-foot {
  margin-top: 32px;
  font-size: 11.5px;
  color: var(--fg-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.cx-hero-foot i { color: var(--acc); }

/* ═════════════════════════════════════════════════════════════════════
   ACTIVE CONVERSATION
   ═════════════════════════════════════════════════════════════════════ */

.cx-conv-hdr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
}
.cx-mob-back {
  display: none;
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--fg-2);
  cursor: pointer;
}

.cx-conv-agent {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.cx-conv-ava {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}
.cx-conv-stat {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}
.cx-conv-stat--on  { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.5); }
.cx-conv-stat--off { background: var(--fg-mute); }
.cx-conv-stat--err { background: var(--err); }

.cx-conv-info { display: flex; flex-direction: column; min-width: 0; }
.cx-conv-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-conv-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 1px;
}
.cx-conv-model {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 600;
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
}
.cx-conv-model i { font-size: 9px; }
.cx-conv-st { color: var(--fg-3); }

.cx-conv-actions { display: inline-flex; gap: 4px; }
.cx-conv-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--fg-3);
  cursor: pointer;
  font-size: 13px;
  transition: all .15s ease;
}
.cx-conv-btn:hover {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line-strong);
}
.cx-conv-btn--danger:hover {
  background: rgba(248,113,113,.1);
  border-color: rgba(248,113,113,.3);
  color: var(--err);
}

/* ── Thread ────────────────────────────────────────────────────── */
.cx-thread {
  flex: 1;
  overflow-y: auto;
  padding: 32px 26px;
  scroll-behavior: smooth;
}
.cx-thread::-webkit-scrollbar { width: 8px; }
.cx-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
.cx-thread::-webkit-scrollbar-thumb:hover { background: var(--fg-mute); }

.cx-thread-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* In-thread empty (new session, no messages yet) */
.cx-conv-empty {
  text-align: center;
  padding: 40px 20px;
  animation: cxFadeIn .35s ease-out;
}
.cx-conv-empty-ava {
  width: 76px; height: 76px;
  border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 30px;
  box-shadow: 0 14px 36px rgba(74,118,74,.28);
  margin-bottom: 18px;
}
.cx-conv-empty-h {
  font-size: 22px;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 8px;
}
.cx-conv-empty-h strong {
  color: var(--acc);
  font-weight: 700;
}
.cx-conv-empty-p {
  font-size: 14px;
  color: var(--fg-3);
  max-width: 460px;
  margin: 0 auto 22px;
  line-height: 1.5;
}
.cx-conv-empty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 580px;
  margin: 0 auto;
}
.cx-conv-empty-chips button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.cx-conv-empty-chips button:hover {
  background: var(--acc-soft);
  border-color: var(--line-acc);
  color: var(--acc);
  transform: translateY(-1px);
}
.cx-conv-empty-chips button i { font-size: 11px; opacity: 0.85; }

@keyframes cxFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Messages ─────────────────────────────────────────────────── */
.cx-msg {
  display: flex;
  gap: 14px;
  animation: cxMsgIn .25s ease-out;
}
@keyframes cxMsgIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cx-msg--user {
  justify-content: flex-end;
}
.cx-msg--user .cx-msg-body {
  max-width: 78%;
  align-items: flex-end;
}

.cx-msg--assistant .cx-msg-body {
  flex: 1;
  min-width: 0;
}

.cx-msg-ava {
  width: 36px; height: 36px;
  border-radius: 11px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 14px;
  margin-top: 4px;
}

.cx-msg-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cx-msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 2px;
}
.cx-msg-author {
  font-weight: 700;
  color: var(--fg);
  font-family: 'Space Grotesk', sans-serif;
}
.cx-msg-model {
  font-size: 10px;
  color: var(--fg-4);
  font-family: 'JetBrains Mono', monospace;
  padding: 1px 6px;
  background: var(--bg-2);
  border-radius: 4px;
}
.cx-msg-model--live {
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cx-think-dot {
  width: 6px; height: 6px;
  background: var(--acc);
  border-radius: 50%;
  animation: cxPulse 1.4s infinite;
}

/* Bubble */
.cx-bubble {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg);
  word-break: break-word;
  overflow-wrap: break-word;
}
.cx-bubble--user {
  background: linear-gradient(135deg, var(--acc), var(--acc-d));
  color: #fff;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  font-size: 14.5px;
  box-shadow: 0 4px 14px rgba(74,118,74,.18);
}
.cx-bubble--ai {
  /* No background — flat readable text like Claude */
  padding: 0;
  font-size: 15px;
  color: var(--fg);
}
.cx-bubble--ai p { margin: 0 0 0.8em; }
.cx-bubble--ai p:last-child { margin-bottom: 0; }
.cx-bubble--ai h1, .cx-bubble--ai h2, .cx-bubble--ai h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1em 0 0.5em;
  color: var(--fg);
}
.cx-bubble--ai h1 { font-size: 20px; }
.cx-bubble--ai h2 { font-size: 17px; }
.cx-bubble--ai h3 { font-size: 15px; }
.cx-bubble--ai ul, .cx-bubble--ai ol { padding-left: 22px; margin: 0.6em 0; }
.cx-bubble--ai li { margin-bottom: 4px; }
.cx-bubble--ai a { color: var(--acc); text-decoration: underline; text-decoration-color: rgba(74,118,74,.4); text-underline-offset: 2px; }
.cx-bubble--ai a:hover { text-decoration-color: var(--acc); }
.cx-bubble--ai code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--acc);
}
.cx-bubble--ai pre {
  background: var(--bg-0);
  border: 1px solid var(--line);
  padding: 14px 16px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 0.8em 0;
  font-size: 13px;
}
.cx-bubble--ai pre code {
  background: transparent;
  padding: 0;
  border: 0;
  color: var(--fg-2);
}
.cx-bubble--ai blockquote {
  border-left: 3px solid var(--acc);
  padding: 4px 14px;
  margin: 0.8em 0;
  color: var(--fg-3);
  background: var(--acc-soft);
  border-radius: 0 8px 8px 0;
}

.cx-bubble--thinking {
  display: inline-flex;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 4px;
}
.cx-think-dots {
  display: inline-flex;
  gap: 5px;
}
.cx-think-dots span {
  width: 7px; height: 7px;
  background: var(--acc);
  border-radius: 50%;
  animation: cxThink 1.4s infinite ease-in-out both;
}
.cx-think-dots span:nth-child(1) { animation-delay: 0s; }
.cx-think-dots span:nth-child(2) { animation-delay: 0.18s; }
.cx-think-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes cxThink {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* Announcement (CEO delegation) */
.cx-msg--ann .cx-bubble--ai {
  font-style: italic;
  color: var(--fg-3);
  font-size: 13.5px;
  padding: 10px 14px;
  background: var(--acc-soft);
  border-radius: 12px;
  border-left: 3px solid var(--acc);
}

/* Foot row — time + actions */
.cx-msg-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--fg-4);
  min-height: 22px;
}
.cx-msg-time { white-space: nowrap; }
.cx-msg-actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s ease;
}
.cx-msg:hover .cx-msg-actions { opacity: 1; }
.cx-msg-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--fg-4);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s ease;
}
.cx-msg-act:hover {
  background: var(--bg-2);
  color: var(--fg-2);
}
.cx-msg-act i { font-size: 11px; }
.cx-msg-act.is-active { color: var(--acc); }

/* Attachments inside user msg bubble */
.cx-bubble--user .msg-att-img,
.cx-bubble--user img {
  max-width: 240px;
  border-radius: 10px;
  display: block;
  margin-bottom: 6px;
}
.cx-bubble--user .msg-att-link,
.cx-bubble--user .msg-att-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 6px;
}

/* ── Composer (active chat, bottom) ─────────────────────────── */
.cx-composer-wrap {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 12px 26px 18px;
}
.cx-composer-inner {
  max-width: 780px;
  margin: 0 auto;
}
.cx-composer--conv {
  padding: 10px 12px 6px;
}
.cx-composer-foot {
  margin-top: 8px;
  text-align: center;
  font-size: 10.5px;
  color: var(--fg-4);
}
.cx-composer-foot i { color: var(--acc); margin-right: 4px; }

/* Quick chips above composer */
.cx-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  justify-content: center;
}
.cx-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s ease;
}
.cx-quick-chip:hover {
  background: var(--acc-soft);
  border-color: var(--line-acc);
  color: var(--acc);
}
.cx-quick-chip i { font-size: 10px; opacity: 0.85; }

/* ── Mobile responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  #sec-chat .cx-shell {
    grid-template-columns: 1fr;
  }
  .cx-side {
    position: fixed;
    inset: 70px 0 0 0;
    z-index: 90;
    width: 320px;
    max-width: 86%;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 16px 0 40px rgba(0,0,0,.25);
  }
  .cx-side.mobile-open { transform: translateX(0); }
  .cx-mob-hist { display: inline-flex; }
  .cx-mob-back { display: inline-flex; }
  .cx-hero-bar { padding: 14px 18px; padding-left: 60px; }
  .cx-hero-tag { display: none; }
  .cx-conv-hdr { padding: 12px 16px; }
  .cx-thread { padding: 20px 16px; }
  .cx-composer-wrap { padding: 10px 16px 14px; }
  .cx-hero-body { padding: 32px 18px 24px; }
  .cx-hero-title { font-size: 32px; }
  .cx-hero-sub { font-size: 13.5px; }
  .cx-suggest-grid { grid-template-columns: 1fr; }
  .cx-msg--user .cx-msg-body { max-width: 90%; }
}
@media (max-width: 560px) {
  .cx-hero-title { font-size: 26px; }
  .cx-caps { gap: 4px; }
  .cx-cap { font-size: 10.5px; padding: 4px 9px; }
  .cx-conv-empty-ava { width: 60px; height: 60px; font-size: 24px; border-radius: 18px; }
  .cx-conv-empty-h { font-size: 18px; }
  .cx-pill span { display: none; } /* keep just the icon to save space */
  .cx-composer-foot span { font-size: 10px; }
}

/* ═════════════════════════════════════════════════════════════════════
   CX V3.1 — Animated AI elements (orb, gradient border, ambient particles)
   Subtle motion that signals "this is intelligent". Tuned for daily use:
   slow cycles (3–14s), low contrast, never distracting from the content.
   ═════════════════════════════════════════════════════════════════════ */

/* Fix: comma in greeting was too muted, looked like a layout bug */
.cx-hero-comma {
  color: var(--fg);
  opacity: 0.55;
  margin-right: 4px;
}

/* ── AI Voice-reactive Visualizer ─────────────────────────────────── */
.cx-aiviz-wrap {
  width: 300px;
  height: 300px;
  margin: 0 auto 18px;
  position: relative;
  z-index: 2;
  display: block;
  filter: drop-shadow(0 16px 44px rgba(74,118,74,.30));
}
.cx-aiviz {
  width: 100%;
  height: 100%;
  display: block;
}
.cx-aiviz-hint {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  animation: cxHintFade 3s ease-in-out 1s forwards;
  transition: opacity .3s ease;
}
.cx-aiviz-hint.is-hidden { opacity: 0 !important; pointer-events: none; }
.cx-aiviz-hint i { color: var(--acc); font-size: 10px; }
@keyframes cxHintFade {
  0%   { opacity: 0; transform: translate(-50%, 4px); }
  20%  { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; }
  100% { opacity: 0.55; }
}

@media (max-width: 900px) {
  .cx-aiviz-wrap { width: 230px; height: 230px; margin-bottom: 22px; }
}
@media (max-width: 640px) {
  .cx-aiviz-wrap { width: 180px; height: 180px; margin-bottom: 22px; }
  .cx-aiviz-hint { font-size: 10px; padding: 4px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-aiviz { opacity: 0.7; }
}

/* ── AI Orb — animated centerpiece ────────────────────────────────── */
.cx-aiorb {
  position: relative;
  width: 96px; height: 96px;
  margin: 0 auto 24px;
  z-index: 2;
  isolation: isolate;
}
.cx-aiorb__halo {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,118,74,.45) 0%, rgba(74,118,74,.18) 35%, transparent 70%);
  filter: blur(14px);
  z-index: -1;
  animation: cxOrbHalo 4s ease-in-out infinite;
}
[data-theme="light"] .cx-aiorb__halo {
  background: radial-gradient(circle, rgba(74,118,74,.35) 0%, rgba(74,118,74,.12) 35%, transparent 70%);
}
@keyframes cxOrbHalo {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

.cx-aiorb__ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.cx-aiorb__ring-outer {
  transform-origin: 50% 50%;
  animation: cxOrbSpin 14s linear infinite;
}
.cx-aiorb__ring-mid {
  transform-origin: 50% 50%;
  animation: cxOrbSpin 8s linear infinite reverse;
}
.cx-aiorb__ring-inner {
  transform-origin: 50% 50%;
  animation: cxOrbSpin 20s linear infinite;
}
@keyframes cxOrbSpin {
  to { transform: rotate(360deg); }
}

.cx-aiorb__core {
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, #6db66e 0%, #4a764a 50%, #2a4a2a 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 -8px 14px rgba(0,0,0,.35),
    inset 0 4px 10px rgba(255,255,255,.18),
    0 0 24px rgba(74,118,74,.5);
  animation: cxOrbCore 3.4s ease-in-out infinite;
}
.cx-aiorb__core i {
  color: #fff;
  font-size: 18px;
  text-shadow: 0 0 12px rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.3);
  z-index: 2;
}
.cx-aiorb__pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,230,180,.4), transparent 70%);
  animation: cxOrbCorePulse 2.4s ease-in-out infinite;
}
@keyframes cxOrbCore {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes cxOrbCorePulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* Orbiting satellite dots */
.cx-aiorb__sat {
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #5a9e6a;
  box-shadow: 0 0 8px #5a9e6a, 0 0 12px rgba(90,158,106,.4);
  margin: -2px 0 0 -2px;
  transform-origin: 2px 2px;
}
.cx-aiorb__sat--1 {
  animation: cxOrbit1 6s linear infinite;
}
.cx-aiorb__sat--2 {
  animation: cxOrbit2 9s linear infinite;
  background: #34d399;
  box-shadow: 0 0 8px #34d399, 0 0 14px rgba(52,211,153,.5);
}
.cx-aiorb__sat--3 {
  animation: cxOrbit3 11s linear infinite;
  background: #8abf8a;
  box-shadow: 0 0 6px #8abf8a, 0 0 10px rgba(138,191,138,.5);
}
@keyframes cxOrbit1 {
  from { transform: rotate(0deg)   translateX(48px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(48px) rotate(-360deg); }
}
@keyframes cxOrbit2 {
  from { transform: rotate(120deg) translateX(56px) rotate(-120deg); }
  to   { transform: rotate(480deg) translateX(56px) rotate(-480deg); }
}
@keyframes cxOrbit3 {
  from { transform: rotate(240deg) translateX(40px) rotate(-240deg); }
  to   { transform: rotate(-120deg) translateX(40px) rotate(120deg); }
}

/* ── Ambient floating dots in hero background ──────────────────── */
.cx-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.cx-amb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: 0;
}
.cx-amb--1 {
  top: 12%; left: 15%;
  width: 8px; height: 8px;
  background: rgba(90,158,106,.45);
  box-shadow: 0 0 18px rgba(90,158,106,.4);
  animation: cxAmbFloat1 18s ease-in-out infinite;
}
.cx-amb--2 {
  top: 28%; right: 18%;
  width: 6px; height: 6px;
  background: rgba(74,118,74,.5);
  box-shadow: 0 0 14px rgba(74,118,74,.45);
  animation: cxAmbFloat2 22s ease-in-out infinite -4s;
}
.cx-amb--3 {
  top: 55%; left: 10%;
  width: 5px; height: 5px;
  background: rgba(52,211,153,.45);
  box-shadow: 0 0 12px rgba(52,211,153,.4);
  animation: cxAmbFloat3 25s ease-in-out infinite -8s;
}
.cx-amb--4 {
  top: 18%; left: 50%;
  width: 4px; height: 4px;
  background: rgba(138,191,138,.4);
  box-shadow: 0 0 10px rgba(138,191,138,.35);
  animation: cxAmbFloat4 20s ease-in-out infinite -12s;
}
.cx-amb--5 {
  bottom: 18%; right: 12%;
  width: 7px; height: 7px;
  background: rgba(90,158,106,.4);
  box-shadow: 0 0 16px rgba(90,158,106,.4);
  animation: cxAmbFloat5 26s ease-in-out infinite -6s;
}
@keyframes cxAmbFloat1 {
  0%,100% { transform: translate(0,0);    opacity: 0.6; }
  25%     { transform: translate(40px,-30px); opacity: 1; }
  50%     { transform: translate(80px,10px);  opacity: 0.4; }
  75%     { transform: translate(20px,40px);  opacity: 0.8; }
}
@keyframes cxAmbFloat2 {
  0%,100% { transform: translate(0,0);     opacity: 0.5; }
  33%     { transform: translate(-50px,20px); opacity: 0.9; }
  66%     { transform: translate(-30px,60px); opacity: 0.5; }
}
@keyframes cxAmbFloat3 {
  0%,100% { transform: translate(0,0);    opacity: 0.5; }
  50%     { transform: translate(60px,-40px); opacity: 1; }
}
@keyframes cxAmbFloat4 {
  0%,100% { transform: translate(0,0);     opacity: 0.4; }
  50%     { transform: translate(-40px,50px); opacity: 0.9; }
}
@keyframes cxAmbFloat5 {
  0%,100% { transform: translate(0,0);    opacity: 0.5; }
  50%     { transform: translate(-70px,-50px); opacity: 1; }
}

/* ── Hero composer wrapper — clean, static (rotating border disabled) ─ */
.cx-composer-magic {
  position: relative;
  border-radius: 22px;
  /* No animated background — clean container */
}
/* Rotating green stripe — disabled per request */
.cx-composer-magic__border { display: none !important; }
.cx-composer-magic__border::after { display: none !important; }

.cx-composer--magic-inner {
  position: relative;
  z-index: 1;
  background: var(--bg-1);
  border-radius: 20px;
  border: 1px solid var(--line);
  transition: border-color .18s ease, box-shadow .18s ease;
}
[data-theme="light"] .cx-composer--magic-inner { background: #fff; }
.cx-composer--magic-inner:focus-within {
  border-color: var(--acc);
  box-shadow: 0 0 0 4px rgba(74,118,74,.14), 0 8px 28px rgba(74,118,74,.12);
}

/* ── Live dot on hero agent avatar (signals AI is alive) ───────── */
.cx-agent-ava { position: relative; overflow: visible; }
.cx-agent-live {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid var(--bg);
  box-shadow: 0 0 10px rgba(52,211,153,.7);
  animation: cxLivePulse 2.2s ease-in-out infinite;
}
@keyframes cxLivePulse {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(52,211,153,.6), 0 0 10px rgba(52,211,153,.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(52,211,153,0), 0 0 14px rgba(52,211,153,.9);
    transform: scale(1.1);
  }
}

/* Subtle title shimmer on the gradient name */
.cx-hero-name {
  background: linear-gradient(135deg, var(--acc) 0%, #5a9e6a 40%, #34d399 70%, var(--acc) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cxNameShimmer 8s ease-in-out infinite;
}
@keyframes cxNameShimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* Reduce-motion respect — disable all heavy animations */
@media (prefers-reduced-motion: reduce) {
  .cx-aiorb__halo,
  .cx-aiorb__ring-outer, .cx-aiorb__ring-mid, .cx-aiorb__ring-inner,
  .cx-aiorb__core, .cx-aiorb__pulse,
  .cx-aiorb__sat,
  .cx-amb,
  .cx-composer-magic__border, .cx-composer-magic__border::after,
  .cx-agent-live,
  .cx-hero-name {
    animation: none !important;
  }
}

/* Mobile adjustments — smaller orb, fewer particles for perf */
@media (max-width: 640px) {
  .cx-aiorb { width: 72px; height: 72px; margin-bottom: 18px; }
  .cx-aiorb__core { inset: 20px; }
  .cx-aiorb__core i { font-size: 15px; }
  .cx-amb--3, .cx-amb--4, .cx-amb--5 { display: none; }
  .cx-composer-magic { padding: 1.5px; }
}

/* ═════════════════════════════════════════════════════════════════════
   AI VISUALIZER — clickable button (entry to voice mode)
   ═════════════════════════════════════════════════════════════════════ */
button.cx-aiviz-wrap {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: transform .25s ease, filter .25s ease;
}
button.cx-aiviz-wrap:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 22px 56px rgba(74,118,74,.42));
}
button.cx-aiviz-wrap:active {
  transform: scale(0.98);
}

/* ═════════════════════════════════════════════════════════════════════
   AI VOICE PRESENCE — minimalist, no chat log, smooth bottom→center entry
   ═════════════════════════════════════════════════════════════════════ */
.cx-voice-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cx-voice-overlay.is-active {
  display: flex;
  pointer-events: auto;
}
.cx-voice-overlay.is-active .cx-voice-bg {
  animation: cxVoBgIn .55s cubic-bezier(.22,.61,.36,1) both;
}
.cx-voice-overlay.is-active .cx-voice-stage {
  animation: cxVoStageIn .9s cubic-bezier(.22,.61,.36,1) both;
}
.cx-voice-overlay.is-active .cx-voice-viz-wrap {
  animation: cxVoVizRise 1.1s cubic-bezier(.16,.86,.32,1.05) both;
}
.cx-voice-overlay.is-active .cx-voice-state {
  animation: cxVoFadeIn .6s ease-out .55s both;
}
.cx-voice-overlay.is-active .cx-voice-controls {
  animation: cxVoFadeIn .6s ease-out .75s both;
}
@keyframes cxVoBgIn {
  from { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
}
@keyframes cxVoStageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* The orb rises from below the viewport, scales up to natural size */
@keyframes cxVoVizRise {
  0%   { transform: translateY(70vh) scale(0.35); opacity: 0; filter: blur(20px); }
  35%  { opacity: 1; filter: blur(2px); }
  100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}
@keyframes cxVoFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Reverse animation when closing — handled via .is-closing class */
.cx-voice-overlay.is-closing .cx-voice-viz-wrap {
  animation: cxVoVizSink .55s cubic-bezier(.55,.06,.68,.19) both;
}
.cx-voice-overlay.is-closing .cx-voice-bg {
  animation: cxVoBgOut .45s ease-in both;
}
.cx-voice-overlay.is-closing .cx-voice-state,
.cx-voice-overlay.is-closing .cx-voice-controls,
.cx-voice-overlay.is-closing .cx-voice-caption {
  animation: cxVoFadeOut .25s ease-in both;
}
@keyframes cxVoVizSink {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(40vh) scale(0.55); opacity: 0; filter: blur(8px); }
}
@keyframes cxVoBgOut {
  from { opacity: 1; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
  to   { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
}
@keyframes cxVoFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(6px); }
}

.cx-voice-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(74,118,74,.22), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(52,211,153,.14), transparent 55%),
    radial-gradient(circle at 20% 70%, rgba(90,158,106,.14), transparent 55%),
    rgba(17, 22, 26, .82);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
[data-theme="light"] .cx-voice-bg {
  background:
    radial-gradient(circle at 50% 30%, rgba(74,118,74,.18), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(52,211,153,.10), transparent 55%),
    radial-gradient(circle at 20% 70%, rgba(90,158,106,.10), transparent 55%),
    rgba(240, 244, 240, .82);
}

.cx-voice-x {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  transition: all .15s ease;
}
.cx-voice-x:hover { background: rgba(255,255,255,.18); transform: scale(1.06); }
[data-theme="light"] .cx-voice-x { color: var(--fg); background: rgba(255,255,255,.65); border-color: var(--line); }

.cx-voice-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 720px;
  padding: 32px 20px;
}

.cx-voice-state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  backdrop-filter: blur(8px);
}
[data-theme="light"] .cx-voice-state { background: rgba(255,255,255,.6); border-color: var(--line); color: var(--fg); }

.cx-voice-state-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-mute);
  transition: all .25s ease;
}
.cx-voice-state--prep   .cx-voice-state-dot { background: #f59e0b; box-shadow: 0 0 12px rgba(245,158,11,.7); }
.cx-voice-state--listen .cx-voice-state-dot { background: #34d399; box-shadow: 0 0 12px rgba(52,211,153,.8); animation: cxVoPulse 1.4s infinite; }
.cx-voice-state--rec    .cx-voice-state-dot { background: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,.8); animation: cxVoPulse 0.8s infinite; }
.cx-voice-state--think  .cx-voice-state-dot { background: #a78bfa; box-shadow: 0 0 12px rgba(167,139,250,.7); animation: cxVoSpin 1.2s linear infinite; }
.cx-voice-state--speak  .cx-voice-state-dot { background: #06b6d4; box-shadow: 0 0 14px rgba(6,182,212,.8); animation: cxVoPulse 0.6s infinite; }
.cx-voice-state--mute   .cx-voice-state-dot { background: var(--fg-mute); }
.cx-voice-state--err    .cx-voice-state-dot { background: #ef4444; }
.cx-voice-state--warn   .cx-voice-state-dot { background: #f59e0b; }
@keyframes cxVoPulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(1.4); opacity: 0.6; }
}
@keyframes cxVoSpin { to { transform: rotate(360deg); } }

.cx-voice-viz-wrap {
  width: 420px;
  height: 420px;
  max-width: 80vw;
  max-height: 60vh;
  position: relative;
  filter: drop-shadow(0 24px 60px rgba(74,118,74,.45));
  cursor: pointer;
}
.cx-voice-viz {
  width: 100%;
  height: 100%;
  display: block;
}
.cx-voice-muted-pill {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(248,113,113,.20);
  border: 1px solid rgba(248,113,113,.40);
  color: #fca5a5;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(10px);
  white-space: nowrap;
}

/* User transcript — appears briefly as elegant subtitle below the orb, then fades.
   AI responses are NOT displayed (only spoken) for a true "presence" feel. */
.cx-voice-caption {
  width: 100%;
  max-width: 620px;
  min-height: 48px;
  padding: 12px 22px;
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255,255,255,.94);
  letter-spacing: -0.005em;
  opacity: 1;
  transition: opacity 1.2s ease-out;
  text-shadow: 0 1px 16px rgba(0,0,0,.4);
  font-family: 'Space Grotesk', Inter, sans-serif;
}
.cx-voice-caption:empty { opacity: 0; }
.cx-voice-caption.is-hidden {
  opacity: 0;
}
[data-theme="light"] .cx-voice-caption {
  color: var(--fg);
  text-shadow: none;
}
/* Fade-in when new text arrives */
.cx-voice-caption:not(:empty):not(.is-hidden) {
  animation: cxVoCapIn .35s ease-out;
}
@keyframes cxVoCapIn {
  from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.cx-voice-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Round soft icon buttons — minimalistic, no text labels */
.cx-voice-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .2s ease;
}
[data-theme="light"] .cx-voice-ctrl {
  background: rgba(255,255,255,.70);
  border-color: var(--line);
  color: var(--fg-2);
}
.cx-voice-ctrl:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
}
.cx-voice-ctrl:active { transform: translateY(0); }
.cx-voice-ctrl.is-on {
  background: rgba(248,113,113,.20);
  border-color: rgba(248,113,113,.40);
  color: #fca5a5;
}

/* "Hotovo" — soft, friendly button (no aggressive red phone-call metaphor) */
.cx-voice-end {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .2s ease;
}
.cx-voice-end:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
}
.cx-voice-end:active { transform: translateY(0); }
[data-theme="light"] .cx-voice-end {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
[data-theme="light"] .cx-voice-end:hover {
  background: var(--fg-2);
}

.cx-voice-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 500;
  backdrop-filter: blur(6px);
}
[data-theme="light"] .cx-voice-hint { background: rgba(255,255,255,.5); border-color: var(--line); color: var(--fg-3); }
.cx-voice-hint i { color: var(--acc); font-size: 10px; }
.cx-voice-hint kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
}
[data-theme="light"] .cx-voice-hint kbd { background: var(--bg-2); border-color: var(--line); }

@media (max-width: 700px) {
  .cx-voice-viz-wrap { width: 280px; height: 280px; }
  .cx-voice-stage { gap: 14px; padding: 20px 12px; }
  .cx-voice-controls { flex-wrap: wrap; justify-content: center; }
  .cx-voice-ctrl { height: 38px; padding: 0 14px; font-size: 12px; }
  .cx-voice-end { height: 46px; padding: 0 18px; font-size: 13px; }
  .cx-voice-log { max-height: 120px; font-size: 12.5px; }
}

/* ═════════════════════════════════════════════════════════════════════
   PROFILE — AI Voice picker (per-user TTS preference)
   ═════════════════════════════════════════════════════════════════════ */
.pr-voice-row {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.pr-voice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pr-voice-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  display: flex;
  align-items: center;
}
.pr-voice-sub {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 4px;
  max-width: 540px;
  line-height: 1.5;
}
.pr-voice-current {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  color: var(--fg-3);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--acc-soft);
  border: 1px solid var(--line-acc);
}
.pr-voice-current strong {
  color: var(--acc);
  margin-left: 5px;
  text-transform: capitalize;
  font-weight: 700;
}

.pr-voice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.pr-voice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: all .18s ease;
  outline: none;
}
.pr-voice-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.pr-voice-card:focus-visible {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.pr-voice-card.is-selected {
  border-color: var(--acc);
  background: var(--acc-soft);
  box-shadow: 0 0 0 1px var(--acc) inset, 0 8px 22px rgba(74,118,74,.16);
}

.pr-voice-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}

.pr-voice-info {
  flex: 1;
  min-width: 0;
}
.pr-voice-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pr-voice-card.is-selected .pr-voice-name { color: var(--acc); }
.pr-voice-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  white-space: nowrap;
}
/* "ZADARMO" badge — green pre Slovak free voice */
.pr-voice-card[data-voice="free-sk"] .pr-voice-badge {
  background: linear-gradient(135deg, #10b981, #059669);
}
/* "premium" badge — sivá pre OpenAI voices */
.pr-voice-grid .pr-voice-card:not([data-voice="free-sk"]) .pr-voice-badge {
  background: var(--bg-3);
  color: var(--fg-3);
  font-weight: 600;
}
.pr-voice-desc {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 2px;
}

.pr-voice-play {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--fg-2);
  cursor: pointer;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s ease;
}
.pr-voice-play:hover {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  transform: scale(1.06);
}
.pr-voice-play:active { transform: scale(0.96); }
.pr-voice-play:disabled { opacity: 0.7; cursor: wait; }

.pr-voice-check {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 10px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(74,118,74,.4);
}
.pr-voice-card.is-selected .pr-voice-check { display: inline-flex; }
.pr-voice-card.is-selected .pr-voice-play {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
}

@media (max-width: 600px) {
  .pr-voice-grid { grid-template-columns: 1fr; }
  .pr-voice-card { padding: 10px 12px; }
  .pr-voice-icon { width: 38px; height: 38px; font-size: 14px; }
}

/* Diagnostika TTS — discrete button + monospace output panel */
.pr-voice-diag-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pr-voice-diag-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.pr-voice-diag-btn:hover {
  background: var(--acc-soft);
  border-color: var(--line-acc);
  color: var(--acc);
}
.pr-voice-diag-btn i { font-size: 11px; }
.pr-voice-diag-hint {
  font-size: 11.5px;
  color: var(--fg-4);
  line-height: 1.4;
  flex: 1;
  min-width: 200px;
}
.pr-voice-diag-out {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--fg-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
}




/* ═══════════════════════════════════════════════════════════════════════
   AGENTS — v3 redesign (page, cards, modal)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ────────────────────────────────────────── */
.ag-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 28px 40px;
}
.ag-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.ag-head-left { flex: 1; min-width: 0; }
.ag-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acc);
  display: block;
  margin-bottom: 6px;
}
.ag-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.ag-title-acc {
  background: linear-gradient(135deg, var(--acc), #6b9a6b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ag-sub {
  font-size: 13.5px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.5;
  max-width: 600px;
}
.ag-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(74,118,74,.30);
  transition: all var(--d-1);
}
.ag-new-btn:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(74,118,74,.40); transform: translateY(-1px); }
.ag-new-ico {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(255,255,255,.22);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}

/* ── Stats strip ─────────────────────────────────────────── */
.ag-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .ag-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ag-stats { grid-template-columns: 1fr; } }
.ag-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  transition: border-color var(--d-1);
}
.ag-stat:hover { border-color: var(--line); }
.ag-stat-ico {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.ag-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.ag-stat-lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin-top: 4px;
}

/* ── Toolbar (search + filter + view toggle) ────────────── */
.ag-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.ag-search {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  transition: border-color var(--d-1);
}
.ag-search:focus-within { border-color: var(--line-acc); }
.ag-search i { color: var(--fg-3); font-size: 13px; }
.ag-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 13.5px;
  color: var(--fg);
  font-family: inherit;
}
.ag-filters { display: inline-flex; gap: 8px; align-items: center; }
.ag-select {
  height: 42px;
  padding: 0 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  min-width: 170px;
}
.ag-select:focus { outline: none; border-color: var(--line-acc); }
.ag-view-tog {
  display: inline-flex;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  padding: 3px;
  gap: 2px;
}
.ag-view-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--d-1);
}
.ag-view-btn:hover { color: var(--fg); }
.ag-view-btn.is-active { background: var(--acc-soft); color: var(--acc); }

/* ── Grid (default) + list view ─────────────────────────── */
.ag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.ag-grid[data-view="list"] {
  grid-template-columns: 1fr;
}
.ag-grid[data-view="list"] .ag-card { padding: 14px 18px; }
.ag-grid[data-view="list"] .ag-card-strip { display: none; }
.ag-grid[data-view="list"] .ag-card-stats { display: none; }

.ag-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 18px;
  color: var(--fg-3);
}
.ag-loading i { font-size: 22px; color: var(--acc); }

.ag-empty {
  grid-column: 1 / -1;
  padding: 70px 20px;
  text-align: center;
}
.ag-empty-ico {
  width: 82px; height: 82px;
  margin: 0 auto 18px;
  border-radius: 24px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.ag-empty-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
}
.ag-empty-sub {
  font-size: 13.5px;
  color: var(--fg-3);
  margin-bottom: 18px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.ag-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--acc);
  color: #fff;
  border: 0;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.ag-empty-cta:hover { filter: brightness(1.08); }

/* ── Agent CARD ─────────────────────────────────────────── */
.ag-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all var(--d-1);
}
.ag-card:hover {
  border-color: var(--line-acc);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.ag-card-strip {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  opacity: 0.85;
}

/* Card header: avatar + name + status pill */
.ag-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ag-card-ava {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  /* color a background sa nastavia inline z JS — accent color tint */
}
.ag-card-titles { flex: 1; min-width: 0; }
.ag-card-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-card-persona {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 2px;
}

/* Status pill */
.ag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.ag-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ag-pill-active   { background: rgba(34,197,94,.16); color: #15803d; }
.ag-pill-paused   { background: rgba(148,163,184,.18); color: var(--fg-3); }
.ag-pill-draft    { background: rgba(212,165,116,.18); color: #b45309; }
.ag-pill-error    { background: rgba(248,113,113,.16); color: var(--err); }
[data-theme="dark"] .ag-pill-active { color: #86efac; }
[data-theme="dark"] .ag-pill-draft { color: #fcd34d; }

/* Model line */
.ag-card-model {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  font-size: 11.5px;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
}
.ag-card-model i { color: var(--acc); font-size: 11px; }
.ag-card-model-name {
  font-family: 'JetBrains Mono', monospace;
  color: var(--fg);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ag-card-model-prov { color: var(--fg-3); font-weight: 500; }

/* Description */
.ag-card-desc {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ag-card-desc-empty { color: var(--fg-4); font-style: italic; }

/* Stats row */
.ag-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding-top: 4px;
}
.ag-card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  text-align: center;
}
.ag-card-stat i { font-size: 12px; color: var(--acc); opacity: 0.85; }
.ag-card-stat strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}
.ag-card-stat span {
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Actions row */
.ag-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}
.ag-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.ag-act:hover { background: var(--bg-3); color: var(--fg); border-color: var(--line); }
.ag-act-primary {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  flex: 1;
}
.ag-act-primary:hover { filter: brightness(1.08); background: var(--acc); color: #fff; }
.ag-act-icon {
  width: 34px;
  padding: 0;
  justify-content: center;
}
.ag-act-icon i { font-size: 13px; }
.ag-act-danger:hover { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.30); color: var(--err); }
.ag-act-lbl { display: none; }

/* Toggle switch */
.ag-act-tog {
  position: relative;
  width: 38px;
  height: 22px;
  display: inline-block;
  flex-shrink: 0;
}
.ag-act-tog input { opacity: 0; width: 0; height: 0; }
.ag-act-tog-s {
  position: absolute;
  inset: 0;
  background: var(--bg-3);
  border-radius: 99px;
  cursor: pointer;
  transition: background var(--d-1);
}
.ag-act-tog-s::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--d-1);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.ag-act-tog input:checked + .ag-act-tog-s { background: var(--acc); }
.ag-act-tog input:checked + .ag-act-tog-s::before { transform: translateX(16px); }

/* ═══════════════════════════════════════════════════════════════════════
   AGENT MODAL — full-screen v3 (left nav + main sections)
   ═══════════════════════════════════════════════════════════════════════ */

.agm-bg {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 16, .72);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  backdrop-filter: blur(6px);
}
.agm-bg.open { display: flex; }

.agm-modal {
  width: 100%;
  max-width: 1080px;
  height: 100%;
  max-height: 800px;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.40);
}

.agm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.agm-head-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.agm-head-title i { color: var(--acc); font-size: 15px; }
.agm-head-right { display: inline-flex; align-items: center; gap: 12px; }
.agm-head-hint {
  font-size: 11.5px;
  color: var(--fg-4);
}
.agm-head-x {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 15px;
  transition: all var(--d-1);
}
.agm-head-x:hover { background: var(--bg-3); color: var(--fg); }

.agm-body {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 768px) { .agm-body { grid-template-columns: 1fr; } .agm-nav { display: none; } }

/* Left vertical nav */
.agm-nav {
  background: var(--bg-1);
  border-right: 1px solid var(--line-soft);
  padding: 14px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agm-nav::-webkit-scrollbar { width: 4px; }
.agm-nav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.agm-nav-btn {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  column-gap: 11px;
  align-items: center;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all var(--d-1);
  color: var(--fg-2);
}
.agm-nav-btn:hover { background: var(--bg-2); color: var(--fg); }
.agm-nav-btn.active {
  background: var(--acc-soft);
  color: var(--acc);
}
.agm-nav-ico {
  grid-row: 1 / span 2;
  font-size: 14px;
  text-align: center;
}
.agm-nav-btn.active .agm-nav-ico { color: var(--acc); }
.agm-nav-lbl {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.agm-nav-sub {
  font-size: 10.5px;
  color: var(--fg-4);
  font-weight: 500;
}
.agm-nav-btn.active .agm-nav-sub { color: var(--acc); opacity: 0.7; }

/* Right content */
.agm-content {
  overflow-y: auto;
  padding: 26px 32px 24px;
  background: var(--bg-0);
}
.agm-content::-webkit-scrollbar { width: 6px; }
.agm-content::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

.agm-section-head { margin-bottom: 20px; }
.agm-section-head h3 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 4px;
  letter-spacing: -0.015em;
}
.agm-section-head p {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.5;
}

/* Form fields */
.agm-form { display: flex; flex-direction: column; gap: 16px; }
.agm-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.agm-field { display: flex; flex-direction: column; }
.agm-col-2 { grid-column: span 2; }
@media (max-width: 600px) { .agm-col-2 { grid-column: auto; } }

.agm-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.agm-field label i { color: var(--acc); font-size: 12px; }
.agm-req { color: var(--err); font-weight: 700; }
.agm-hint {
  font-size: 11px;
  color: var(--fg-4);
  margin-top: 5px;
  line-height: 1.4;
}

.agm-inp {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13.5px;
  color: var(--fg);
  font-family: inherit;
  outline: none;
  transition: border-color var(--d-1), box-shadow var(--d-1);
}
.agm-inp:focus {
  border-color: var(--line-acc);
  box-shadow: 0 0 0 3px rgba(74,118,74,.10);
}
.agm-inp::placeholder { color: var(--fg-4); }
textarea.agm-inp { resize: vertical; line-height: 1.55; min-height: 70px; }
.agm-prompt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; line-height: 1.55; }

/* Color & icon helpers */
.agm-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.agm-color {
  width: 48px; height: 42px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--bg-1);
  cursor: pointer;
}
.agm-color-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--fg-3);
}
.agm-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.agm-icon-preview {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* Sliders */
.agm-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.agm-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--bg-3);
  border-radius: 99px;
  outline: none;
}
.agm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  background: var(--acc);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(74,118,74,.4);
}
.agm-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--acc);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.agm-slider-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--acc);
  min-width: 30px;
  text-align: right;
}

/* Callout box */
.agm-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  background: rgba(74,118,74,.08);
  border: 1px solid rgba(74,118,74,.18);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.55;
  margin-bottom: 18px;
}
.agm-callout i { color: var(--acc); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.agm-callout strong { color: var(--fg); }
.agm-callout code {
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--acc);
}
.agm-callout-warn {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.22);
}
.agm-callout-warn i { color: #b45309; }
[data-theme="dark"] .agm-callout-warn i { color: #fcd34d; }

.agm-link {
  color: var(--acc);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.agm-link:hover { filter: brightness(1.1); }

/* Mini buttons */
.agm-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.agm-mini-btn:hover { background: var(--bg-3); color: var(--fg); }
.agm-mini-btn-acc { background: var(--acc); border-color: var(--acc); color: #fff; }
.agm-mini-btn-acc:hover { filter: brightness(1.08); background: var(--acc); color: #fff; }

/* Skills grid */
.agm-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  padding: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  max-height: 360px;
  overflow-y: auto;
}
.agm-skills-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  font-size: 12.5px;
  color: var(--fg-3);
}
.agm-legacy { margin-top: 18px; }
.agm-legacy > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 600;
  padding: 8px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
.agm-legacy > summary::-webkit-details-marker { display: none; }
.agm-legacy[open] > summary i { transform: rotate(90deg); }
.agm-legacy > summary i { transition: transform var(--d-1); }
.agm-legacy-body { padding: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.agm-skills-list .skill-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  font-size: 12.5px;
}
.agm-skills-list .skill-item .skill-name { flex: 1; min-width: 0; color: var(--fg); }

/* Dropzone */
.agm-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 18px;
  background: var(--bg-1);
  border: 2px dashed var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: all var(--d-1);
  margin-bottom: 14px;
}
.agm-dropzone:hover { border-color: var(--line-acc); background: var(--acc-soft); }
.agm-dropzone i {
  font-size: 28px;
  color: var(--acc);
  margin-bottom: 6px;
}
.agm-dropzone strong { font-size: 13.5px; color: var(--fg); }
.agm-dropzone span { font-size: 11.5px; color: var(--fg-3); }

.agm-files-list .file-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  margin-bottom: 6px;
}
.agm-files-list .file-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.agm-files-list .file-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.agm-files-list .file-meta { font-size: 11px; color: var(--fg-3); margin-top: 2px; }

/* Sticky footer */
.agm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.agm-foot-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--fg-3);
}
.agm-foot-left kbd {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  padding: 1px 6px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-2);
}
.agm-foot-right { display: inline-flex; gap: 8px; }
.agm-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: all var(--d-1);
}
.agm-btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--fg-2);
}
.agm-btn-ghost:hover { background: var(--bg-2); color: var(--fg); }
.agm-btn-primary {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  box-shadow: 0 3px 10px rgba(74,118,74,.30);
}
.agm-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(74,118,74,.40); }

/* ═══════════════════════════════════════════════════════════════════════
   AGENTS — file row + file viewer/editor drawer
   ═══════════════════════════════════════════════════════════════════════ */

/* Empty state pre filesList */
.agm-files-empty {
  text-align: center;
  padding: 30px 18px;
  color: var(--fg-3);
}
.agm-files-empty i { font-size: 26px; color: var(--acc); opacity: 0.55; display: block; margin-bottom: 10px; }
.agm-files-empty p { font-size: 13px; font-weight: 600; color: var(--fg-2); margin: 0 0 4px; }
.agm-files-empty small { font-size: 11.5px; }
.agm-files-empty code { background: var(--bg-2); padding: 1px 6px; border-radius: 4px; font-size: 11px; color: var(--acc); }

/* File row v zozname agent.files */
.agm-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  margin-bottom: 6px;
  transition: border-color var(--d-1);
}
.agm-file-row:hover { border-color: var(--line); }
.agm-file-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.agm-file-body {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.agm-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.agm-file-meta {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 3px;
}
.agm-file-actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.agm-file-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--d-1);
}
.agm-file-btn:hover { background: var(--bg-2); color: var(--fg); }
.agm-file-btn-danger:hover { background: rgba(248,113,113,.10); color: var(--err); }

/* ── File Viewer / Editor — slide-in drawer z pravej strany ─────── */
.agm-fv-bg {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 16, .72);
  z-index: 10000;
  display: none;
  align-items: stretch;
  justify-content: flex-end;
  backdrop-filter: blur(6px);
}
.agm-fv-bg.open { display: flex; }
.agm-fv {
  width: min(820px, 100vw);
  background: var(--bg-0);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 40px rgba(0,0,0,.35);
  animation: agmFvSlide .22s var(--e-out, cubic-bezier(.4,0,.2,1));
}
@keyframes agmFvSlide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.agm-fv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  flex-shrink: 0;
}
.agm-fv-head-left { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.agm-fv-ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.agm-fv-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
  max-width: 460px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agm-fv-meta {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
}
.agm-fv-head-right { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; }
.agm-fv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.agm-fv-toggle:hover { background: var(--acc-soft); color: var(--acc); border-color: var(--line-acc); }
.agm-fv-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-decoration: none;
  transition: all var(--d-1);
}
.agm-fv-btn:hover { background: var(--bg-3); color: var(--fg); }

/* Body */
.agm-fv-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
  min-height: 0;
}
.agm-fv-body::-webkit-scrollbar { width: 6px; }
.agm-fv-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.agm-fv-body.is-edit { padding: 0; overflow: hidden; }

.agm-fv-loading,
.agm-fv-error,
.agm-fv-binary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 24px;
  text-align: center;
  color: var(--fg-3);
}
.agm-fv-error i, .agm-fv-binary i { font-size: 32px; color: var(--err); opacity: 0.7; }
.agm-fv-binary i { color: var(--acc); opacity: 0.55; }
.agm-fv-error strong, .agm-fv-binary strong { color: var(--fg); font-size: 14px; }
.agm-fv-binary p { font-size: 12.5px; line-height: 1.55; margin: 0 0 12px; max-width: 360px; }
.agm-fv-binary code { font-family: 'JetBrains Mono', monospace; background: var(--bg-2); padding: 1px 6px; border-radius: 4px; }

/* Preview: pre/code blocks */
.agm-fv-code {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.agm-fv-json { color: #4a764a; }
[data-theme="dark"] .agm-fv-json { color: #86efac; }

/* Markdown preview */
.agm-fv-md {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg);
}
.agm-fv-md h1, .agm-fv-md h2, .agm-fv-md h3 {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-weight: 700;
  color: var(--fg);
  margin: 20px 0 10px;
  letter-spacing: -0.01em;
}
.agm-fv-md h1 { font-size: 22px; }
.agm-fv-md h2 { font-size: 18px; }
.agm-fv-md h3 { font-size: 15px; }
.agm-fv-md p { margin: 0 0 12px; }
.agm-fv-md ul { padding-left: 22px; margin: 0 0 12px; }
.agm-fv-md li { margin-bottom: 4px; }
.agm-fv-md a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
.agm-fv-md code {
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--acc);
}
.agm-fv-md pre { margin: 0 0 14px; }
.agm-fv-md strong { color: var(--fg); font-weight: 700; }

/* CSV preview tabuľka */
.agm-fv-csv-wrap { overflow: auto; border: 1px solid var(--line-soft); border-radius: 10px; }
.agm-fv-csv {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.agm-fv-csv th, .agm-fv-csv td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
}
.agm-fv-csv th {
  background: var(--bg-2);
  color: var(--fg-3);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  position: sticky;
  top: 0;
}
.agm-fv-csv tbody tr:hover { background: var(--bg-2); }

/* PDF / HTML iframe */
.agm-fv-pdf {
  width: 100%;
  height: 100%;
  min-height: 540px;
  border: 0;
  background: #fff;
  border-radius: 10px;
}

/* Edit textarea */
.agm-fv-edit {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--bg-0);
  border: 0;
  outline: none;
  padding: 18px 22px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg);
  resize: none;
  tab-size: 2;
}
.agm-fv-edit:focus { background: var(--bg-0); }

/* Footer pri edit móde */
.agm-fv-foot {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.agm-fv-status {
  font-size: 12px;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  transition: color var(--d-1);
}

@media (max-width: 600px) {
  .agm-fv { width: 100vw; border-left: 0; }
  .agm-fv-name { max-width: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AGENTS — full-screen layout (.ag-shell) — prebíja staršiu .ag-page schému
   ═══════════════════════════════════════════════════════════════════════ */
#sec-agents { padding: 0 !important; }
#sec-agents.sec { padding: 0; }
body.app--fullsec #sec-agents.active { display: block; position: absolute; inset: 0; overflow: hidden; }
@supports selector(:has(*)) {
  .app__main:has(#sec-agents.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-agents.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-agents.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}

.ag-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--bg-0);
  border: 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
@media (max-width: 900px) {
  .ag-shell { grid-template-columns: 1fr; }
  .ag-side { display: none; }
}

/* ── Sidebar ─────────────────────────────────────────────── */
.ag-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px 14px;
}
.ag-side::-webkit-scrollbar { width: 6px; }
.ag-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

.ag-side-title { margin-bottom: 16px; }
.ag-side-eyebrow {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--acc);
  display: block; margin-bottom: 4px;
}
.ag-side-h {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 19px; font-weight: 700;
  color: var(--fg); margin: 0; letter-spacing: -0.01em;
}
.ag-side-section {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-4);
  padding: 14px 6px 8px;
}

/* Status filters (sidebar nav) */
.ag-side-filters { display: flex; flex-direction: column; gap: 2px; }
.ag-side-filter {
  display: flex; align-items: center; gap: 11px;
  height: 36px; padding: 0 12px;
  background: transparent; border: 0; border-radius: 9px;
  color: var(--fg-2);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--d-1), color var(--d-1);
  text-align: left;
}
.ag-side-filter:hover { background: var(--bg-2); color: var(--fg); }
.ag-side-filter.is-active {
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 700;
}
.ag-side-filter-ico {
  width: 16px; text-align: center; font-size: 13px;
  color: var(--fg-3);
  flex-shrink: 0;
}
.ag-side-filter.is-active .ag-side-filter-ico { color: var(--acc); }
.ag-side-filter > span:not(.ag-side-filter-count) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-side-filter-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-4);
  background: var(--bg-2);
  padding: 1px 7px;
  border-radius: 99px;
  min-width: 22px;
  text-align: center;
}
.ag-side-filter.is-active .ag-side-filter-count {
  background: var(--acc);
  color: #fff;
}

/* Sidebar stats */
.ag-side-stats { display: flex; flex-direction: column; gap: 6px; }
.ag-side-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
}
.ag-side-stat-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.ag-side-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700;
  color: var(--fg);
  line-height: 1.05;
}
.ag-side-stat-lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
}

/* Sidebar foot info */
.ag-side-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.55;
}
.ag-side-foot code {
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10.5px;
  color: var(--acc);
}

/* ── Main area ───────────────────────────────────────────── */
.ag-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-0);
  padding: 26px 32px 36px;
}
.ag-main::-webkit-scrollbar { width: 6px; }
.ag-main::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

.ag-main-head { margin-bottom: 18px; }
.ag-main-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.ag-main-title-acc {
  background: linear-gradient(135deg, var(--acc), #6b9a6b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ag-main-sub {
  font-size: 13.5px;
  color: var(--fg-3);
  margin: 0;
  line-height: 1.5;
  max-width: 680px;
}

/* Override starý .ag-page → schované ak existuje, plus prebijeme starý .ag-head / .ag-stats */
.ag-page { max-width: none !important; padding: 0 !important; }
.ag-page > .ag-head, .ag-page > .ag-stats { display: none !important; }

/* Toolbar (search + filter + view) — bez horizontálnych okrajov, plná šírka v main */
.ag-shell .ag-toolbar { margin-bottom: 16px; }

/* Grid uses full width of main, auto-fill */
.ag-shell .ag-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ag-shell .ag-grid[data-view="list"] { grid-template-columns: 1fr; }

/* ═══════════════════════════════════════════════════════════════════════
   AGENTS — "AI alive" animations (cyber/high-tech feel)
   Všetko CSS-only. Rešpektuje prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1) Active dot — static green s jemným inner glow (žiadny sonar pulse) ─── */
.ag-pill-active .ag-pill-dot {
  background: #22c55e;
  box-shadow: 0 0 0 1.5px rgba(34, 197, 94, .25), inset 0 0 2px rgba(255,255,255,.5);
}

/* ── 2) Top strip — clean static gradient (žiadny flow shimmer) ──────── */
.ag-card-strip {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  overflow: hidden;
}

/* ── 3) Avatar — bez ring pulse animácií. Subtle scale on card hover. ── */
.ag-card-ava {
  position: relative;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.ag-card:hover .ag-card-ava {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
/* Jemná "AI sparkle" hviezdička v rohu avatara (len pri active agentoch) */
.ag-card[data-status="active"] .ag-card-ava::after {
  content: '✦';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(245, 158, 11, .35);
  font-weight: 900;
  line-height: 1;
}

/* ── 4) Title — clean static gradient (žiadny shimmer animation) ───── */
.ag-main-title-acc {
  background-image: linear-gradient(135deg, var(--acc, #4a764a), #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 5) Hover scan-line sweep cez kartu ───────────────────── */
.ag-card { position: relative; overflow: hidden; isolation: isolate; }
.ag-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(74, 118, 74, .12) 50%,
    transparent 65%);
  transform: translateX(-100%);
  transition: transform .85s cubic-bezier(.25, .1, .25, 1);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.ag-card:hover::before { transform: translateX(100%); }
.ag-card > * { position: relative; z-index: 1; }

/* ── 6) Stats numbers — olive pop pri hoveri karty ────────── */
.ag-card-stat strong {
  transition: color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
  display: inline-block;
}
.ag-card:hover .ag-card-stat strong {
  color: var(--acc);
  transform: scale(1.08);
}
.ag-card-stat i {
  transition: transform .35s ease;
}
.ag-card:hover .ag-card-stat i { transform: scale(1.15) rotate(-6deg); }

/* ── 7) Sidebar "Aktívni" filter — static green badge (žiadny pulse ring) ── */
.ag-side-filter[data-status="active"] .ag-side-filter-ico {
  color: #22c55e !important;
}

/* ── 8) Loading spinner — cyber feel (orbit dots) ─────────── */
.ag-loading {
  position: relative;
}
.ag-loading i.fa-spinner {
  font-size: 0; /* skry pôvodný spinner */
}
.ag-loading::before {
  content: '';
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line-soft);
  border-top-color: var(--acc);
  border-right-color: var(--acc);
  animation: agSpin 1.1s linear infinite;
  display: block;
  margin: 0 auto;
}
.ag-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--acc);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--acc);
  animation: agCorePulse 1.6s ease-in-out infinite;
}
@keyframes agSpin { to { transform: rotate(360deg); } }
@keyframes agCorePulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.4); }
}

/* ── 9) Empty-state robot — subtle float + glow ───────────── */
.ag-empty-ico {
  animation: agRobotFloat 4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(74, 118, 74, .35);
}
.ag-empty-ico {
  animation: agRobotFloat 4s ease-in-out infinite,
             agRobotGlow  3.2s ease-in-out infinite;
}
@keyframes agRobotFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes agRobotGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 118, 74, .0); }
  50%      { box-shadow: 0 0 30px 4px rgba(74, 118, 74, .18); }
}

/* ── 10) Subtle cyber-grid pattern v main area (very faint) ─ */
.ag-main {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(74, 118, 74, .07) 1px, transparent 0);
  background-size: 28px 28px;
  background-attachment: local;
}
[data-theme="light"] .ag-main {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(74, 118, 74, .05) 1px, transparent 0);
}

/* ── 11) New-button — soft "energy" pulse ─────────────────── */
.ag-side-new {
  position: relative;
  overflow: hidden;
}
.ag-side-new::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, .22) 50%,
    transparent 70%);
  transform: translateX(-100%);
  animation: agBtnShimmer 4.5s ease-in-out infinite;
  animation-delay: 1.5s;
  pointer-events: none;
}
@keyframes agBtnShimmer {
  0%   { transform: translateX(-100%); }
  35%  { transform: translateX(120%);  }
  100% { transform: translateX(120%);  }
}

/* ── 12) Toggle (active/paused) — drobný energy glow keď on ─ */
.ag-act-tog input:checked + .ag-act-tog-s {
  box-shadow: 0 0 0 0 rgba(74, 118, 74, .5);
  animation: agTogPulse 2.6s ease-in-out infinite;
}
@keyframes agTogPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(74, 118, 74, .45); }
  50%      { box-shadow: 0 0 0 4px rgba(74, 118, 74, 0);   }
}

/* ── Accessibility — používateľ s reduced-motion má pokoj ──── */
@media (prefers-reduced-motion: reduce) {
  .ag-pill-active .ag-pill-dot,
  .ag-card-strip::after,
  .ag-card[data-status="active"] .ag-card-ava::after,
  .ag-card[data-status="active"] .ag-card-ava::before,
  .ag-main-title-acc,
  .ag-card::before,
  .ag-side-filter[data-status="active"] .ag-side-filter-ico::after,
  .ag-loading::before,
  .ag-loading::after,
  .ag-empty-ico,
  .ag-side-new::after,
  .ag-act-tog input:checked + .ag-act-tog-s {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   DRIVE — missing file state (záznam je v DB ale fyzický súbor chýba)
   ═══════════════════════════════════════════════════════════════════════ */
.fl-card.is-missing {
  border-color: rgba(248,113,113,.30);
  background: linear-gradient(135deg, rgba(248,113,113,.04), transparent 60%), var(--bg-1);
}
.fl-card.is-missing:hover { border-color: rgba(248,113,113,.55); }
.fl-card.is-missing .fl-card-name { color: var(--fg-3); text-decoration: line-through; text-decoration-color: rgba(248,113,113,.4); text-decoration-thickness: 1px; }
.fl-card.is-missing .fl-card-thumb { background: rgba(248,113,113,.04); }
.fl-card-missing-badge {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: rgba(248,113,113,.18);
  color: var(--err);
  border: 1px solid rgba(248,113,113,.30);
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}
.fl-card-missing-badge i { font-size: 10px; }

/* ═══════════════════════════════════════════════════════════════════════
   DRIVE VIEWER — extended preview for CSV / XLSX / DOCX
   ═══════════════════════════════════════════════════════════════════════ */

.fl-viewer-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 24px;
  color: var(--fg-3);
  font-size: 13.5px;
}
.fl-viewer-loading i { color: var(--acc); font-size: 18px; }

/* CSV — clean table */
.fl-viewer-csv {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 18px 22px;
  background: var(--bg-0);
}
.fl-viewer-csv-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: auto;
  max-height: calc(100vh - 200px);
}
.fl-viewer-csv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.fl-viewer-csv-table th, .fl-viewer-csv-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}
.fl-viewer-csv-table th {
  background: var(--bg-2);
  color: var(--fg-3);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: sticky;
  top: 0;
  z-index: 2;
  font-family: 'Inter', sans-serif;
}
.fl-viewer-csv-table tbody tr:hover { background: var(--bg-2); }
.fl-viewer-csv-table td:last-child, .fl-viewer-csv-table th:last-child { border-right: 0; }
.fl-viewer-csv-note {
  margin-top: 10px;
  padding: 8px 14px;
  background: rgba(212,165,116,.08);
  border: 1px solid rgba(212,165,116,.20);
  border-radius: 9px;
  font-size: 12px;
  color: var(--fg-3);
}
.fl-viewer-csv-note i { color: #b45309; margin-right: 6px; }

/* XLSX — sheet tabs + SheetJS-generated table styling */
.fl-viewer-xlsx {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
}
.fl-viewer-xlsx-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 22px 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
  overflow-x: auto;
  flex-shrink: 0;
}
.fl-viewer-xlsx-tab {
  padding: 9px 16px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--fg-3);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all var(--d-1);
  margin-bottom: -1px;
}
.fl-viewer-xlsx-tab:hover { color: var(--fg); }
.fl-viewer-xlsx-tab.is-active {
  color: var(--acc);
  border-bottom-color: var(--acc);
  font-weight: 700;
}
.fl-viewer-xlsx-sheets {
  flex: 1;
  overflow: auto;
  padding: 18px 22px;
}
.fl-viewer-xlsx-sheet table {
  border-collapse: collapse;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  font-size: 12.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  /* SheetJS generuje neoštýlovaný table — override defaults */
}
.fl-viewer-xlsx-sheet td, .fl-viewer-xlsx-sheet th {
  padding: 6px 11px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg);
  background: var(--bg-1) !important;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  min-width: 60px;
}
.fl-viewer-xlsx-sheet tr:first-child td,
.fl-viewer-xlsx-sheet tr:first-child th {
  background: var(--bg-2) !important;
  font-weight: 700;
  color: var(--fg-2);
  position: sticky;
  top: 0;
  z-index: 2;
}
.fl-viewer-xlsx-sheet tr:hover td { background: var(--bg-2) !important; }

/* DOCX — render z docx-preview library
   POZN: docx-preview emituje viaceré <section.docx> elementy (jeden per strana).
   FLEX-COLUMN aby sa stránky stack-li pod sebou (nie vedľa) a scrollovali sa.
*/
.fl-viewer-docx {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
  padding: 30px 22px;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
/* docx-preview wrapper — flex-column aby stránky šli pod seba */
.fl-viewer-docx .docx-wrapper {
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100%;
}
.fl-viewer-docx .docx-wrapper > section.docx,
.fl-viewer-docx .docx-document {
  background: #ffffff !important;
  color: #1a1a1a !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.10);
  border-radius: 6px;
  margin-bottom: 0 !important;  /* gap rieši wrapper */
  max-width: 100% !important;
  flex-shrink: 0;               /* zabráň ich stláčaniu vo flex column */
}
[data-theme="dark"] .fl-viewer-docx .docx-wrapper > section.docx,
[data-theme="dark"] .fl-viewer-docx .docx-document {
  background: #f8f9fa !important;
  color: #1a1a1a !important;
}
.fl-viewer-docx .docx-document * { color: inherit !important; }
.fl-viewer-docx .docx-document a { color: #1a73e8 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MEMORY — "LLM Wikipedia" full-screen redesign (.mem-*)
   3 scopes: Naša LLM · OpenClaw · Agenti
   ═══════════════════════════════════════════════════════════════════════ */
#sec-memory { padding: 0 !important; }
#sec-memory.sec { padding: 0; }
body.app--fullsec #sec-memory.active { display: block; position: absolute; inset: 0; overflow: hidden; }
@supports selector(:has(*)) {
  .app__main:has(#sec-memory.active) { overflow: hidden !important; padding: 0 !important; position: relative; }
  .content:has(> #sec-memory.active) { padding: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; height: 100% !important; position: relative; }
  #sec-memory.active { display: block; position: absolute; inset: 0; overflow: hidden; }
}

.mem-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  background: var(--bg-0);
  border: 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
@media (max-width: 900px) {
  .mem-shell { grid-template-columns: 1fr; }
  .mem-side { display: none; }
}

/* ── Sidebar ─────────────────────────────────────────────── */
.mem-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px 14px;
}
.mem-side::-webkit-scrollbar { width: 6px; }
.mem-side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

.mem-side-title { margin-bottom: 16px; }
.mem-side-eyebrow {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--acc);
  display: block; margin-bottom: 4px;
}
.mem-side-h {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 19px; font-weight: 700;
  color: var(--fg); margin: 0; letter-spacing: -0.01em;
}
.mem-side-section {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-4);
  padding: 14px 6px 8px;
}

/* Scope navigation — 3 veľké tlačidlá */
.mem-scopes { display: flex; flex-direction: column; gap: 6px; }
.mem-scope {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all var(--d-1);
}
.mem-scope:hover { background: var(--bg-2); border-color: var(--line); }
.mem-scope.is-active {
  background: var(--acc-soft);
  border-color: var(--line-acc);
}
.mem-scope-ico {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}
.mem-scope-body { min-width: 0; }
.mem-scope-name {
  display: block;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.mem-scope.is-active .mem-scope-name { color: var(--acc); }
.mem-scope-sub {
  display: block;
  font-size: 10.5px;
  color: var(--fg-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-scope-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: 99px;
  min-width: 26px;
  text-align: center;
}
.mem-scope.is-active .mem-scope-count {
  background: var(--acc);
  color: #fff;
}

/* Agent picker (visible only for "agents" scope) */
.mem-agent-picker {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.mem-agent-picker:focus { outline: none; border-color: var(--line-acc); }

/* Search box */
.mem-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  transition: border-color var(--d-1);
}
.mem-search:focus-within { border-color: var(--line-acc); }
.mem-search i { color: var(--fg-3); font-size: 12px; }
.mem-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 13px;
  color: var(--fg);
  font-family: inherit;
}

/* Sidebar stats */
.mem-side-stats { display: flex; flex-direction: column; gap: 6px; }
.mem-side-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 11px;
}
.mem-side-stat-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.mem-side-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.05;
}
.mem-side-stat-lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
}

/* Sidebar foot */
.mem-side-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  color: var(--fg-3);
  line-height: 1.55;
}
.mem-side-foot code {
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10.5px;
  color: var(--acc);
}

/* ── Main area ───────────────────────────────────────────── */
.mem-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-0);
  padding: 26px 32px 36px;
}
.mem-main::-webkit-scrollbar { width: 6px; }
.mem-main::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

.mem-main-head { margin-bottom: 18px; }
.mem-main-eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--acc);
  margin-bottom: 6px;
}
.mem-main-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.mem-main-title-acc {
  background: linear-gradient(135deg, var(--acc), #6b9a6b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mem-main-sub {
  font-size: 13.5px;
  color: var(--fg-3);
  margin: 0 0 14px;
  line-height: 1.5;
  max-width: 720px;
}

/* Toolbar */
.mem-main-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}
.mem-toolbar-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.mem-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.mem-chip:hover { border-color: var(--line); background: var(--bg-2); }
.mem-chip.is-active {
  background: var(--acc-soft);
  border-color: var(--line-acc);
  color: var(--acc);
}
.mem-chip i { font-size: 10.5px; opacity: 0.75; }
.mem-chip-c {
  margin-left: 4px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--fg-4);
  padding: 0 4px;
}
.mem-chip.is-active .mem-chip-c { color: var(--acc); }

.mem-toolbar-right { display: inline-flex; gap: 10px; align-items: center; }
.mem-sort {
  height: 32px;
  padding: 0 10px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--fg);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.mem-sort:focus { outline: none; border-color: var(--line-acc); }
.mem-view-tog {
  display: inline-flex;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.mem-view-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 12px;
  transition: all var(--d-1);
}
.mem-view-btn:hover { color: var(--fg); }
.mem-view-btn.is-active { background: var(--acc-soft); color: var(--acc); }

/* ── Grid of cards (Wikipedia-like) ──────────────────────── */
.mem-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.mem-grid[data-view="list"] { grid-template-columns: 1fr; gap: 4px; }

.mem-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--fg-3);
}
.mem-loading i { color: var(--acc); font-size: 18px; }

.mem-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
}
.mem-empty-ico {
  width: 70px; height: 70px;
  margin: 0 auto 14px;
  border-radius: 20px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.mem-empty p { font-size: 13.5px; color: var(--fg-3); margin: 0; max-width: 380px; margin-left: auto; margin-right: auto; line-height: 1.55; }

/* Memory card */
.mem-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all var(--d-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mem-card:hover {
  border-color: var(--line-acc);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.mem-card-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.mem-card-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.mem-card-titles { flex: 1; min-width: 0; }
.mem-card-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.mem-card-path {
  font-size: 11px;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-card-path i { font-size: 10px; margin-right: 4px; opacity: 0.7; }
.mem-card-path strong { color: var(--fg-2); font-weight: 700; }

.mem-card-imp {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}
.mem-card-imp.is-low  { background: rgba(148,163,184,.18); color: var(--fg-3); }
.mem-card-imp.is-mid  { background: rgba(212,165,116,.18); color: #b45309; }
.mem-card-imp.is-high { background: rgba(248,113,113,.18); color: var(--err); }
[data-theme="dark"] .mem-card-imp.is-mid  { color: #fcd34d; }
.mem-card-imp i { font-size: 9px; }

.mem-card-preview {
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mem-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
}
.mem-card-tags {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.mem-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: 10.5px;
  font-weight: 600;
}
.mem-tag-more { background: var(--acc-soft); color: var(--acc); }
.mem-card-time {
  font-size: 10.5px;
  color: var(--fg-4);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

/* List view rows */
.mem-list { display: flex; flex-direction: column; gap: 2px; }
.mem-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  cursor: pointer;
  transition: all var(--d-1);
}
.mem-row:hover { border-color: var(--line); background: var(--bg-2); }
.mem-row-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.mem-row-body { min-width: 0; }
.mem-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Space Grotesk', Inter, sans-serif;
}
.mem-row-path {
  font-size: 11px;
  color: var(--fg-3);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-row-imp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
}
.mem-row-imp.is-low  { background: rgba(148,163,184,.16); color: var(--fg-3); }
.mem-row-imp.is-mid  { background: rgba(212,165,116,.16); color: #b45309; }
.mem-row-imp.is-high { background: rgba(248,113,113,.16); color: var(--err); }
.mem-row-imp i { font-size: 9px; margin-right: 2px; }
.mem-row-time {
  font-size: 11px;
  color: var(--fg-4);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

/* ═══ EDITOR — slide-in drawer ═══════════════════════════════ */
.mem-editor-bg {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 16, .72);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-2);
  backdrop-filter: blur(6px);
}
.mem-editor-bg.is-open { opacity: 1; pointer-events: auto; }

.mem-editor {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(760px, 100vw);
  background: var(--bg-0);
  border-left: 1px solid var(--line);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform var(--d-3) cubic-bezier(.25,.1,.25,1);
  box-shadow: -16px 0 40px rgba(0,0,0,.35);
}
.mem-editor.is-open { transform: translateX(0); }

.mem-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.mem-editor-head-left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mem-editor-ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.mem-editor-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-editor-meta {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
}
.mem-editor-head-right {
  display: inline-flex;
  gap: 4px;
}
.mem-icon-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: all var(--d-1);
}
.mem-icon-btn:hover { background: var(--bg-3); color: var(--fg); }
.mem-editor-delete-btn:hover { background: rgba(248,113,113,.10); color: var(--err); }

.mem-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mem-editor-row { display: flex; flex-direction: column; gap: 14px; }
.mem-editor-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) { .mem-editor-row-2 { grid-template-columns: 1fr; } }

.mem-editor-field { display: flex; flex-direction: column; }
.mem-editor-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  margin-bottom: 6px;
}
.mem-req { color: var(--err); }

.mem-inp {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13.5px;
  color: var(--fg);
  font-family: inherit;
  outline: none;
  transition: border-color var(--d-1), box-shadow var(--d-1);
}
.mem-inp:focus {
  border-color: var(--line-acc);
  box-shadow: 0 0 0 3px rgba(74,118,74,.08);
}
.mem-textarea {
  min-height: 280px;
  resize: vertical;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.6;
}
.mem-editor-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mem-editor-content textarea {
  flex: 1;
  min-height: 320px;
}

.mem-importance {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 39px;
  padding: 0 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.mem-importance-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  background: var(--bg-3);
  border-radius: 99px;
  outline: none;
}
.mem-importance-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--acc);
  border-radius: 50%;
  cursor: pointer;
}
.mem-importance-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--acc);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.mem-importance-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--acc);
  min-width: 22px;
  text-align: right;
}

.mem-editor-foot {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.mem-editor-hint {
  font-size: 11.5px;
  color: var(--fg-3);
}
.mem-editor-hint kbd {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  padding: 1px 6px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--fg-2);
}
.mem-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: all var(--d-1);
}
.mem-btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--fg-2);
}
.mem-btn-ghost:hover { background: var(--bg-2); color: var(--fg); }
.mem-btn-primary {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  box-shadow: 0 3px 10px rgba(74,118,74,.30);
}
.mem-btn-primary:hover { filter: brightness(1.08); }

/* ═══════════════════════════════════════════════════════════════════════
   MAIL — attachment actions (3-dot menu + preview lightbox)
   ═══════════════════════════════════════════════════════════════════════ */
.ml-r-att-actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}
.ml-r-att-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-decoration: none;
  transition: all var(--d-1);
}
.ml-r-att-btn:hover { background: var(--bg-3); color: var(--fg); }

/* 3-dot popover menu */
.ml-att-menu {
  position: fixed;
  z-index: 10500;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: mlMenuIn .12s ease-out;
}
@keyframes mlMenuIn { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
.ml-att-menu > * {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  width: 100%;
  transition: background var(--d-1);
}
.ml-att-menu > *:hover { background: var(--bg-2); }
.ml-att-menu > * i {
  width: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--acc);
}

/* Preview lightbox (PDF / image) */
.ml-att-preview-bg {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 16, .85);
  z-index: 10600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  backdrop-filter: blur(8px);
}
.ml-att-preview-bg.is-open { display: flex; }
.ml-att-preview {
  width: 100%;
  max-width: 1100px;
  height: 100%;
  max-height: 92vh;
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .40);
}
.ml-att-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ml-att-preview-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-att-preview-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.ml-att-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all var(--d-1);
}
.ml-att-preview-btn:hover { background: var(--bg-3); color: var(--fg); }
.ml-att-preview-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  padding: 0;
}
.ml-att-preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.ml-att-preview-pdf {
  width: 100%;
  height: 100%;
  min-height: 600px;
  border: 0;
  background: #fff;
}
.ml-att-preview-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--fg-3);
}
.ml-att-preview-empty i { font-size: 36px; color: var(--acc); opacity: 0.5; display: block; margin-bottom: 12px; }
.ml-att-preview-empty a { color: var(--acc); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   INBOX — DreamsChat-style polish (v3 olive)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Recent chats horizontal strip (above list) ─────────── */
.ix-recent {
  padding: 6px 14px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.ix-recent-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  padding: 4px 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ix-recent-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-behavior: smooth;
}
.ix-recent-strip::-webkit-scrollbar { height: 4px; }
.ix-recent-strip::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.ix-recent-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 56px;
  background: transparent;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  font-family: inherit;
}
.ix-recent-ava {
  position: relative;
  width: 48px; height: 48px;
}
.ix-recent-ava > * {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-family: 'Space Grotesk', Inter, sans-serif;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  border: 2px solid var(--bg-1);
}
.ix-recent-ava img { width: 100%; height: 100%; object-fit: cover; }
.ix-recent-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fg-2);
  text-align: center;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ix-recent-item:hover .ix-recent-ava > * {
  transform: scale(1.05);
  transition: transform var(--d-1);
}

.ix-list-head-sub {
  padding: 12px 18px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
}

/* ── Header 3-dot menu (DreamsChat-style) ─────────────────── */
.ix-menu-wrap { position: relative; }
.ix-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  min-width: 240px;
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: ixMenuIn .12s ease-out;
}
@keyframes ixMenuIn { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
.ix-menu button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background var(--d-1);
  width: 100%;
}
.ix-menu button:hover { background: var(--bg-2); }
.ix-menu button i {
  width: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-3);
}
.ix-menu button:hover i { color: var(--acc); }
.ix-menu-sep {
  height: 1px;
  background: var(--line-soft);
  margin: 3px 8px;
}
.ix-menu-danger { color: var(--err) !important; }
.ix-menu-danger i { color: var(--err) !important; }
.ix-menu-danger:hover { background: rgba(248,113,113,.08) !important; }

/* ── Messages area — subtle dotted pattern background ─────── */
.ix-msgs {
  position: relative;
  background-color: var(--bg-0);
  background-image:
    radial-gradient(circle, rgba(74,118,74,.06) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 0 0;
  padding: 24px 22px 14px;
}
[data-theme="dark"] .ix-msgs {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.035) 1.5px, transparent 1.5px);
}

/* ── Polish message bubbles (existing .tm-bubble already styled) ── */
.tm-bubble {
  border-radius: 18px !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.tm-bubble-row.is-mine .tm-bubble {
  background: linear-gradient(135deg, var(--acc), #3a5e3a) !important;
  border-bottom-right-radius: 6px !important;
  box-shadow: 0 3px 12px rgba(74,118,74,.30);
}
.tm-bubble-row:not(.is-mine) .tm-bubble {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-soft) !important;
  border-bottom-left-radius: 6px !important;
}

/* Reactions row (jeden riadok pod bublinou — DreamsChat-style) */
.tm-reactions {
  display: inline-flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.tm-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--d-1);
}
.tm-reaction:hover {
  background: var(--acc-soft);
  border-color: var(--line-acc);
  transform: scale(1.06);
}
.tm-reaction.is-mine {
  background: var(--acc-soft);
  border-color: var(--line-acc);
  color: var(--acc);
}

/* Voice message player (audio prílohy) */
.tm-bubble audio {
  display: block;
  width: 240px;
  max-width: 100%;
  margin-top: 6px;
  border-radius: 99px;
  height: 36px;
}
.tm-bubble audio::-webkit-media-controls-panel {
  background-color: var(--bg-2);
}

/* File attachment card v správe — DreamsChat style */
.tm-att-file {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px !important;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  text-decoration: none;
  color: var(--fg);
  margin: 4px 0;
  transition: all var(--d-1);
  min-width: 220px;
}
.tm-att-file:hover { border-color: var(--line-acc); background: var(--bg-3); }
.tm-bubble-row.is-mine .tm-att-file {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.tm-bubble-row.is-mine .tm-att-file:hover {
  background: rgba(255,255,255,.22);
}
.tm-att-file::before {
  content: '\f15b'; /* fa-file */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--acc-soft);
  color: var(--acc);
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
}
.tm-bubble-row.is-mine .tm-att-file::before {
  background: rgba(255,255,255,.20);
  color: #fff;
}
.tm-att-file i:first-child { display: none; } /* skry pôvodnú FA, máme cez ::before */
.tm-att-file-name {
  font-weight: 600;
  font-size: 13px;
  display: block;
}
.tm-att-file-size {
  font-size: 11px;
  opacity: 0.7;
  display: block;
  margin-top: 1px;
}

/* Polished list rows — DreamsChat style (bigger avatars, cleaner spacing) */
.ix-list .tm-thread,
.ix-list .tm-row,
.ix-list > div[data-id] {
  border-radius: 14px !important;
  padding: 11px 14px !important;
  gap: 12px;
  margin: 0 8px 4px !important;
}
.ix-list .tm-thread .tm-thread-ava,
.ix-list .tm-row .tm-row-ava,
.ix-list .tm-ava {
  width: 46px !important;
  height: 46px !important;
  font-size: 15px;
}
.ix-list .tm-thread.is-active::before,
.ix-list .tm-thread.active::before,
.ix-list .tm-row.is-active::before,
.ix-list .tm-row.active::before { display: none; }
.ix-list .tm-thread.is-active,
.ix-list .tm-thread.active,
.ix-list .tm-row.is-active,
.ix-list .tm-row.active {
  background: var(--acc-soft) !important;
}

/* Online dot — DreamsChat style (zelená s ringom) */
.tm-status-dot,
[class*="-ava"] .tm-online-dot,
[class*="-ava"]::after {
  background: #22c55e;
}

/* Sticky header v list pane — vyzerá ako card head */
.ix-list-head {
  background: var(--bg-1);
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.ix-list-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-family: 'Space Grotesk', Inter, sans-serif;
}

/* Search v list pane — chunkier */
.ix-search {
  margin: 0 12px 8px;
  height: 40px;
  background: var(--bg-2);
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  transition: border-color var(--d-1);
}
.ix-search:focus-within {
  border-color: var(--line-acc);
  background: var(--bg-1);
}

/* Mobile — kompaktnejšie */
@media (max-width: 600px) {
  .ix-recent-strip { gap: 8px; }
  .ix-recent-ava, .ix-recent-ava > * { width: 44px !important; height: 44px !important; }
  .ix-msgs { padding: 14px 14px 8px; background-size: 18px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   INBOX — DreamsChat-style FROM SCRATCH (.dc-*) — olive v3 paleta
   3-panel: rail (60px) + list (320px) + main chat (flex 1)
   ═══════════════════════════════════════════════════════════════════════ */

/* Full-screen shell — prebíja staršie .ix-shell / .tm-shell layout */
.dc-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 64px 340px 1fr;
  gap: 0;
  background: var(--bg-0);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
@media (max-width: 980px) {
  .dc-shell { grid-template-columns: 60px 1fr; }
  .dc-list { display: none; }
  .dc-shell.side-open .dc-list { display: flex; position: absolute; left: 60px; top: 0; bottom: 0; width: 320px; z-index: 50; box-shadow: 8px 0 28px rgba(0,0,0,.18); }
}
@media (max-width: 600px) {
  .dc-shell { grid-template-columns: 1fr; }
  .dc-rail { display: none; }
  .dc-shell.side-open .dc-list { left: 0; width: 100vw; }
}

/* ═══ 1) LEFT RAIL ═══════════════════════════════════════════ */
.dc-rail {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 12px;
  gap: 8px;
}
.dc-rail-brand {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(74,118,74,.30);
  margin-bottom: 6px;
}
.dc-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  width: 100%;
  align-items: center;
}
.dc-rail-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.dc-rail-btn {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all var(--d-1);
}
.dc-rail-btn:hover { background: var(--bg-2); color: var(--fg); }
.dc-rail-btn.is-active {
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  box-shadow: 0 4px 14px rgba(74,118,74,.30);
}
.dc-rail-btn.is-active::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 22px;
  background: var(--acc);
  border-radius: 0 4px 4px 0;
}
.dc-rail-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--err);
  color: #fff;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-1);
}
.dc-rail-me-ava {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  border: 2px solid var(--bg-1);
}
.dc-rail-me-ava img { width: 100%; height: 100%; object-fit: cover; }

/* ═══ 2) CHATS LIST PANE ═════════════════════════════════════ */
.dc-list {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.dc-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 12px;
  flex-shrink: 0;
}
.dc-list-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.02em;
}
.dc-list-head-actions { display: inline-flex; gap: 4px; }

.dc-icon-btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all var(--d-1);
}
.dc-icon-btn:hover { background: var(--bg-2); color: var(--fg); }
.dc-icon-btn.dc-icon-acc {
  background: var(--acc-soft);
  color: var(--acc);
}
.dc-icon-btn.dc-icon-acc:hover { background: var(--acc); color: #fff; }
.dc-icon-btn.dc-icon-mini { width: 26px; height: 26px; font-size: 11px; }

/* Search */
.dc-search {
  margin: 0 14px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  transition: all var(--d-1);
  flex-shrink: 0;
}
.dc-search:focus-within {
  border-color: var(--line-acc);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px rgba(74,118,74,.08);
}
.dc-search i { color: var(--fg-3); font-size: 12.5px; }
.dc-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 13px;
  color: var(--fg);
  font-family: inherit;
}

/* Section header within list (Recent / All) */
.dc-section-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-4);
}

/* Recent chats strip */
.dc-recent { flex-shrink: 0; }
.dc-recent-strip {
  display: flex;
  gap: 10px;
  padding: 0 14px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.dc-recent-strip::-webkit-scrollbar { height: 4px; }
.dc-recent-strip::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.dc-recent-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 58px;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  font-family: inherit;
}
.dc-recent-ava {
  position: relative;
  width: 52px; height: 52px;
  overflow: visible;
}
.dc-recent-ava > * {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  /* overflow:hidden ZÁMERNE ODSTRÁNENÉ aby dot nebol orezaný */
  border: 3px solid var(--bg-1);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
  position: relative;
}
.dc-recent-ava img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* Klonovaný .tm-item-dot v strip — správna farba + správna pozícia (vpravo dole) */
.dc-recent-ava .tm-item-dot {
  position: absolute !important;
  bottom: 0px !important;
  right: 0px !important;
  width: 14px !important;
  height: 14px !important;
  border: 2.5px solid var(--bg-1) !important;
  border-radius: 50% !important;
  z-index: 3;
}
.dc-recent-ava .tm-item-dot.is-online { background: #22c55e !important; }
.dc-recent-ava .tm-item-dot.is-offline { background: var(--fg-5, #c4c8c0) !important; }
:root[data-theme="dark"] .dc-recent-ava .tm-item-dot.is-offline,
[data-theme="dark"] .dc-recent-ava .tm-item-dot.is-offline { background: #4a4f48 !important; }
.dc-recent-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
  text-align: center;
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-recent-item:hover .dc-recent-ava > * { transform: scale(1.05); transition: transform var(--d-1); }

/* Items list */
.dc-items {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 12px;
}
.dc-items::-webkit-scrollbar { width: 5px; }
.dc-items::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* Force JS-rendered items (tm-* z inbox-v3.js) na DreamsChat layout */
.dc-items > div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: 14px;
  margin: 0 0 4px;
  cursor: pointer;
  transition: background var(--d-1);
  position: relative;
}
.dc-items > div:hover { background: var(--bg-2); }
.dc-items > div.is-active,
.dc-items > div.active {
  background: var(--acc-soft);
}
/* Avatar v list rowe */
.dc-items > div [class*="-ava"]:first-of-type,
.dc-items > div .tm-thread-ava,
.dc-items > div .tm-ava {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Space Grotesk', Inter, sans-serif;
}

.dc-list-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 18px;
  color: var(--fg-3);
}
.dc-list-loading i { color: var(--acc); font-size: 18px; }

/* ═══ 3) MAIN CHAT AREA ══════════════════════════════════════ */
.dc-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-0);
  overflow: hidden;
  position: relative;
}

/* Empty state */
.dc-empty {
  margin: auto;
  text-align: center;
  padding: 40px 24px;
  max-width: 380px;
}
.dc-empty-ico {
  width: 82px; height: 82px;
  margin: 0 auto 18px;
  border-radius: 24px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.dc-empty-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
}
.dc-empty-sub {
  font-size: 13.5px;
  color: var(--fg-3);
  line-height: 1.55;
  margin-bottom: 20px;
}
.dc-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(74,118,74,.30);
}
.dc-empty-cta:hover { filter: brightness(1.08); }

/* Active conversation */
.dc-conv {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.dc-conv[style*="display: none"],
.dc-conv[style*="display:none"] { display: none !important; }

/* Conversation header */
.dc-conv-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  flex-shrink: 0;
  min-height: 70px;
}
.dc-conv-ava-wrap { position: relative; flex-shrink: 0; }
.dc-conv-ava {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  overflow: hidden;
}
.dc-conv-ava img { width: 100%; height: 100%; object-fit: cover; }
.dc-conv-info { flex: 1; min-width: 0; }
.dc-conv-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-conv-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 2px;
}
.dc-conv-status .tm-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}
.dc-conv-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.dc-conv-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--acc);
  border: 0;
  border-radius: 99px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 4px;
  transition: filter var(--d-1);
}
.dc-conv-close:hover { filter: brightness(1.08); }

/* Header 3-dot menu */
.dc-menu-wrap { position: relative; }
.dc-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 300;
  min-width: 250px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 7px;
  box-shadow: 0 12px 36px rgba(0,0,0,.30);
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: dcMenuIn .12s ease-out;
}
@keyframes dcMenuIn { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
.dc-menu button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.dc-menu button:hover { background: var(--bg-2); }
.dc-menu button i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-3);
}
.dc-menu button:hover i { color: var(--acc); }
.dc-menu-sep { height: 1px; background: var(--line-soft); margin: 4px 8px; }
.dc-menu-danger { color: var(--err) !important; }
.dc-menu-danger i { color: var(--err) !important; }
.dc-menu-danger:hover { background: rgba(248,113,113,.08) !important; }

/* Messages area — patterned background */
.dc-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 16px;
  background-color: var(--bg-0);
  background-image: radial-gradient(circle, rgba(74,118,74,.07) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
[data-theme="dark"] .dc-msgs {
  background-image: radial-gradient(circle, rgba(255,255,255,.04) 1.5px, transparent 1.5px);
}
.dc-msgs::-webkit-scrollbar { width: 6px; }
.dc-msgs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* Compose footer */
.dc-compose {
  background: var(--bg-1);
  border-top: 1px solid var(--line);
  padding: 12px 20px 14px;
  flex-shrink: 0;
}
.dc-compose-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.dc-compose-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--fg-3);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-1);
}
.dc-compose-tab:hover { background: var(--bg-2); color: var(--fg); }
.dc-compose-tab.is-active {
  background: var(--acc-soft);
  color: var(--acc);
}
.dc-compose-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-4);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dc-compose-hint kbd {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}

.dc-input-row { padding: 8px 0 4px; }
.dc-input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 14.5px;
  color: var(--fg);
  font-family: inherit;
  resize: none;
  min-height: 36px;
  max-height: 160px;
  line-height: 1.55;
  padding: 0;
}
.dc-input::placeholder { color: var(--fg-4); }

.dc-input-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  gap: 6px;
}
.dc-input-actions-left { display: inline-flex; gap: 2px; }
.dc-icon-btn.dc-icon-mic.is-rec { background: rgba(248,113,113,.16); color: var(--err); animation: dcMicPulse 1.4s ease-in-out infinite; }
@keyframes dcMicPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.dc-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  border: 0;
  border-radius: 11px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(74,118,74,.30);
  transition: all var(--d-1);
}
.dc-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dc-send:active { transform: translateY(0); }

/* New conversation modal — small polish */
.dc-new-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: var(--bg-2);
  padding: 4px;
  border-radius: 11px;
}
.dc-new-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--fg-3);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.dc-new-tab:hover { color: var(--fg); }
.dc-new-tab.is-active {
  background: var(--bg-1);
  color: var(--acc);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* Mobile FAB */
.dc-mob-fab {
  display: none;
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  border: 0;
  font-size: 17px;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(74,118,74,.40);
}
@media (max-width: 980px) { .dc-mob-fab { display: inline-flex; align-items: center; justify-content: center; } }

/* Mob back button — visible len na mobile v conv view */
.dc-mob-back { display: none; }
@media (max-width: 980px) { .dc-mob-back { display: inline-flex; } }

/* ═══════════════════════════════════════════════════════════════════════
   INBOX — FIXES po DreamsChat reworku (visible bugs z user screenshotu)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) Emoji pop — HIDDEN by default, otvorí sa cez .is-open class */
.tm-emoji-pop,
.dc-emoji-pop,
#tmEmojiPop {
  display: none !important;
  position: absolute;
  bottom: 100%;
  left: 18px;
  margin-bottom: 8px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
  z-index: 200;
  width: 320px;
  max-height: 280px;
  overflow-y: auto;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.tm-emoji-pop.is-open,
#tmEmojiPop.is-open {
  display: grid !important;
}
.tm-emoji-pop button,
#tmEmojiPop button {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: background var(--d-1), transform var(--d-1);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tm-emoji-pop button:hover,
#tmEmojiPop button:hover {
  background: var(--acc-soft);
  transform: scale(1.2);
}

/* 2) File / audio attachment cards — proper layout (predtým monolitický olive blok) */
.tm-bubble .tm-att-file {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px !important;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  text-decoration: none !important;
  color: var(--fg) !important;
  margin: 4px 0;
  min-width: 220px;
  max-width: 340px;
  transition: all var(--d-1);
}
.tm-bubble .tm-att-file:hover {
  border-color: var(--line-acc);
  background: var(--bg-2);
}
.tm-bubble-row.is-mine .tm-att-file {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
}
.tm-bubble-row.is-mine .tm-att-file:hover { background: rgba(255,255,255,.26) !important; }

.tm-bubble .tm-att-file > i:first-child {
  width: 38px; height: 38px;
  background: var(--acc-soft);
  color: var(--acc);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.tm-bubble-row.is-mine .tm-att-file > i:first-child {
  background: rgba(255,255,255,.22);
  color: #fff;
}
/* Special icon for audio (.webm, .mp3, .wav, .ogg, .m4a) — JS samo nevie, takže to len padá pod fa-file.
   Tento override sa pokúsi spárovať podľa textu — jednoduchá hack metóda nahradi cez ::before glyph */
.tm-att-file[href$=".webm"] > i:first-child::before,
.tm-att-file[href$=".mp3"]  > i:first-child::before,
.tm-att-file[href$=".wav"]  > i:first-child::before,
.tm-att-file[href$=".ogg"]  > i:first-child::before,
.tm-att-file[href$=".m4a"]  > i:first-child::before {
  content: '\f04b'; /* fa-play */
}

.tm-att-file-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.tm-att-file-size {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}

/* 3) Conversation header avatar — proper circle s online dot */
.dc-conv-ava {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  position: relative;
  overflow: visible !important;
}
.dc-conv-ava img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.dc-conv-ava::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 12px; height: 12px;
  background: var(--fg-5, #c4c8c0); /* default: offline sivý */
  border: 2.5px solid var(--bg-1);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
  transition: background var(--d-1);
}
.dc-conv-ava.is-online::after { background: #22c55e; }
.dc-conv-ava.is-offline::after { background: var(--fg-5, #c4c8c0); }
:root[data-theme="dark"] .dc-conv-ava.is-offline::after,
[data-theme="dark"] .dc-conv-ava.is-offline::after { background: #4a4f48; }

/* ═══════════════════════════════════════════════════════════════════════
   INBOX — subtle ring pattern background + minimalistic message styling
   (DreamsChat-style)
   ═══════════════════════════════════════════════════════════════════════ */
.dc-msgs,
#tmMsgs {
  background-color: var(--bg-2, #f4f6f2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><circle cx='32' cy='32' r='12' fill='none' stroke='rgba(74,118,74,0.08)' stroke-width='1'/></svg>");
  background-repeat: repeat;
  background-size: 64px 64px;
}
:root[data-theme="dark"] .dc-msgs,
[data-theme="dark"] .dc-msgs,
:root[data-theme="dark"] #tmMsgs,
[data-theme="dark"] #tmMsgs {
  background-color: var(--bg-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><circle cx='32' cy='32' r='12' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/></svg>");
}

/* ── Date separator — DreamsChat-style dark pill ── */
.tm-date-sep {
  text-align: center;
  margin: 22px 0 14px;
  position: relative;
}
.tm-date-sep::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 12%; right: 12%;
  height: 1px;
  background: rgba(0,0,0,.06);
  z-index: 0;
}
:root[data-theme="dark"] .tm-date-sep::before,
[data-theme="dark"] .tm-date-sep::before { background: rgba(255,255,255,.06); }
.tm-date-sep span {
  position: relative;
  z-index: 1;
  background: #1f2421;
  color: #fff;
  font: 600 11px/1 'Space Grotesk', Inter, sans-serif;
  padding: 6px 14px;
  border-radius: 99px;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ── Bubbles — minimalistic ako DreamsChat ── */
.tm-bubble {
  background: var(--bg-1) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  border-radius: 16px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.tm-bubble-row:not(.is-mine) .tm-bubble {
  border-bottom-left-radius: 6px !important;
}
.tm-bubble-row.is-mine .tm-bubble {
  background: linear-gradient(135deg, var(--acc), #3a5e3a) !important;
  color: #fff !important;
  border-color: transparent !important;
  border-bottom-right-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(74,118,74,.25);
}
.tm-bubble-row.is-mine .tm-bubble-time { color: rgba(255,255,255,.88) !important; }

/* Avatar pri bublinách trochu väčší + spacer */
.tm-bubble-ava {
  width: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
}
.tm-bubble-ava-spacer { width: 34px !important; }

/* Sender meno nad bublinou (skupiny) */
.tm-bubble-sender {
  font: 700 12px 'Space Grotesk', Inter, sans-serif !important;
  color: var(--acc) !important;
  margin: 0 0 4px 14px !important;
}

/* Time pod bublinou — jemne */
.tm-bubble-time {
  font: 10px 'JetBrains Mono', monospace !important;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════
   INBOX — SLIM COMPOSER (single-row, DreamsChat-style)
   ═══════════════════════════════════════════════════════════════════════ */
.dc-compose--slim {
  padding: 12px 18px 14px !important;
  background: var(--bg-1);
  border-top: 1px solid var(--line-soft);
}
.dc-compose--slim .dc-compose-tabs,
.dc-compose--slim .dc-input-row,
.dc-compose--slim .dc-input-actions,
.dc-compose--slim .dc-compose-hint { display: none !important; }

/* Hlavná pill lišta */
.dc-compose-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  transition: border-color var(--d-1), box-shadow var(--d-1);
}
.dc-compose-bar:focus-within {
  border-color: var(--line-acc);
  box-shadow: 0 0 0 4px rgba(74,118,74,.10);
}

/* Textarea — žiadne border, transparent, grow */
.dc-compose-bar .dc-input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 9px 6px !important;
  margin: 0 !important;
  font: 14px Inter, sans-serif !important;
  line-height: 1.4 !important;
  color: var(--fg);
  resize: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  max-height: 120px;
  overflow-y: auto;
}
.dc-compose-bar .dc-input::placeholder { color: var(--fg-4); }

/* Ikonové buttony v lište */
.dc-compose-bar .dc-icon-btn {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 14.5px;
  transition: background var(--d-1), color var(--d-1);
  flex-shrink: 0;
}
.dc-compose-bar .dc-icon-btn:hover {
  background: var(--bg-3, rgba(0,0,0,.05));
  color: var(--fg);
}
.dc-compose-bar .dc-icon-mic.is-recording {
  background: rgba(248,113,113,.18) !important;
  color: var(--err) !important;
}
/* Mic v slim composer — vždy viditeľný + ľahko vyniká (olive subtle) */
.dc-compose-bar .dc-icon-mic {
  display: inline-flex !important;
  background: var(--acc-soft);
  color: var(--acc);
}
.dc-compose-bar .dc-icon-mic:hover {
  background: rgba(74,118,74,.24);
  color: var(--acc);
}
.dc-compose-bar .dc-icon-mic.is-recording {
  animation: dcMicPulse 1.4s ease-in-out infinite;
}

/* Send button — len ikona, olive kruh */
.dc-send--icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: linear-gradient(135deg, var(--acc), #3a5e3a) !important;
  color: #fff !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  margin-left: 4px;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(74,118,74,.30);
  transition: transform var(--d-1), filter var(--d-1);
}
.dc-send--icon:hover { transform: translateY(-1px); filter: brightness(1.08); }
.dc-send--icon span { display: none !important; }

/* Attachments strip nad barom */
.dc-compose--slim .dc-att-strip {
  margin: 0 0 8px;
}

/* Mobile — ešte kompaktnejšie */
@media (max-width: 600px) {
  .dc-compose--slim { padding: 10px 12px 12px !important; }
  .dc-compose-bar { padding: 4px 6px 4px 12px; }
  .dc-compose-bar .dc-icon-btn { width: 32px; height: 32px; font-size: 13.5px; }
  .dc-send--icon { width: 36px !important; height: 36px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   INBOX — CONTACT INFO PANEL (DreamsChat-style)
   POZN: dc-shell má position:absolute; inset:0 — NEMODIFIKOVAŤ.
   dc-main potrebuje position:relative aby aside vnútri správne sedel.
   ═══════════════════════════════════════════════════════════════════════ */
.dc-main { position: relative; }

.dc-info {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 360px;
  background: var(--bg-1);
  border-left: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  z-index: 10;
  box-shadow: -8px 0 24px rgba(0,0,0,.04);
  animation: dcInfoSlide var(--d-2) ease-out;
}
.dc-info[hidden] { display: none; }
@keyframes dcInfoSlide {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.dc-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.dc-info-title {
  font: 700 16px 'Space Grotesk', Inter, sans-serif;
  color: var(--fg);
}

.dc-info-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

/* Profile header */
.dc-info-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px;
}
.dc-info-ava {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 700 32px 'Space Grotesk', Inter, sans-serif;
  position: relative;
  margin-bottom: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.dc-info-ava img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.dc-info-name {
  font: 700 18px 'Space Grotesk', Inter, sans-serif;
  color: var(--fg);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.dc-info-status {
  font-size: 12.5px;
  color: var(--fg-3);
}

/* Quick actions */
.dc-info-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}
.dc-info-qbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 12px;
  background: var(--acc-soft);
  border: 0;
  color: var(--acc);
  cursor: pointer;
  font: 600 11px Inter, sans-serif;
  transition: background var(--d-1), transform var(--d-1);
}
.dc-info-qbtn:hover { background: rgba(74,118,74,.24); transform: translateY(-1px); }
.dc-info-qbtn i { font-size: 16px; }

/* Sections */
.dc-info-section { margin-bottom: 22px; }
.dc-info-section-title {
  font: 700 12.5px 'Space Grotesk', Inter, sans-serif;
  color: var(--fg);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.dc-info-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
}
.dc-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  gap: 12px;
}
.dc-info-row:last-child { border-bottom: 0; }
.dc-info-row-label { font: 700 11.5px 'Space Grotesk', sans-serif; color: var(--fg); margin-bottom: 2px; }
.dc-info-row-val   { font-size: 12.5px; color: var(--fg-3); word-break: break-word; }
.dc-info-row > i:last-child { color: var(--fg-4); font-size: 13px; flex-shrink: 0; }

/* Media tabs */
.dc-info-media-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  background: var(--bg-2);
  padding: 4px;
  border-radius: 12px;
}
.dc-info-mtab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 4px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  color: var(--fg-3);
  cursor: pointer;
  font: 600 11px Inter, sans-serif;
  transition: all var(--d-1);
}
.dc-info-mtab i { font-size: 12px; }
.dc-info-mtab span:nth-of-type(1) { display: none; }
.dc-info-mtab.is-active {
  background: var(--bg-1);
  color: var(--acc);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.dc-info-mtab-n {
  background: var(--acc-soft);
  color: var(--acc);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}
.dc-info-mtab.is-active .dc-info-mtab-n { background: var(--acc); color: #fff; }

.dc-info-media-grid {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 8px;
  min-height: 80px;
}
.dc-info-media-grid.is-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.dc-info-media-grid.is-list {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.dc-info-media-empty {
  padding: 24px;
  text-align: center;
  color: var(--fg-4);
  font-size: 12.5px;
}
.dc-info-media-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg-2);
  display: block;
}
.dc-info-media-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dc-info-media-tile.is-broken {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-4);
  font-size: 18px;
}
.dc-info-media-tile.is-broken img { display: none; }
.dc-info-media-tile.is-broken::after {
  content: '\f127';  /* fa-image-broken style: link-slash */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}
.dc-info-media-video {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--acc);
  font-size: 18px;
  flex-direction: column;
  gap: 4px;
}
.dc-info-media-video span { font-size: 9px; color: var(--fg-3); text-align: center; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dc-info-media-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--fg);
}
.dc-info-media-row:last-child { border-bottom: 0; }
.dc-info-media-row:hover { background: var(--bg-2); }
.dc-info-media-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.dc-info-media-meta { flex: 1; min-width: 0; }
.dc-info-media-name { font: 600 13px Inter, sans-serif; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-info-media-sub  { font-size: 11px; color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-info-media-row > i:last-child { color: var(--fg-4); font-size: 12px; flex-shrink: 0; }

/* Others */
.dc-info-others { padding: 0; }
.dc-info-other-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  color: var(--fg);
  font: 500 13px Inter, sans-serif;
  text-align: left;
}
.dc-info-other-row:last-child { border-bottom: 0; }
.dc-info-other-row:hover { background: var(--bg-2); }
.dc-info-other-row > i:first-child { width: 18px; font-size: 14px; flex-shrink: 0; text-align: center; }
.dc-info-other-row > span { flex: 1; }
.dc-info-chev { color: var(--fg-4); font-size: 11px; flex-shrink: 0; }
.dc-info-other-danger { color: var(--err); }
.dc-info-other-danger:hover { background: rgba(248,113,113,.06); }

/* ═══════════════════════════════════════════════════════════════════════
   REPLY BAR (nad composerom)
   ═══════════════════════════════════════════════════════════════════════ */
.dc-reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  animation: dcReplySlide var(--d-2);
}
.dc-reply-bar[hidden] { display: none; }
@keyframes dcReplySlide { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.dc-reply-bar-ico {
  width: 32px; height: 32px;
  background: var(--acc-soft);
  color: var(--acc);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dc-reply-bar-body { flex: 1; min-width: 0; border-left: 3px solid var(--acc); padding-left: 10px; }
.dc-reply-bar-to   { font: 700 11.5px 'Space Grotesk', sans-serif; color: var(--acc); }
.dc-reply-bar-text { font-size: 12.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════════════
   MESSAGE CONTEXT MENU + REACTIONS PICKER + HOVER BUTTON
   ═══════════════════════════════════════════════════════════════════════ */
.tm-bubble-wrap { position: relative; }
.tm-bubble-act {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  color: var(--fg-3);
  cursor: pointer;
  font-size: 11px;
  opacity: 0;
  transition: opacity var(--d-1), background var(--d-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tm-bubble-row:not(.is-mine) .tm-bubble-act { right: -32px; }
.tm-bubble-row.is-mine .tm-bubble-act { left: -32px; }
.tm-bubble-row:hover .tm-bubble-act { opacity: 1; }
.tm-bubble-act:hover { background: var(--bg-2); color: var(--fg); }

.dc-msg-menu {
  position: fixed;
  z-index: 200;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  padding: 6px;
  min-width: 200px;
  animation: dcMenuPop var(--d-1) ease-out;
}
.dc-msg-menu[hidden] { display: none; }
@keyframes dcMenuPop { from { transform: translateY(-4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.dc-msg-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  font: 500 13px Inter, sans-serif;
  text-align: left;
}
.dc-msg-menu button:hover { background: var(--bg-2); }
.dc-msg-menu button i { width: 16px; font-size: 12.5px; color: var(--fg-3); }
.dc-msg-menu .dc-menu-sep { height: 1px; background: var(--line-soft); margin: 4px 6px; }
.dc-msg-menu .dc-menu-danger { color: var(--err); }
.dc-msg-menu .dc-menu-danger i { color: var(--err); }

.dc-react-pop {
  position: fixed;
  z-index: 210;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  padding: 6px 8px;
  display: flex;
  gap: 2px;
  animation: dcMenuPop var(--d-1);
}
.dc-react-pop[hidden] { display: none; }
.dc-react-pop button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  width: 38px; height: 38px;
  border-radius: 50%;
  transition: transform var(--d-1), background var(--d-1);
  padding: 0;
}
.dc-react-pop button:hover { transform: scale(1.25); background: var(--bg-2); }
.dc-react-pop button.is-active {
  background: var(--acc-soft);
  outline: 2px solid var(--acc);
}

/* Reaction chip — sibling bubliny, NIE child (aby nerozťahoval bublinu) */
.dc-react-strip {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 2px;
}
/* Zarovnanie strip-u k strane bubliny */
.tm-bubble-row:not(.is-mine) .dc-react-strip { margin-left: 12px; }
.tm-bubble-row.is-mine .dc-react-strip { justify-content: flex-end; margin-right: 12px; }

.dc-react-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--d-1), background var(--d-1), border-color var(--d-1);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dc-react-chip:hover { transform: scale(1.08); }
.dc-react-chip.is-mine {
  background: var(--acc-soft);
  border-color: var(--line-acc);
}

/* Mobile — info panel ako fullscreen overlay */
@media (max-width: 900px) {
  .dc-info { width: 100%; left: 0; right: 0; }
  .dc-shell.info-open .dc-main { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WEBY — v4 KPI strip + AI insights + Heatmap viewer (DreamsChat-style olive)
   ═══════════════════════════════════════════════════════════════════════ */

/* v4 KPI strip — live + 5 KPI cards */
.wb-v4-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 1100px) {
  .wb-v4-strip { grid-template-columns: 1fr 1fr 1fr; }
}
.wb-v4-live {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #4a764a, #3a5e3a);
  border-radius: 14px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(74,118,74,.28);
}
.wb-v4-live::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><circle cx='20' cy='20' r='8' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/></svg>");
  background-repeat: repeat;
  pointer-events: none;
}
.wb-v4-live-dot {
  width: 14px; height: 14px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(34,197,94,.25);
  animation: wbV4Pulse 2s ease-in-out infinite;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
@keyframes wbV4Pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
  50%      { box-shadow: 0 0 0 10px rgba(34,197,94,.1); }
}
.wb-v4-live-meta { position: relative; z-index: 1; }
.wb-v4-live-num  { font: 800 28px/1 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
.wb-v4-live-lbl  { font-size: 11.5px; opacity: .85; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }

.wb-v4-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  transition: transform var(--d-1), box-shadow var(--d-1);
}
.wb-v4-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.wb-v4-kpi > i {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.wb-v4-kpi-num {
  font: 700 22px/1.1 'Space Grotesk', sans-serif;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.wb-v4-kpi-lbl {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wb-v4-kpi-delta {
  font: 700 10.5px 'JetBrains Mono', monospace;
  padding: 1px 6px;
  border-radius: 99px;
}
.wb-v4-kpi-delta.is-up   { background: rgba(34,197,94,.14); color: #16a34a; }
.wb-v4-kpi-delta.is-down { background: rgba(239,68,68,.14); color: #dc2626; }

/* AI Insights — auto-generované */
.wb-v4-insights {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.wb-v4-insights-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 14px 'Space Grotesk', sans-serif;
  margin-bottom: 14px;
  color: var(--fg);
}
.wb-v4-insights-h i { font-size: 16px; }
.wb-v4-insights-refresh {
  margin-left: auto;
  width: 30px; height: 30px;
  border: 0;
  background: var(--bg-2);
  color: var(--fg-3);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--d-1), transform var(--d-1);
}
.wb-v4-insights-refresh:hover { background: var(--acc-soft); color: var(--acc); transform: rotate(180deg); }
.wb-v4-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.wb-v4-insight {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-2);
  border-left: 3px solid var(--clr, var(--acc));
  transition: transform var(--d-1);
}
.wb-v4-insight:hover { transform: translateX(2px); }
.wb-v4-insight-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--bg-1);
  color: var(--clr, var(--acc));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.wb-v4-insight-t { font: 700 12.5px 'Space Grotesk', sans-serif; color: var(--fg); margin-bottom: 3px; }
.wb-v4-insight-x { font-size: 12px; color: var(--fg-3); line-height: 1.4; }

/* ═══ HEATMAP viewer ═══ */
.wb-hm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  margin-bottom: 14px;
}
.wb-hm-bar-left,
.wb-hm-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wb-hm-lbl { font: 700 11.5px 'Space Grotesk', sans-serif; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.04em; }
.wb-hm-dev,
.wb-hm-bar-right { display: inline-flex; gap: 4px; background: var(--bg-2); padding: 4px; border-radius: 10px; }
.wb-hm-dev-btn,
.wb-hm-mode-btn {
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: 600 11.5px Inter, sans-serif;
  color: var(--fg-3);
  cursor: pointer;
  transition: all var(--d-1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wb-hm-dev-btn:hover,
.wb-hm-mode-btn:hover { background: var(--bg-1); color: var(--fg); }
.wb-hm-dev-btn.is-active,
.wb-hm-mode-btn.is-active {
  background: var(--bg-1);
  color: var(--acc);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.wb-hm-stage {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 500px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.wb-hm-iframe {
  width: 100%; height: 100%;
  border: 0;
  display: none;
  background: #fff;
}
.wb-hm-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.wb-hm-empty {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 40px;
}
.wb-hm-empty h3 { font: 700 18px 'Space Grotesk', sans-serif; color: var(--fg); }
.wb-hm-empty p  { font-size: 13.5px; color: var(--fg-3); max-width: 480px; line-height: 1.55; }
.wb-hm-empty code { background: var(--bg-1); padding: 2px 8px; border-radius: 6px; font-size: 11.5px; }

.wb-hm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 700px) {
  .wb-hm-stats { grid-template-columns: repeat(2, 1fr); }
}
.wb-hm-stat {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.wb-hm-stat-n { font: 700 22px/1 'Space Grotesk', sans-serif; color: #f97316; }
.wb-hm-stat-l { font-size: 11px; color: var(--fg-3); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.03em; }

/* ═══ BEHAVIOR tab — Clarity-like ═══ */
.wb-bh-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .wb-bh-strip { grid-template-columns: repeat(2, 1fr); } }
.wb-bh-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  transition: transform var(--d-1);
}
.wb-bh-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.wb-bh-card > i {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--bg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.wb-bh-num { font: 700 22px 'Space Grotesk', sans-serif; color: var(--fg); }
.wb-bh-lbl { font-size: 11.5px; color: var(--fg-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.03em; }

.wb-bh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 900px) { .wb-bh-grid { grid-template-columns: 1fr; } }
.wb-bh-issue {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}
.wb-bh-issue-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.wb-bh-issue-t { font: 700 13px 'Space Grotesk', sans-serif; color: var(--fg); margin-bottom: 4px; }
.wb-bh-issue-n { font: 800 22px 'Space Grotesk', sans-serif; color: var(--fg); margin-bottom: 4px; line-height: 1; }
.wb-bh-issue-x { font-size: 12px; color: var(--fg-3); line-height: 1.45; }

.wb-bh-sources {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 20px;
}
.wb-bh-sources-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.wb-src-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wb-src-ico {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.wb-src-meta { flex: 1; min-width: 0; }
.wb-src-name { font: 600 12.5px Inter, sans-serif; color: var(--fg); margin-bottom: 4px; }
.wb-src-bar {
  height: 6px;
  background: var(--bg-2);
  border-radius: 99px;
  overflow: hidden;
}
.wb-src-fill { height: 100%; border-radius: 99px; transition: width .6s ease-out; }
.wb-src-num { font: 700 13px 'JetBrains Mono', monospace; color: var(--fg); flex-shrink: 0; min-width: 90px; text-align: right; }

/* ═══ FUNNEL tab ═══ */
.wb-fn-head { margin-bottom: 22px; }
.wb-fn-h    { font: 700 22px 'Space Grotesk', sans-serif; color: var(--fg); margin: 0 0 6px; letter-spacing: -0.01em; }
.wb-fn-sub  { font-size: 13px; color: var(--fg-3); margin: 0; }

.wb-fn-stages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
}
.wb-fn-stage {}
.wb-fn-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.wb-fn-stage-i {
  width: 24px; height: 24px;
  background: var(--acc-soft);
  color: var(--acc);
  border-radius: 50%;
  font: 700 12px 'Space Grotesk', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wb-fn-stage-name { font: 600 13.5px Inter, sans-serif; color: var(--fg); flex: 1; }
.wb-fn-stage-n    { font: 700 16px 'Space Grotesk', sans-serif; color: var(--fg); }
.wb-fn-stage-rate {
  font: 700 10.5px 'JetBrains Mono', monospace;
  padding: 2px 8px;
  border-radius: 99px;
}
.wb-fn-stage-rate.is-ok   { background: rgba(34,197,94,.14); color: #16a34a; }
.wb-fn-stage-rate.is-warn { background: rgba(245,158,11,.14); color: #d97706; }
.wb-fn-stage-rate.is-bad  { background: rgba(239,68,68,.14); color: #dc2626; }
.wb-fn-stage-bar {
  height: 14px;
  background: var(--bg-2);
  border-radius: 99px;
  overflow: hidden;
}
.wb-fn-stage-fill { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.5,1.4,.5,1); }

.wb-fn-empty {
  text-align: center;
  padding: 60px 30px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
}
.wb-fn-empty h3 { font: 700 18px 'Space Grotesk', sans-serif; color: var(--fg); margin: 14px 0 8px; }
.wb-fn-empty p  { font-size: 13.5px; color: var(--fg-3); max-width: 460px; margin: 0 auto; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════
   WDX — v5 kompletný redesign detailu webu
   ═══════════════════════════════════════════════════════════════════════ */
/* Override: detail view má vlastný interný sidebar (wdx-side) */
#webDetailView.wb-view {
  grid-template-columns: 1fr !important;
  overflow: hidden !important;
}
.wdx-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg-0);
  overflow: hidden;
}

/* Top bar */
.wdx-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 30;
}
.wdx-back {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 0;
  color: var(--fg);
  cursor: pointer;
  font-size: 14px;
  transition: background var(--d-1);
}
.wdx-back:hover { background: var(--acc-soft); color: var(--acc); }

.wdx-site {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.wdx-site-fav {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.wdx-site-meta { min-width: 0; }
.wdx-site-name { font: 700 17px/1.2 'Space Grotesk', sans-serif; color: var(--fg); margin: 0 0 2px; letter-spacing: -0.01em; }
.wdx-site-url  { font-size: 12.5px; color: var(--fg-3); text-decoration: none; }
.wdx-site-url:hover { color: var(--acc); text-decoration: underline; }

.wdx-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(34,197,94,.10);
  color: #16a34a;
  border-radius: 99px;
  font: 700 12px 'JetBrains Mono', monospace;
  margin-left: 10px;
}
.wdx-live-pulse {
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(34,197,94,.20);
  animation: wdxPulse 2s ease-in-out infinite;
}
@keyframes wdxPulse { 50% { box-shadow: 0 0 0 8px rgba(34,197,94,.05); }}
.wdx-live-n   { font: 800 13px 'Space Grotesk', sans-serif; }
.wdx-live-lbl { font-size: 11px; font-weight: 500; opacity: .7; }

.wdx-plugin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-2);
  color: var(--fg-3);
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
}
.wdx-plugin.is-on { background: var(--acc-soft); color: var(--acc); }

.wdx-spacer { flex: 1; }

.wdx-range {
  display: inline-flex;
  background: var(--bg-2);
  padding: 4px;
  border-radius: 10px;
  gap: 2px;
}
.wdx-range button {
  padding: 7px 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: 600 12.5px Inter, sans-serif;
  color: var(--fg-3);
  cursor: pointer;
  transition: all var(--d-1);
}
.wdx-range button:hover { color: var(--fg); }
.wdx-range button.is-active {
  background: var(--bg-1);
  color: var(--acc);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.wdx-sync {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bg-2);
  border: 0;
  color: var(--fg);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--d-1);
}
.wdx-sync:hover { background: var(--acc-soft); color: var(--acc); transform: rotate(180deg); }

/* ═══ Body — sidebar tabs + main content (Gmail-style) ═══ */
.wdx-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
}
@media (max-width: 900px) {
  .wdx-body { grid-template-columns: 64px 1fr; }
  .wdx-side .wdx-tab span,
  .wdx-side-label,
  .wdx-side-foot { display: none; }
  .wdx-side .wdx-tab { justify-content: center; padding: 12px; }
}

.wdx-side {
  background: var(--bg-1);
  border-right: 1px solid var(--line-soft);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wdx-side-label {
  font: 700 10.5px 'Space Grotesk', sans-serif;
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 8px 4px;
}

/* Tab navigation — vertical sidebar */
.wdx-tabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wdx-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font: 600 13px 'Space Grotesk', sans-serif;
  color: var(--fg-2);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all var(--d-1);
}
.wdx-tab > i {
  width: 18px;
  font-size: 14px;
  text-align: center;
  color: var(--fg-3);
}
.wdx-tab:hover { background: var(--bg-2); color: var(--fg); }
.wdx-tab.is-active {
  background: var(--acc-soft);
  color: var(--acc);
  font-weight: 700;
}
.wdx-tab.is-active > i { color: var(--acc); }

.wdx-side-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.wdx-side-plugin {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 9px;
  font-size: 11.5px;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.wdx-side-plugin.is-on { background: var(--acc-soft); color: var(--acc); }
.wdx-side-plugin > i { font-size: 14px; flex-shrink: 0; }
.wdx-side-sync {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font: 700 12.5px 'Space Grotesk', sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(74,118,74,.30);
  transition: all var(--d-1);
}
.wdx-side-sync:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* Main content area (right of sidebar) */
.wdx-main {
  min-width: 0;
  overflow-y: auto;
  background: var(--bg-0);
}
.wdx-cnt-wrap { padding: 22px; max-width: 1600px; margin: 0 auto; width: 100%; }
.wdx-pnl { display: none; }
.wdx-pnl.is-active { display: block; }

/* Big KPI strip with sparklines */
.wdx-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 1000px) { .wdx-kpis { grid-template-columns: repeat(2, 1fr); }}
.wdx-kpi {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: transform var(--d-1), box-shadow var(--d-1);
}
.wdx-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.wdx-kpi-h { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 12px; margin-bottom: 8px; }
.wdx-kpi-h i { color: var(--acc); }
.wdx-kpi-lbl { font: 600 12px 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }
.wdx-kpi-n { font: 800 28px/1 'Space Grotesk', sans-serif; color: var(--fg); margin-bottom: 6px; letter-spacing: -0.02em; }
.wdx-kpi-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--fg-3); }
.wdx-kpi-delta { font: 700 10.5px 'JetBrains Mono', monospace; padding: 1px 6px; border-radius: 99px; }
.wdx-kpi-delta.is-up   { background: rgba(34,197,94,.14); color: #16a34a; }
.wdx-kpi-delta.is-down { background: rgba(239,68,68,.14); color: #dc2626; }
.wdx-spark { height: 36px !important; margin-top: 8px; }

/* Mini KPI (Behavior tab) */
.wdx-kpi-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.wdx-kpi-mini > i { width: 38px; height: 38px; border-radius: 10px; background: var(--bg-2); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.wdx-mini-n { font: 700 20px 'Space Grotesk', sans-serif; color: var(--fg); }
.wdx-mini-l { font-size: 11px; color: var(--fg-3); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.03em; }

/* Rows */
.wdx-row { display: grid; gap: 14px; margin-bottom: 22px; }
.wdx-row-1     { grid-template-columns: 1fr; }
.wdx-row-2     { grid-template-columns: 1fr 1fr; }
.wdx-row-3     { grid-template-columns: 1fr 1fr 1fr; }
.wdx-row-2-1   { grid-template-columns: 2fr 1fr; }
@media (max-width: 1000px) {
  .wdx-row-2, .wdx-row-3, .wdx-row-2-1 { grid-template-columns: 1fr; }
}

/* Card */
.wdx-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 20px;
}
.wdx-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.wdx-card-h h3 {
  font: 700 14px 'Space Grotesk', sans-serif;
  color: var(--fg);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wdx-card-tabs { display: flex; gap: 4px; background: var(--bg-2); padding: 3px; border-radius: 8px; }
.wdx-chip { padding: 5px 10px; background: transparent; border: 0; border-radius: 6px; font: 600 11.5px Inter, sans-serif; color: var(--fg-3); cursor: pointer; }
.wdx-chip.is-active { background: var(--bg-1); color: var(--acc); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.wdx-icon-btn { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-2); border: 0; color: var(--fg-3); cursor: pointer; transition: all var(--d-1); }
.wdx-icon-btn:hover { background: var(--acc-soft); color: var(--acc); }

.wdx-chart-wrap { position: relative; height: 320px; }
.wdx-loading { text-align: center; padding: 40px; color: var(--fg-4); }
.wdx-empty-mini { padding: 24px; text-align: center; color: var(--fg-4); font-size: 12.5px; }

/* AI insights */
.wdx-insights { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.wdx-insight {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--bg-2);
  border-radius: 10px;
  border-left: 3px solid var(--clr, var(--acc));
}
.wdx-insight > i { width: 26px; height: 26px; border-radius: 7px; background: var(--bg-1); color: var(--clr, var(--acc)); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.wdx-insight-t { font: 700 12px 'Space Grotesk', sans-serif; color: var(--fg); margin-bottom: 2px; }
.wdx-insight-x { font-size: 11.5px; color: var(--fg-3); line-height: 1.4; }

/* Legend */
.wdx-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 12px; }
.wdx-leg { display: flex; align-items: center; gap: 8px; color: var(--fg-2); }
.wdx-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wdx-leg strong { color: var(--fg); margin-left: auto; }
.wdx-leg em { color: var(--fg-4); font-style: normal; font-size: 11px; }

/* Source list (reused) */
.wdx-src-list { display: flex; flex-direction: column; gap: 10px; }
.wdx-src-row { display: flex; align-items: center; gap: 10px; }
.wdx-src-ico { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.wdx-src-meta { flex: 1; min-width: 0; }
.wdx-src-name { font: 600 12px Inter, sans-serif; color: var(--fg); margin-bottom: 4px; }
.wdx-src-bar { height: 5px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.wdx-src-fill { height: 100%; border-radius: 99px; transition: width .6s; }

/* Pages list mini + full */
.wdx-pages-list { display: flex; flex-direction: column; gap: 8px; }
.wdx-page-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--bg-2); border-radius: 8px; }
.wdx-page-path { font: 500 12px monospace; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.wdx-page-n { font: 700 12.5px 'JetBrains Mono', monospace; color: var(--acc); margin-left: 10px; }

/* Pages table */
.wdx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wdx-table thead th { text-align: left; padding: 10px 12px; font: 700 11.5px 'Space Grotesk', sans-serif; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--line-soft); }
.wdx-table tbody td { padding: 12px; border-bottom: 1px solid var(--line-soft); }
.wdx-table tbody tr:hover { background: var(--bg-2); }

/* Geo */
.wdx-geo-list { display: flex; flex-direction: column; gap: 8px; }
.wdx-geo-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.wdx-geo-flag { font-size: 18px; width: 26px; text-align: center; }
.wdx-geo-cc { font: 700 12.5px 'JetBrains Mono', monospace; color: var(--fg); width: 32px; }
.wdx-geo-bar { flex: 1; height: 5px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.wdx-geo-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #1d4ed8); border-radius: 99px; }
.wdx-geo-n { font: 700 12px 'JetBrains Mono', monospace; color: var(--fg-3); min-width: 60px; text-align: right; }

/* Browsers */
.wdx-browsers-list { display: flex; flex-direction: column; gap: 8px; }
.wdx-bw-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.wdx-bw-row:last-child { border-bottom: 0; }
.wdx-bw-name { font-size: 13px; color: var(--fg-2); }
.wdx-bw-n { font: 700 12.5px 'JetBrains Mono', monospace; color: var(--acc); }

/* Issue cards (Behavior) */
.wdx-issue-card {
  padding: 16px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--clr, var(--acc));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wdx-issue-card > i { font-size: 22px; color: var(--clr); margin-bottom: 4px; }
.wdx-issue-t { font: 700 12.5px 'Space Grotesk', sans-serif; color: var(--fg); }
.wdx-issue-n { font: 800 26px 'Space Grotesk', sans-serif; color: var(--fg); }
.wdx-issue-x { font-size: 12px; color: var(--fg-3); line-height: 1.4; }

/* Funnel */
.wdx-funnel { display: flex; flex-direction: column; gap: 14px; }
.wdx-fn-stage {}
.wdx-fn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.wdx-fn-i { width: 22px; height: 22px; background: var(--acc-soft); color: var(--acc); border-radius: 50%; font: 700 11px 'Space Grotesk', sans-serif; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wdx-fn-name { font: 600 13px Inter, sans-serif; color: var(--fg); flex: 1; }
.wdx-fn-n    { font: 700 16px 'Space Grotesk', sans-serif; color: var(--fg); }
.wdx-fn-drop { font: 700 10.5px 'JetBrains Mono', monospace; padding: 2px 8px; border-radius: 99px; }
.wdx-fn-drop.is-ok   { background: rgba(34,197,94,.14); color: #16a34a; }
.wdx-fn-drop.is-warn { background: rgba(245,158,11,.14); color: #d97706; }
.wdx-fn-drop.is-bad  { background: rgba(239,68,68,.14); color: #dc2626; }
.wdx-fn-bar { height: 14px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.wdx-fn-fill { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.5,1.4,.5,1); }

/* Products */
.wdx-products-list { display: flex; flex-direction: column; gap: 10px; }
.wdx-prod-row { display: flex; flex-direction: column; gap: 5px; }
.wdx-prod-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wdx-prod-name { font: 600 12.5px Inter, sans-serif; color: var(--fg); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wdx-prod-sub { display: flex; gap: 10px; font: 700 11.5px 'JetBrains Mono', monospace; color: var(--fg-3); flex-shrink: 0; }
.wdx-prod-bar { height: 5px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.wdx-prod-fill { height: 100%; background: linear-gradient(90deg, var(--acc), #6b9a6b); border-radius: 99px; }

/* Heatmap stage (WDX namespace) */
.wdx-hm-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 12px; margin-bottom: 14px; }
.wdx-select { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--bg-1); font-size: 13px; color: var(--fg); min-width: 220px; }
.wdx-hm-mode, .wdx-hm-dev { display: inline-flex; background: var(--bg-2); padding: 3px; border-radius: 8px; gap: 2px; }
.wdx-hm-mode button, .wdx-hm-dev button { padding: 6px 12px; background: transparent; border: 0; border-radius: 6px; font: 600 11.5px Inter, sans-serif; color: var(--fg-3); cursor: pointer; }
.wdx-hm-mode button.is-active, .wdx-hm-dev button.is-active { background: var(--bg-1); color: #f97316; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.wdx-hm-stage { position: relative; height: 70vh; min-height: 500px; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.wdx-hm-frame { width: 100%; height: 100%; border: 0; display: none; background: #fff; }
.wdx-hm-canvas { position: absolute; inset: 0; pointer-events: none; display: none; }
.wdx-hm-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 40px; }
.wdx-hm-empty h3 { font: 700 18px 'Space Grotesk', sans-serif; color: var(--fg); }
.wdx-hm-empty p  { font-size: 13.5px; color: var(--fg-3); max-width: 460px; line-height: 1.55; }
.wdx-hm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 700px) { .wdx-hm-stats { grid-template-columns: repeat(2, 1fr); }}
.wdx-mini { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; text-align: center; }

/* Orders table */
.wdx-orders-tbl-wrap, .wdx-cities-tbl-wrap { overflow-x: auto; }
.wdx-orders-tbl { font-size: 12.5px; }
.wdx-pill { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 99px; font: 700 10.5px 'JetBrains Mono', monospace; white-space: nowrap; }
.wdx-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 0; }
.wdx-pager-btn { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-2); border: 0; cursor: pointer; color: var(--fg); font-size: 12px; }
.wdx-pager-btn:hover { background: var(--acc-soft); color: var(--acc); }
.wdx-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wdx-pager-info { font: 600 12px Inter, sans-serif; color: var(--fg-3); }

/* Order status list */
.wdx-os-list { display: flex; flex-direction: column; gap: 10px; }
.wdx-os-row { display: grid; grid-template-columns: 12px 1fr 100px 110px; align-items: center; gap: 10px; }
.wdx-os-dot { width: 12px; height: 12px; border-radius: 50%; }
.wdx-os-meta { min-width: 0; }
.wdx-os-name { font: 600 12.5px Inter, sans-serif; color: var(--fg); margin-bottom: 4px; }
.wdx-os-bar  { height: 5px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.wdx-os-fill { height: 100%; border-radius: 99px; transition: width .5s; }
.wdx-os-num  { font: 700 13px 'JetBrains Mono', monospace; color: var(--fg); text-align: right; }
.wdx-os-rev  { font: 700 12.5px 'JetBrains Mono', monospace; color: var(--acc); text-align: right; }

/* WDX settings popover */
.wdx-settings {
  position: fixed;
  top: 70px;
  right: 22px;
  z-index: 999;
  width: 320px;
  max-width: 92vw;
}
.wdx-settings[hidden] { display: none !important; }
.wdx-settings-card {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
  animation: wdxSlideDown var(--d-2) ease-out;
}
@keyframes wdxSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); }}
.wdx-settings-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font: 700 14px 'Space Grotesk', sans-serif;
  color: var(--fg);
}
.wdx-settings-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.wdx-settings-row > span {
  font: 600 12px 'Space Grotesk', sans-serif;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wdx-settings-row .wdx-select { width: 100%; }
.wdx-settings-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.wdx-btn {
  flex: 1;
  padding: 9px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  font: 600 12.5px Inter, sans-serif;
  color: var(--fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.wdx-btn:hover { background: var(--bg-3); }
.wdx-btn-pri {
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  border: 0;
}
.wdx-btn-pri:hover { filter: brightness(1.08); }
.wdx-settings-note {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--fg-4);
  line-height: 1.4;
}

/* AI */
.wdx-ai-wrap { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: 14px; padding: 40px; min-height: 400px; }
.wdx-ai-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.wdx-ai-empty h3 { font: 700 20px 'Space Grotesk', sans-serif; color: var(--fg); margin: 8px 0 0; }
.wdx-ai-empty p  { font-size: 14px; color: var(--fg-3); max-width: 480px; }
.wdx-ai-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.wdx-ai-suggestions button { padding: 9px 14px; background: var(--acc-soft); color: var(--acc); border: 0; border-radius: 9px; cursor: pointer; font: 600 12.5px Inter, sans-serif; transition: all var(--d-1); }
.wdx-ai-suggestions button:hover { background: var(--acc); color: #fff; transform: translateY(-1px); }

/* Conversation header — polish status + name */
.dc-conv-name {
  font: 700 16px/1.2 'Space Grotesk', Inter, sans-serif !important;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.dc-conv-status {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font: 12.5px/1.3 Inter, sans-serif !important;
  color: var(--fg-3);
}
.dc-conv-status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fg-5, #c4c8c0);
  flex-shrink: 0;
}
.dc-conv-status.is-online::before {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}
.dc-conv-status .tm-status-dot {
  display: none; /* dot je teraz na ::before */
}

/* 4) Mic recording state — pulse */
.tm-voice-btn.is-recording,
.dc-icon-mic.is-recording {
  background: rgba(248,113,113,.18) !important;
  color: var(--err) !important;
  animation: dcMicPulse 1.4s ease-in-out infinite;
}
@keyframes dcMicPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248,113,113,.4); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(248,113,113,0); }
}

/* 5) Compose footer — pri otvorenom emoji nech sa správne pozične umiestni */
.dc-compose { position: relative; }

/* 6) Send button — fix ikona + label spacing na úzkych viewportoch */
@media (max-width: 700px) {
  .dc-send span { display: none; }
  .dc-send { width: 42px; padding: 0; justify-content: center; }
}

/* 7) Skry old "ix-*" sidebar overlay ak by sa nahodou load aj inbox.php.pre-dreamschat-backup */
.ix-shell:not(.dc-shell) { display: none !important; }

/* 8) Loading state v list — match dc style */
.tm-list-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 50px 18px;
  color: var(--fg-3);
  font-size: 13px;
}
.tm-list-loading i { color: var(--acc); font-size: 18px; }

/* 9) Date separator (Today, July 24…) — DreamsChat pill štýl */
.tm-date-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
}
.tm-date-sep span {
  background: var(--fg);
  color: var(--bg-0);
  padding: 4px 14px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .tm-date-sep span {
  background: var(--bg-1);
  color: var(--fg);
  border: 1px solid var(--line);
}

/* 10) Empty msgs state (no messages yet) */
.tm-msgs-empty {
  margin: auto;
  text-align: center;
  padding: 40px 20px;
}
.tm-msgs-empty-ava {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  margin: 0 auto 14px !important;
  font-size: 28px !important;
}
.tm-msgs-empty-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
}
.tm-msgs-empty-sub {
  font-size: 13px;
  color: var(--fg-3);
}

/* ═══════════════════════════════════════════════════════════════════════
   INBOX — fixy duplikátov + hidden attribute respect (DreamsChat 1:1)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) Menu rešpektuje HTML `hidden` atribút (predtým ho prebíjalo display:flex) */
.dc-menu[hidden] { display: none !important; }
.ix-menu[hidden] { display: none !important; }

/* 2) Rail top spacing — bez brand loga je menej padding hore */
.dc-rail {
  padding: 18px 0 14px;
  gap: 6px;
}

/* 3) Rail buttons — viac DreamsChat-feel (slim 40px, čisté ikony bez badge ringu zbytočne) */
.dc-rail-btn {
  width: 40px; height: 40px;
  border-radius: 11px;
  font-size: 16px;
}
.dc-rail-btn.is-active {
  /* Olive akcent ako reference (tam fialový — u nás olive). */
  background: linear-gradient(135deg, var(--acc), #3a5e3a);
  color: #fff;
  box-shadow: 0 4px 12px rgba(74,118,74,.32);
}
.dc-rail-btn.is-active::before { display: none; }  /* žiadny ľavý prúžok — DreamsChat ho tiež nemá */
.dc-rail-btn:not(.is-active) { color: var(--fg-3); }
.dc-rail-btn:not(.is-active):hover { background: var(--bg-2); color: var(--fg); }

/* 4) Rail badge — menší, pekne posadený */
.dc-rail-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--err);
  color: #fff;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-1);
}

/* 5) Rail me-avatar — kompaktný, 32px ako DreamsChat */
.dc-rail-me { padding: 0; }
.dc-rail-me-ava {
  width: 32px; height: 32px;
  border-width: 0;
  font-size: 12px;
}

/* 6) Rail foot — separátor jemnejší */
.dc-rail-foot {
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}

/* ═══════════════════════════════════════════════════════════════════════
   INBOX — FIX broken empty state + chat list card-style (DreamsChat 1:1)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) Empty state — FORCE vertical column stack (predtým flex-row by inheritance)
   POZN: žiadne !important na display — JS toggluje display:none cez inline style.
   Inline style normálne vyhráva nad CSS bez !important. */
.dc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: auto;
  padding: 60px 32px;
  max-width: 420px;
  width: 100%;
  gap: 0;
}
/* Zaisti, aby inline style="display:none" naozaj skryl (poistka proti dedeniu flex z parenta) */
#tmEmpty[style*="display:none"],
#tmEmpty[style*="display: none"],
#tmConv[style*="display:none"],
#tmConv[style*="display: none"] { display: none !important; }
.dc-empty-ico {
  width: 88px !important;
  height: 88px !important;
  margin: 0 0 18px !important;
  border-radius: 26px !important;
  background: var(--acc-soft);
  color: var(--acc);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
}
.dc-empty-title {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.dc-empty-sub {
  font-size: 13.5px;
  color: var(--fg-3);
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 320px;
}
.dc-empty-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 12px 24px !important;
  background: linear-gradient(135deg, var(--acc), #3a5e3a) !important;
  color: #fff !important;
  border: 0;
  border-radius: 13px !important;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(74,118,74,.32);
  transition: filter var(--d-1), transform var(--d-1);
}
.dc-empty-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* 2) Chat list rows — biele karty s tieňom (DreamsChat-style) */
.dc-items {
  padding: 4px 12px 20px;
}
.dc-items > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px !important;
  background: var(--bg-1) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 14px !important;
  margin: 0 0 8px !important;
  cursor: pointer;
  position: relative;
  transition: all var(--d-1);
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.dc-items > div:hover {
  border-color: var(--line) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.dc-items > div.is-active,
.dc-items > div.active {
  background: var(--acc-soft) !important;
  border-color: var(--line-acc) !important;
}
.dc-items > div.is-active::before,
.dc-items > div.active::before { display: none !important; }

/* Avatar v list row — kruh 44px s online dot */
.dc-items > div [class*="-ava"]:first-of-type,
.dc-items > div .tm-thread-ava,
.dc-items > div .tm-ava {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  position: relative;
  flex-shrink: 0;
  font-size: 14.5px;
  font-weight: 700;
  font-family: 'Space Grotesk', Inter, sans-serif;
}

/* Body of row — meno + last message */
.dc-items > div .tm-thread-body,
.dc-items > div .tm-row-body,
.dc-items > div > div:not([class*="-ava"]):not([class*="meta"]):not([class*="-time"]):first-of-type {
  flex: 1;
  min-width: 0;
}
.dc-items > div .tm-thread-name,
.dc-items > div .tm-name,
.dc-items > div [class*="-name"] {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.dc-items > div .tm-thread-last,
.dc-items > div [class*="-last"],
.dc-items > div [class*="-preview"] {
  font-size: 12.5px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-items > div.active .tm-thread-name,
.dc-items > div.active [class*="-name"] { color: var(--acc); }

/* Time + meta on right */
.dc-items > div .tm-thread-meta,
.dc-items > div .tm-thread-time,
.dc-items > div [class*="-time"]:not([class*="status"]),
.dc-items > div [class*="-date"] {
  font-size: 11px;
  color: var(--fg-4);
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Unread badge (red circle) */
.dc-items > div .tm-thread-badge,
.dc-items > div .tm-badge,
.dc-items > div [class*="-badge"]:not([class*="status"]):not([class*="pill"]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  background: var(--err);
  color: #fff;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
}

/* Online dot na avatare — pri kruhových avataroch v list rowoch */
.dc-items > div [class*="-ava"]::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 11px; height: 11px;
  background: #22c55e;
  border: 2px solid var(--bg-1);
  border-radius: 50%;
  z-index: 2;
}
/* Group avatars (.tm-ava-group) — skry online dot */
.dc-items > div .tm-ava-group::after,
.dc-items > div [class*="group"]::after { display: none; }

/* 3) "VŠETKY CHATY" label — kompaktnejší padding */
.dc-section-h.dc-section-all {
  padding: 14px 18px 8px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--fg-2);
  letter-spacing: 0.04em;
}

/* 4) "Recent Chats" — väčší titulok ako referencia */
.dc-recent .dc-section-h {
  padding: 14px 18px 10px;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.01em;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-weight: 700;
  color: var(--fg);
}

/* ═══════════════════════════════════════════════════════════════════════
   INBOX — 1:1 DreamsChat list cards (správne .tm-item* selektory z JS)
   ═══════════════════════════════════════════════════════════════════════ */

/* Reset starých pravidiel pre .dc-items > div — JS emituje <button class="tm-item"> */
.dc-items > div:not(.tm-item):not(.tm-list-loading):not(.tm-list-empty):not(.dc-list-loading) {
  /* len pre prípadné generic divy — nic zvláštne */
}

/* List container — viac priestoru ako DreamsChat */
.dc-items {
  padding: 4px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ═══ Chat item (kartička) — 1:1 DreamsChat ═══ */
.tm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  margin: 0 0 8px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: border-color var(--d-1), box-shadow var(--d-1), background var(--d-1);
  box-shadow: 0 1px 2px rgba(0,0,0,.025);
}
.tm-item:hover {
  border-color: var(--line);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.tm-item.is-active {
  background: var(--acc-soft);
  border-color: var(--line-acc);
}

/* Avatar — 46px kruh s online dot */
.tm-item-ava {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  /* overflow: hidden ZÁMERNE odstránené aby dot nebol orezaný */
}
.tm-item-ava img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.tm-item-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 13px; height: 13px;
  background: #22c55e;
  border: 2.5px solid var(--bg-1);
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}
.tm-item.is-active .tm-item-dot { border-color: var(--acc-soft); }

/* Body — meno hore, preview dole */
.tm-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tm-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tm-item-name {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.tm-item-time {
  font-size: 11px;
  color: var(--fg-4);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.tm-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tm-item-preview {
  font-size: 12.5px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.tm-item-you {
  color: var(--fg-2);
  font-weight: 600;
}
.tm-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--err);
  color: #fff;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(248,113,113,.30);
}

/* Unread state — meno bold-er, preview farebnejší */
.tm-item.is-unread .tm-item-name { color: var(--fg); font-weight: 800; }
.tm-item.is-unread .tm-item-preview { color: var(--fg-2); font-weight: 500; }
.tm-item.is-unread .tm-item-time { color: var(--acc); font-weight: 700; }

/* Active state — meno olive */
.tm-item.is-active .tm-item-name { color: var(--acc); }

/* Online / offline dot variants */
.tm-item-dot.is-online { background: #22c55e; }
.tm-item-dot.is-offline { background: var(--fg-5, #c4c8c0); }
:root[data-theme="dark"] .tm-item-dot.is-offline,
[data-theme="dark"] .tm-item-dot.is-offline { background: #4a4f48; }

/* Group "kind" ikona vedľa mena */
.tm-item-kind {
  font-size: 9px;
  color: var(--fg-4);
  margin-left: 6px;
  vertical-align: middle;
  opacity: .7;
}

/* Read receipt double-check pred "Vy:" — DreamsChat-style */
.tm-item-tick {
  font-size: 11px;
  color: var(--fg-4);
  margin-right: 4px;
  vertical-align: -1px;
}
.tm-item-tick.is-read { color: var(--acc); }

/* Subtle olive glow na unread kartách */
.tm-item.is-unread {
  border-color: var(--line-acc);
  box-shadow: 0 1px 2px rgba(0,0,0,.025), 0 0 0 1px rgba(74,118,74,.08) inset;
}

/* ═══ List empty / loading state ═══ */
.tm-list-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--fg-3);
}
.tm-list-empty i {
  font-size: 36px;
  color: var(--acc);
  opacity: 0.5;
  display: block;
  margin-bottom: 12px;
}
.tm-list-empty > div:nth-child(2) {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
}
.tm-list-empty-sub {
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.55;
}

/* ═══ Mobile responsive ═══ */
@media (max-width: 600px) {
  .tm-item { padding: 11px 12px; }
  .tm-item-ava { width: 44px; height: 44px; }
  .tm-item-name { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MAIL — More menu (3-dot popup) + Settings modal + Signatures + AI
   ═══════════════════════════════════════════════════════════════════ */

/* ─── More menu popup ───────────────────────────────────────────── */
.ml-more-menu {
  position: fixed;
  width: 280px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
  padding: 8px 0;
  z-index: 10000;
  max-height: 80vh;
  overflow-y: auto;
}
.ml-mm-section { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.ml-mm-section:last-child { border-bottom: 0; }
.ml-mm-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 16px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ml-mm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  background: transparent;
  border: 0;
  color: var(--fg);
  font-size: 13.5px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--d-1);
}
.ml-mm-item:hover { background: var(--bg-2); }
.ml-mm-item i { width: 16px; color: var(--fg-3); text-align: center; }
.ml-mm-item:hover i { color: #f04e23; }

/* ─── Settings modal ────────────────────────────────────────────── */
.ml-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ml-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ml-settings-dialog {
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: 90vh;
  background: var(--bg-1);
  border-radius: 16px;
  box-shadow: 0 24px 72px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ml-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.ml-settings-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ml-settings-head h2 i { color: #f04e23; }
.ml-settings-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 16px;
}
.ml-settings-close:hover { background: var(--bg-3); color: var(--fg); }

.ml-settings-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.ml-settings-nav {
  border-right: 1px solid var(--line);
  padding: 12px 8px;
  background: var(--bg-2);
  overflow-y: auto;
}
.ml-sn-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 13.5px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  margin-bottom: 2px;
  transition: all var(--d-1);
}
.ml-sn-btn:hover { background: var(--bg-3); color: var(--fg); }
.ml-sn-btn.is-active {
  background: rgba(240,78,35,0.1);
  color: #f04e23;
  font-weight: 600;
}
.ml-sn-btn i { width: 16px; text-align: center; }

.ml-settings-main {
  padding: 24px 28px;
  overflow-y: auto;
}
.ml-set-loading {
  padding: 40px;
  text-align: center;
  color: var(--fg-3);
}

/* ─── Setting sections ──────────────────────────────────────────── */
.ml-set-section {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.ml-set-section:last-child { border-bottom: 0; }
.ml-set-section h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ml-set-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ml-set-section-head h3 { margin: 0; }
.ml-set-section-foot { margin-top: 16px; display: flex; gap: 10px; }

.ml-set-hint {
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.5;
  margin: 0 0 10px;
}

.ml-set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ml-set-lbl {
  font-size: 13px;
  color: var(--fg-2);
  font-weight: 500;
  min-width: 160px;
}
.ml-set-inp,
.ml-set-sel {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font-size: 13.5px;
  font-family: inherit;
  outline: 0;
  transition: border-color var(--d-1);
}
.ml-set-inp:focus,
.ml-set-sel:focus { border-color: #f04e23; box-shadow: 0 0 0 3px rgba(240,78,35,0.12); }

.ml-set-chk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--fg);
  padding: 6px 0;
  cursor: pointer;
}
.ml-set-chk input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #f04e23;
  cursor: pointer;
  flex-shrink: 0;
}

.ml-set-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--d-1);
}
.ml-set-btn:hover { background: var(--bg-2); border-color: #f04e23; color: #f04e23; }
.ml-set-btn-ghost { background: transparent; }
.ml-set-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: #f04e23;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(240,78,35,0.28);
  transition: all var(--d-1);
}
.ml-set-save:hover { background: #d9431d; transform: translateY(-1px); }

.ml-set-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--fg-4);
}
.ml-set-empty i {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
  color: var(--fg-4);
}

/* ─── Signature cards ───────────────────────────────────────────── */
.ml-sig-list { display: flex; flex-direction: column; gap: 10px; }
.ml-sig-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--bg-1);
  transition: border-color var(--d-1);
}
.ml-sig-card:hover { border-color: var(--line-soft); }
.ml-sig-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ml-sig-card-meta {
  font-size: 11.5px;
  color: var(--fg-4);
  margin-top: 2px;
}
.ml-sig-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(240,78,35,0.12);
  color: #f04e23;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ml-sig-card-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ml-sig-link {
  font-size: 12px;
  color: #f04e23;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 6px;
}
.ml-sig-link:hover { background: rgba(240,78,35,0.08); }
.ml-sig-icon {
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 12px;
}
.ml-sig-icon:hover { background: var(--bg-2); color: var(--fg); }
.ml-sig-icon-danger:hover { background: rgba(220,38,38,0.1); color: #dc2626; }
.ml-sig-preview {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.55;
  border: 1px dashed var(--line);
}

/* Signature editor */
.ml-sig-editor {
  background: var(--bg-2);
  border-radius: 12px;
  padding: 18px;
  margin-top: 22px;
  border: 1px solid var(--line);
}
.ml-sig-mini-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  border-bottom: 0;
  margin-top: 6px;
  flex-wrap: wrap;
}
.ml-sig-mini-toolbar button {
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--fg-3);
  cursor: pointer;
}
.ml-sig-mini-toolbar button:hover { background: var(--bg-3); color: var(--fg); }
.ml-sig-mini-toolbar select {
  height: 28px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--fg-3);
  font-size: 12px;
  padding: 0 6px;
  cursor: pointer;
}
.ml-sig-mini-toolbar select:hover { background: var(--bg-3); }
.ml-sig-mini-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.ml-sig-color {
  position: relative;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--fg-3);
  cursor: pointer;
}
.ml-sig-color:hover { background: var(--bg-3); color: var(--fg); }
.ml-sig-color input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; border: 0;
}
.ml-sig-textarea {
  min-height: 140px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  font-family: 'Inter', sans-serif;
  outline: 0;
  overflow-y: auto;
}
.ml-sig-textarea:empty:before {
  content: attr(data-placeholder);
  color: var(--fg-4);
}
.ml-sig-textarea:focus { border-color: #f04e23; }
.ml-sig-textarea a { color: #f04e23; }
.ml-sig-textarea img { max-width: 200px; height: auto; }

/* ─── AI panels ─────────────────────────────────────────────────── */
.ml-ai-rules { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ml-ai-rule {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 8px;
  align-items: center;
}
.ml-ai-flags { margin-top: 8px; padding-left: 28px; border-left: 2px solid var(--line); }

/* ─── Filter cards ──────────────────────────────────────────────── */
.ml-flt-list { display: flex; flex-direction: column; gap: 10px; }
.ml-flt-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-1);
}

/* ─── Risk cards (security scan) ────────────────────────────────── */
.ml-risk-card {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 10px;
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
}
.ml-risk-low    { border-left-color: #eab308; background: #fefce8; }
.ml-risk-medium { border-left-color: #f97316; background: #fff7ed; }
.ml-risk-high   { border-left-color: #dc2626; background: #fef2f2; }
.ml-risk-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ml-risk-badge {
  padding: 3px 10px;
  background: #1f2937;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ml-risk-high .ml-risk-badge { background: #dc2626; }
.ml-risk-medium .ml-risk-badge { background: #f97316; }
.ml-risk-low .ml-risk-badge { background: #eab308; }
.ml-risk-type { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.ml-risk-from { font-size: 13px; color: #0f172a; margin-bottom: 2px; }
.ml-risk-subj { font-size: 13.5px; color: #1f2937; font-weight: 600; margin-bottom: 6px; }
.ml-risk-reason { font-size: 12.5px; color: #475569; line-height: 1.5; }

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ml-settings-body { grid-template-columns: 1fr; }
  .ml-settings-nav { display: flex; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ml-sn-btn { flex: 0 0 auto; }
  .ml-settings-main { padding: 16px; }
  .ml-set-row { flex-direction: column; align-items: stretch; }
  .ml-set-lbl { min-width: 0; }
  .ml-ai-rule { grid-template-columns: 1fr; }
  .ml-more-menu { width: 90vw; max-width: 320px; }
}

/* ─── AI Run Dialog & Progress Modal ─────────────────────────────── */

/* Progress modal: current task line */
.ml-prog-current {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--fg);
  font-weight: 500;
}
.ml-prog-current i { color: #f04e23; font-size: 15px; }

/* Progress bar */
.ml-prog-bar {
  position: relative;
  height: 28px;
  background: var(--bg-2);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.ml-prog-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f04e23, #f97316);
  transition: width 0.3s ease;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.ml-prog-bar-fill:after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0 10px, transparent 10px 20px);
  animation: prog-stripes 1.5s linear infinite;
}
@keyframes prog-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}
.ml-prog-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
  z-index: 2;
}

/* Stats row */
.ml-prog-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.ml-prog-stat {
  text-align: center;
  padding: 12px 8px;
  background: var(--bg-2);
  border-radius: 10px;
  border: 1px solid var(--line-soft);
}
.ml-prog-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
  line-height: 1.1;
}
.ml-prog-stat-lbl {
  font-size: 11.5px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.ml-prog-stat-ok   .ml-prog-stat-val { color: #10b981; }
.ml-prog-stat-fail .ml-prog-stat-val { color: #dc2626; }
.ml-prog-stat-skip .ml-prog-stat-val { color: #f59e0b; }

/* Activity log */
.ml-prog-log-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.ml-prog-log {
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-2);
  border-radius: 10px;
  padding: 8px;
  border: 1px solid var(--line-soft);
}
.ml-prog-log-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  font-size: 12.5px;
  border-radius: 6px;
  margin-bottom: 2px;
  animation: prog-row-in 0.3s ease;
}
@keyframes prog-row-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.ml-prog-log-row i { width: 14px; text-align: center; flex-shrink: 0; }
.ml-prog-log-ok   { background: rgba(16,185,129,0.06); }
.ml-prog-log-ok   i { color: #10b981; }
.ml-prog-log-fail { background: rgba(220,38,38,0.06); }
.ml-prog-log-fail i { color: #dc2626; }
.ml-prog-log-skip { background: rgba(245,158,11,0.06); }
.ml-prog-log-skip i { color: #f59e0b; }
.ml-prog-log-subj {
  font-weight: 600;
  color: var(--fg);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-prog-log-msg {
  color: var(--fg-3);
  font-size: 11.5px;
  flex-shrink: 0;
}

/* Cancel button */
.ml-prog-cancel {
  background: #fef2f2 !important;
  border-color: rgba(220,38,38,0.3) !important;
  color: #dc2626 !important;
}
.ml-prog-cancel:hover {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}
.ml-prog-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Classify results — group cards */
.ml-classify-group {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--line-soft);
}
.ml-classify-group h4 {
  margin: 0 0 10px;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ml-classify-badge {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(240,78,35,0.12);
  color: #f04e23;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ml-classify-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ml-classify-group li {
  font-size: 13px;
  color: var(--fg-2);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.ml-classify-group li:last-child { border-bottom: 0; }

/* Date inputs side-by-side in run dialog */
#aiRunDateCustom { gap: 8px; }
#aiRunDateCustom input[type="date"] { padding: 7px 10px; font-size: 13px; }

/* Responsive */
@media (max-width: 768px) {
  .ml-prog-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Mail AI Task Cards (task → agent mapping) ─────────────────── */
.ml-tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.ml-task-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color var(--d-1), box-shadow var(--d-1);
}
.ml-task-card:hover {
  border-color: rgba(240,78,35,0.3);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.ml-task-card[data-task] .ml-task-en:checked ~ * { /* no-op for selector */ }
.ml-task-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ml-task-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.ml-task-text { flex: 1; min-width: 0; }
.ml-task-text h4 {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg);
}
.ml-task-text p {
  margin: 0;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
}
.ml-task-body {
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}
.ml-task-body .ml-set-row { margin-bottom: 8px; }
.ml-task-body .ml-set-lbl { min-width: 120px; font-size: 12.5px; }
.ml-task-body .ml-set-sel { font-size: 13px; padding: 6px 10px; }
.ml-task-body .ml-set-chk { font-size: 12.5px; padding: 2px 0; }

.ml-task-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 6px 0 0;
}

/* iOS-style switch toggle */
.ml-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.ml-switch input { opacity: 0; width: 0; height: 0; }
.ml-switch-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 24px;
  transition: background var(--d-1);
}
.ml-switch-slider:before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--d-1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ml-switch input:checked + .ml-switch-slider { background: #f04e23; }
.ml-switch input:checked + .ml-switch-slider:before { transform: translateX(18px); }

/* Task detail (rules section) — len pre Classify */
.ml-task-detail {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--bg-2);
  border-radius: 12px;
  border: 1px solid var(--line-soft);
}
.ml-task-detail h3 { margin-top: 0; font-size: 14px; }

@media (max-width: 640px) {
  .ml-tasks-grid { grid-template-columns: 1fr; }
}

/* ─── Mail Reader — AI actions bar ────────────────────────────────── */
.ml-r-ai-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 22px 6px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(240,78,35,0.04), rgba(168,85,247,0.04));
  border: 1px solid rgba(240,78,35,0.15);
  border-radius: 12px;
}
.ml-r-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--d-1);
}
.ml-r-ai-btn:hover {
  background: #f04e23;
  border-color: #f04e23;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(240,78,35,0.28);
}
.ml-r-ai-btn i { font-size: 13px; }

/* AI output box (preklad / zhrnutie / tón / atď.) */
.ml-r-ai-output {
  margin: 6px 22px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  animation: ai-out-in 0.3s ease;
}
@keyframes ai-out-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ml-r-ai-out-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.ml-r-ai-out-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ml-r-ai-out-close {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--fg-3);
  cursor: pointer;
}
.ml-r-ai-out-close:hover { background: var(--bg-3); color: var(--fg); }
.ml-r-ai-out-body {
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg);
}
.ml-r-ai-out-body p { margin: 0 0 10px; }
.ml-r-ai-out-body p:last-child { margin-bottom: 0; }
.ml-r-ai-out-body h5 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
  margin: 14px 0 6px;
}
.ml-r-ai-out-body ul {
  padding-left: 22px;
  margin: 6px 0;
}
.ml-r-ai-out-body li { margin: 3px 0; font-size: 13.5px; }

.ml-r-ai-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--fg-3);
  padding: 8px 0;
}
.ml-r-ai-loading i { color: #f04e23; }

/* Meeting cards */
.ml-r-mt-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(20,184,166,0.05), rgba(20,184,166,0.02));
  border: 1px solid rgba(20,184,166,0.2);
  border-radius: 10px;
  margin-bottom: 10px;
}
.ml-r-mt-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #14b8a6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.ml-r-mt-body { flex: 1; }
.ml-r-mt-body h4 {
  margin: 0 0 6px;
  font-size: 14.5px;
  color: var(--fg);
}
.ml-r-mt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--fg-2);
}
.ml-r-mt-meta i { color: #14b8a6; margin-right: 4px; }
.ml-r-mt-att { font-size: 12px; color: var(--fg-3); margin-bottom: 8px; }
.ml-r-mt-notes { font-size: 12.5px; color: var(--fg-3); margin-bottom: 10px; font-style: italic; }

/* Smart Reply chips */
.ml-r-smart-reply {
  margin: 12px 22px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(139,92,246,0.05), rgba(139,92,246,0.02));
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 12px;
}
.ml-r-sr-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #8b5cf6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.ml-r-sr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ml-r-sr-chip {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid rgba(139,92,246,0.3);
  border-radius: 999px;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--d-1);
}
.ml-r-sr-chip:hover {
  background: #8b5cf6;
  color: #fff;
  border-color: #8b5cf6;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(139,92,246,0.3);
}
.ml-r-sr-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-3);
}
.ml-r-sr-loading i { color: #8b5cf6; }

@media (max-width: 640px) {
  .ml-r-ai-bar, .ml-r-ai-output, .ml-r-smart-reply { margin-left: 12px; margin-right: 12px; }
  .ml-r-ai-btn { padding: 6px 10px; font-size: 11.5px; }
  .ml-r-ai-btn span { display: inline; }
}

/* ─── Inbox — reply quote inside bubble ───────────────────────────── */
.tm-bubble-reply {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: rgba(15,23,42,0.04);
  border-left: 3px solid #6366f1;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--d-1);
  max-width: 100%;
}
.tm-bubble-reply:hover { background: rgba(99,102,241,0.08); }
.tm-bubble-row.is-mine .tm-bubble-reply {
  background: rgba(255,255,255,0.15);
  border-left-color: rgba(255,255,255,0.6);
}
.tm-bubble-row.is-mine .tm-bubble-reply:hover { background: rgba(255,255,255,0.22); }
.tm-bubble-reply-sender {
  font-size: 11.5px;
  font-weight: 700;
  color: #6366f1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tm-bubble-reply-sender i { font-size: 10px; }
.tm-bubble-row.is-mine .tm-bubble-reply-sender { color: rgba(255,255,255,0.95); }
.tm-bubble-reply-body {
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.tm-bubble-row.is-mine .tm-bubble-reply-body { color: rgba(255,255,255,0.88); }

/* Highlight flash při skoku na original */
.tm-bubble-flash .tm-bubble {
  animation: tm-flash 1.5s ease;
}
@keyframes tm-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,78,35,0); }
  20% { box-shadow: 0 0 0 6px rgba(240,78,35,0.4); }
  60% { box-shadow: 0 0 0 3px rgba(240,78,35,0.2); }
}

/* ─── Mail — Draft auto-save status in composer header ───────────── */
.ml-draft-status {
  font-size: 11.5px !important;
  color: var(--fg-3) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ml-draft-status i { font-size: 11px; }


/* ─── Inbox — inline audio player (voice messages) ───────────────── */
.tm-att-audio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(15,23,42,0.04);
  border-radius: 14px;
  min-width: 280px;
  max-width: 360px;
  margin-top: 4px;
}
.tm-bubble-row.is-mine .tm-att-audio { background: rgba(255,255,255,0.15); }

.tm-att-audio-play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f04e23;
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  transition: all var(--d-1);
}
.tm-att-audio-play:hover { background: #d9431d; transform: scale(1.05); }
.tm-att-audio-play i { margin-left: 1px; } /* play icon optical center */
.tm-att-audio-play i.fa-pause { margin-left: 0; }

.tm-att-audio-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tm-att-audio-title {
  font-size: 12.5px;
  color: var(--fg);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-att-audio-title i { color: #f04e23; font-size: 11px; }
.tm-bubble-row.is-mine .tm-att-audio-title { color: #fff; }
.tm-bubble-row.is-mine .tm-att-audio-title i { color: rgba(255,255,255,0.9); }

.tm-att-audio-progress {
  position: relative;
  height: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.tm-att-audio-bar {
  position: absolute;
  inset: 0;
  margin: auto 0;
  height: 4px;
  background: rgba(15,23,42,0.15);
  border-radius: 2px;
}
.tm-bubble-row.is-mine .tm-att-audio-bar { background: rgba(255,255,255,0.3); }
.tm-att-audio-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 4px;
  background: #f04e23;
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}
.tm-bubble-row.is-mine .tm-att-audio-bar-fill { background: #fff; }
.tm-att-audio-progress:hover .tm-att-audio-bar { height: 6px; transition: height 0.1s; }
.tm-att-audio-progress:hover .tm-att-audio-bar-fill { height: 6px; transition: height 0.1s; }

.tm-att-audio-meta {
  font-size: 11px;
  color: var(--fg-3);
  display: flex;
  gap: 6px;
}
.tm-bubble-row.is-mine .tm-att-audio-meta { color: rgba(255,255,255,0.8); }

.tm-att-audio-dl {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  text-decoration: none;
  flex-shrink: 0;
  font-size: 11px;
}
.tm-att-audio-dl:hover { background: rgba(15,23,42,0.08); color: var(--fg); }
.tm-bubble-row.is-mine .tm-att-audio-dl { color: rgba(255,255,255,0.85); }
.tm-bubble-row.is-mine .tm-att-audio-dl:hover { background: rgba(255,255,255,0.2); color: #fff; }

.tm-att-audio audio { display: none; }

/* Video inline */
.tm-att-video {
  max-width: 360px;
  width: 100%;
  border-radius: 14px;
  margin-top: 4px;
  background: #000;
}

/* ─── Voice recording overlay (above input) ──────────────────────── */
.dc-voice-overlay {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 12px 8px;
  background: linear-gradient(135deg, rgba(240,78,35,0.08), rgba(220,38,38,0.04));
  border: 1px solid rgba(240,78,35,0.3);
  border-radius: 14px;
  animation: dc-overlay-in 0.2s ease;
}
@keyframes dc-overlay-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.dc-voice-rec-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #dc2626;
  flex-shrink: 0;
  animation: dc-rec-pulse 1s infinite ease-in-out;
}
@keyframes dc-rec-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
  50% { opacity: 0.5; box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
.dc-voice-timer {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dc-voice-wave {
  flex: 1;
  height: 32px;
  background: transparent;
  border-radius: 4px;
}
.dc-voice-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  transition: all var(--d-1);
}
.dc-voice-cancel {
  background: #fef2f2;
  color: #dc2626;
}
.dc-voice-cancel:hover { background: #dc2626; color: #fff; }
.dc-voice-stop {
  background: #1f2937;
  color: #fff;
}
.dc-voice-stop:hover { background: #0f172a; }
.dc-voice-send {
  background: #f04e23;
  color: #fff;
  padding: 0 14px;
  width: auto;
  border-radius: 18px;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
}
.dc-voice-send:hover { background: #d9431d; transform: translateY(-1px); }

/* Voice preview (po stop-e) */
.dc-voice-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 12px 8px;
  background: rgba(15,23,42,0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.dc-voice-preview-audio {
  flex: 1;
  height: 36px;
}
.dc-voice-preview-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* STT (dictation) overlay */
.dc-stt-overlay {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 12px 8px;
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.04));
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 14px;
  font-size: 13px;
  color: var(--fg-2);
}
.dc-stt-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #6366f1;
  animation: dc-rec-pulse 1s infinite ease-in-out;
}
.dc-stt-overlay em {
  font-style: italic;
  color: var(--fg-3);
}

/* Mic button recording state */
.dc-icon-btn.is-recording {
  background: #dc2626 !important;
  color: #fff !important;
}
.dc-icon-btn.is-recording i { animation: dc-rec-pulse 1s infinite ease-in-out; }

@media (max-width: 600px) {
  .tm-att-audio { min-width: 220px; max-width: 100%; }
  .dc-voice-wave { display: none; }
  .dc-voice-overlay { padding: 10px 12px; gap: 8px; }
}

/* ─── Inbox composer — inline modes (recording / preview / STT) ───── */

/* Input slot wraps textarea + recording pane + preview pane */
.dc-input-slot {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* HTML hidden atribút musí vyhrať nad display:flex z .dc-rec-pane/.dc-rec-preview/.dc-stt-badge */
.dc-rec-pane[hidden],
.dc-rec-preview[hidden],
.dc-stt-badge[hidden] { display: none !important; }

/* ─ Recording pane (replaces textarea during recording) ─ */
.dc-rec-pane {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(240,78,35,0.06), rgba(220,38,38,0.03));
  border: 1px solid rgba(240,78,35,0.25);
  border-radius: 14px;
  animation: dc-slot-in 0.18s ease;
}
@keyframes dc-slot-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
.dc-rec-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #dc2626;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(220,38,38,0.55);
  animation: dc-rec-pulse 1.1s infinite ease-in-out;
}
@keyframes dc-rec-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
.dc-rec-timer {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
}
.dc-rec-wave {
  flex: 1;
  height: 28px;
  min-width: 0;
}
.dc-rec-cancel {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: all var(--d-1);
}
.dc-rec-cancel:hover { background: #fef2f2; color: #dc2626; }

/* ─ Voice preview (replaces textarea after stop) ─ */
.dc-rec-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 12px 6px 6px;
  background: rgba(15,23,42,0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  animation: dc-slot-in 0.18s ease;
}
.dc-rec-prev-play {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f04e23;
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  transition: all var(--d-1);
}
.dc-rec-prev-play:hover { background: #d9431d; transform: scale(1.05); }
.dc-rec-prev-play i { margin-left: 1px; }
.dc-rec-prev-play i.fa-pause { margin-left: 0; }
.dc-rec-prev-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dc-rec-prev-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 5px;
}
.dc-rec-prev-title i { color: #f04e23; font-size: 10px; }
.dc-rec-prev-bar {
  position: relative;
  height: 14px;
  cursor: pointer;
  display: flex; align-items: center;
}
.dc-rec-prev-bar:before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto 0;
  height: 3px;
  background: rgba(15,23,42,0.15);
  border-radius: 2px;
}
.dc-rec-prev-bar-fill {
  position: absolute;
  left: 0;
  top: 0; bottom: 0;
  margin: auto 0;
  height: 3px;
  background: #f04e23;
  border-radius: 2px;
  width: 0%;
  z-index: 1;
}
.dc-rec-prev-time {
  font-size: 10.5px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.dc-rec-preview audio { display: none; }

/* ─ STT badge (overlays textarea while dictating) ─ */
.dc-stt-badge {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(99,102,241,0.92), rgba(139,92,246,0.92));
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
  max-width: 60%;
}
.dc-stt-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: dc-stt-blink 0.9s infinite ease-in-out;
}
@keyframes dc-stt-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.dc-stt-label { white-space: nowrap; }
.dc-stt-badge em {
  font-style: italic;
  font-weight: 500;
  opacity: 0.9;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Side buttons visibility per mode — schovať počas nahrávania/preview */
.dc-compose-bar.is-recording .dc-side-btn:not(.dc-icon-mic),
.dc-compose-bar.is-preview   .dc-side-btn:not(.dc-icon-mic) {
  display: none;
}

/* Send button počas recording móde — animovaná terracota */
.dc-compose-bar.is-recording .dc-send,
.dc-compose-bar.is-preview .dc-send {
  background: #f04e23 !important;
  animation: dc-send-pulse 1.6s infinite ease-in-out;
}
@keyframes dc-send-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,78,35,0.5); }
  50% { box-shadow: 0 0 0 8px rgba(240,78,35,0); }
}

/* Mic button v recording móde — červený "X" */
.dc-icon-btn.dc-icon-mic.is-recording {
  background: #dc2626 !important;
  color: #fff !important;
}

/* STT button aktívny */
.dc-icon-btn#tmSttBtn.is-recording {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
}

/* Zachová pôvodnú dc-input šírku v slot wrapperi */
.dc-input-slot .dc-input { width: 100%; }

/* Responsive — mobil */
@media (max-width: 600px) {
  .dc-rec-wave { display: none; }
  .dc-stt-badge { right: 8px; padding: 3px 8px; font-size: 10.5px; }
  .dc-stt-badge em { max-width: 90px; }
}

/* ─── Mail — local draft rows (in DRAFTS folder) ─────────────────── */
.ml-row-local-draft {
  background: linear-gradient(135deg, rgba(240,78,35,0.03), rgba(240,78,35,0.01));
  border-left: 3px solid #f04e23;
}
.ml-row-local-draft:hover {
  background: linear-gradient(135deg, rgba(240,78,35,0.06), rgba(240,78,35,0.02));
}
.ml-row-local-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(240,78,35,0.1);
  color: #f04e23;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.ml-row-local-badge i { font-size: 9px; }

/* ─── Dashboard hero typewriter greeting ─────────────────────────── */
.dh-tw {
  display: inline-flex;
  align-items: baseline;
  min-height: 1.2em; /* zabráni preskoku layoutu kým je text prázdny */
}
.dh-tw-greet,
.dh-tw-comma,
.dh-tw-name {
  display: inline;
  white-space: pre;
}
.dh-tw-cursor {
  display: inline-block;
  width: 0.06em;
  margin-left: 4px;
  background: currentColor;
  color: var(--accent, #5b8264);
  font-weight: 300;
  animation: dh-tw-blink 0.9s steps(1) infinite;
  transform: translateY(2px);
  align-self: center;
  /* Použijeme background na "|" znak — necháme len thin bar */
  color: transparent;
  background: currentColor;
  width: 2px;
  height: 0.95em;
  border-radius: 1px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.dh-tw-cursor.is-done {
  opacity: 0;
  transform: translateY(2px) scale(0.6);
  pointer-events: none;
}
@keyframes dh-tw-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Reduced motion — okamžite zobrazí finálny text bez typewritera */
@media (prefers-reduced-motion: reduce) {
  .dh-tw-greet::before { content: attr(data-final-greet); }
  .dh-tw-cursor { display: none !important; }
}

/* ─── Website detail — Blog tab ──────────────────────────────────── */
.wb-blog-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Hero card */
.wb-blog-hero {
  background: linear-gradient(135deg, rgba(240,78,35,0.06), rgba(240,78,35,0.02));
  border: 1px solid rgba(240,78,35,0.2);
  border-radius: 16px;
  padding: 22px 26px;
}
.wb-blog-hero-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}
.wb-blog-hero-ico {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: #f04e23;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.wb-blog-hero-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
}
.wb-blog-hero-head p {
  margin: 0;
  color: var(--fg-3);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Form rows */
.wb-blog-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.wb-blog-agent-row,
.wb-blog-prompt-row {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.wb-blog-prompt-row { margin-bottom: 0; }

.wb-blog-agent-pick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.wb-blog-select,
.wb-blog-input {
  flex: 1;
  min-width: 220px;
  padding: 9px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font-size: 13.5px;
  font-family: inherit;
  outline: 0;
}
.wb-blog-select:focus,
.wb-blog-input:focus { border-color: #f04e23; box-shadow: 0 0 0 3px rgba(240,78,35,0.12); }

.wb-blog-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.55;
  font-family: inherit;
  resize: vertical;
  outline: 0;
  margin-bottom: 10px;
}
.wb-blog-textarea:focus { border-color: #f04e23; box-shadow: 0 0 0 3px rgba(240,78,35,0.12); }

.wb-blog-prompt-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.wb-blog-chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-2);
  cursor: pointer;
}
.wb-blog-chk input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: #f04e23;
  cursor: pointer;
}

/* Buttons */
.wb-blog-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--d-1);
}
.wb-blog-btn:hover { background: var(--bg-2); border-color: #f04e23; color: #f04e23; }
.wb-blog-btn-ghost { background: transparent; }
.wb-blog-btn-save,
.wb-blog-btn-primary {
  background: #f04e23;
  color: #fff;
  border-color: #f04e23;
  box-shadow: 0 3px 10px rgba(240,78,35,0.25);
}
.wb-blog-btn-save:hover,
.wb-blog-btn-primary:hover { background: #d9431d; color: #fff; transform: translateY(-1px); }
.wb-blog-btn-primary { padding: 10px 20px; font-size: 13.5px; }
.wb-blog-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.wb-blog-btn-danger { color: #dc2626; }
.wb-blog-btn-danger:hover { background: #fef2f2; border-color: #dc2626; color: #dc2626; }

/* Agent info banner */
.wb-blog-agent-info {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.45;
}
.wb-blog-agent-info.is-ok {
  background: rgba(16,185,129,0.06);
  border-color: rgba(16,185,129,0.25);
}

/* List */
.wb-blog-section {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.wb-blog-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.wb-blog-section-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--fg);
}
.wb-blog-section-head h3 i { color: #f04e23; }

.wb-blog-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wb-blog-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  transition: border-color var(--d-1);
}
.wb-blog-row:hover { border-color: rgba(240,78,35,0.3); }
.wb-blog-row-status { padding-top: 2px; }
.wb-blog-row-main { min-width: 0; }
.wb-blog-row-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
  word-wrap: break-word;
}
.wb-blog-row-meta {
  font-size: 11.5px;
  color: var(--fg-3);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.wb-blog-row-excerpt {
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.5;
}
.wb-blog-row-err {
  font-size: 12px;
  color: #dc2626;
  background: #fef2f2;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 6px;
}
.wb-blog-row-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.wb-blog-row-link {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  background: transparent;
  text-decoration: none;
}
.wb-blog-row-link:hover { background: var(--bg-3); color: #f04e23; }

.wb-blog-st {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.wb-blog-st-draft { background: rgba(148,163,184,0.15); color: #475569; }
.wb-blog-st-pub   { background: rgba(245,158,11,0.15); color: #b45309; }
.wb-blog-st-ok    { background: rgba(16,185,129,0.15); color: #047857; }
.wb-blog-st-fail  { background: rgba(220,38,38,0.15); color: #b91c1c; }

.wb-blog-seo {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(240,78,35,0.1);
  color: #f04e23;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
}
.wb-blog-cats {
  font-size: 11px;
  color: var(--fg-3);
}

.wb-blog-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--fg-3);
}
.wb-blog-empty i {
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
  color: var(--fg-4);
}

@media (max-width: 768px) {
  .wb-blog-agent-pick { flex-direction: column; align-items: stretch; }
  .wb-blog-row { grid-template-columns: 1fr; }
  .wb-blog-row-acts { justify-content: flex-end; }
}

/* ─── Mail wizard — OAuth providers (Pripojiť cez Google) ─────────── */
.ml-wiz-oauth {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.ml-wiz-oauth-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: all var(--d-1);
}
.ml-wiz-oauth-btn:hover {
  border-color: #f04e23;
  box-shadow: 0 3px 12px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.ml-wiz-oauth-btn svg { flex-shrink: 0; }
.ml-wiz-oauth-btn span { flex: 1; }
.ml-wiz-oauth-btn small {
  display: block;
  font-size: 11.5px;
  color: var(--fg-3);
  font-weight: 500;
  margin-top: 1px;
}
.ml-wiz-divider {
  position: relative;
  text-align: center;
  margin: 18px 0 14px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-4);
  font-weight: 600;
}
.ml-wiz-divider:before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.ml-wiz-divider span {
  position: relative;
  z-index: 1;
  background: var(--bg-1);
  padding: 0 14px;
}

/* ─── Mail wizard — Setup info banner (redirect URI) ─────────────── */
.ml-wiz-setup-info {
  margin-top: 12px;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--fg-2);
}
.ml-wiz-setup-info > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #b45309;
  user-select: none;
}
.ml-wiz-setup-info > summary::-webkit-details-marker { display: none; }
.ml-wiz-setup-info > summary i { color: #b45309; }
.ml-wiz-setup-info[open] > summary { margin-bottom: 10px; }

.ml-wiz-setup-body p {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-2);
}
.ml-wiz-setup-body p:last-child { margin-bottom: 0; }
.ml-wiz-setup-body code {
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11.5px;
  color: var(--fg);
}
.ml-wiz-setup-hint {
  font-size: 11.5px !important;
  color: var(--fg-3) !important;
  margin-top: 10px !important;
}

.ml-wiz-setup-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.ml-wiz-setup-copy code {
  flex: 1;
  background: transparent;
  padding: 0;
  font-size: 11.5px;
  word-break: break-all;
  color: var(--fg);
  user-select: all;
}
.ml-wiz-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #f04e23;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--d-1);
}
.ml-wiz-copy-btn:hover { background: #d9431d; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════════
   PROFIL — 2FA / PASSKEYS (Touch ID, Face ID, telefón cez QR)
   ═══════════════════════════════════════════════════════════════════════ */
.pr2fa-status {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: 12px;
  font-size: 13px; line-height: 1.5;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  background: var(--bg-2); color: var(--fg-3);
}
.pr2fa-status i { font-size: 15px; flex-shrink: 0; }
.pr2fa-status.is-on  { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.3);  color: #4ade80; }
.pr2fa-status.is-mid { background: rgba(74,118,74,.08);  border-color: rgba(74,118,74,.3);  color: var(--acc); }
.pr2fa-status.is-off { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.25); color: #fbbf24; }
:root[data-theme="light"] .pr2fa-status.is-on  { color: #15803d; }
:root[data-theme="light"] .pr2fa-status.is-mid { color: #3a5e3a; }
:root[data-theme="light"] .pr2fa-status.is-off { color: #b45309; }

.pr2fa-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); margin-bottom: 14px;
}
.pr2fa-toggle-title { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.pr2fa-toggle-sub { font-size: 12px; color: var(--fg-3); margin-top: 3px; line-height: 1.5; }

/* Prepínač */
.pr2fa-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.pr2fa-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.pr2fa-slider {
  position: absolute; inset: 0; border-radius: 13px;
  background: var(--bg-3); border: 1px solid var(--line-strong);
  transition: all var(--d-1);
}
.pr2fa-slider::before {
  content: ''; position: absolute; left: 3px; top: 50%;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fg-3); transform: translateY(-50%);
  transition: all var(--d-1);
}
.pr2fa-switch input:checked + .pr2fa-slider { background: var(--acc); border-color: var(--acc); }
.pr2fa-switch input:checked + .pr2fa-slider::before { left: 23px; background: #fff; }

.pr2fa-pwconfirm {
  padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid rgba(239,68,68,.3); border-radius: 12px;
  background: rgba(239,68,68,.06);
}
.pr2fa-pwconfirm-msg { font-size: 12.5px; color: #f87171; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
:root[data-theme="light"] .pr2fa-pwconfirm-msg { color: #b91c1c; }
.pr2fa-pwconfirm-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pr2fa-pwconfirm-row .pr-inp { max-width: 240px; }
.pr2fa-btn-danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #f87171; }
.pr2fa-btn-danger:hover { background: rgba(239,68,68,.2); }
:root[data-theme="light"] .pr2fa-btn-danger { color: #b91c1c; }

.pr2fa-list-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-3); margin: 18px 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.pr2fa-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.pr2fa-empty { padding: 18px; text-align: center; font-size: 12.5px; color: var(--fg-3); border: 1px dashed var(--line-strong); border-radius: 12px; }
.pr2fa-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); transition: all var(--d-1);
}
.pr2fa-item:hover { border-color: var(--line-strong); }
.pr2fa-item-ico {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(74,118,74,.12); color: var(--acc); font-size: 16px;
}
.pr2fa-item-info { flex: 1; min-width: 0; }
.pr2fa-item-name { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.pr2fa-item-meta { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }
.pr2fa-item-del {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--fg-3); font-size: 13px; cursor: pointer;
  transition: all var(--d-1);
}
.pr2fa-item-del:hover { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: #f87171; }

.pr2fa-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pr2fa-hint {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--fg-3);
}
.pr2fa-hint i { margin-top: 3px; color: var(--acc); }

@media (max-width: 640px) {
  .pr2fa-actions { flex-direction: column; }
  .pr2fa-actions .pr-btn { width: 100%; justify-content: center; }
  .pr2fa-toggle-row { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
   FAKTÚRY (sec-invoices) — POHODA integration UI
   ════════════════════════════════════════════════════════════════════ */
.inv-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  font-family: 'Inter', sans-serif;
}

/* Header */
.inv-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 20px; flex-wrap: wrap;
}
.inv-title {
  margin: 0; font-size: 26px; font-weight: 700; color: var(--fg);
  display: flex; align-items: center; gap: 10px;
}
.inv-title i { color: var(--acc); }
.inv-sub { display: block; font-size: 13px; color: var(--fg-3); margin-top: 4px; }
.inv-head-r { display: flex; gap: 8px; align-items: center; }

/* Buttons */
.inv-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 8px; color: var(--fg); font-size: 13.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all var(--d-1);
}
.inv-btn:hover { background: var(--bg-2); border-color: var(--acc); color: var(--acc); }
.inv-btn-primary {
  background: var(--acc); color: #fff; border-color: var(--acc);
  box-shadow: 0 3px 12px rgba(74,118,74,0.25);
}
.inv-btn-primary:hover { background: var(--acc-2,#3a5e3a); color: #fff; transform: translateY(-1px); }
.inv-btn-ghost { background: transparent; border: 0; padding: 8px 12px; color: var(--fg-3); cursor: pointer; }
.inv-btn-ghost:hover { background: var(--bg-2); color: var(--fg); border-radius: 6px; }
.inv-btn-icon {
  width: 32px; height: 32px; border: 0; background: transparent; border-radius: 6px;
  color: var(--fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.inv-btn-icon:hover { background: var(--bg-2); color: var(--fg); }
.inv-btn-icon-danger:hover { background: #fef2f2; color: #dc2626; }
.inv-btn-ai {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: #fff; border: 1px solid var(--acc);
  border-radius: 6px; color: var(--acc); font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all var(--d-1);
}
.inv-btn-ai:hover { background: var(--acc); color: #fff; transform: translateY(-1px); }
.inv-btn-ai:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.inv-bf-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 8px;
  background: #fff; color: var(--acc); border-radius: 11px;
  font-size: 11px; font-weight: 800; margin-left: 4px;
}

/* KPIs */
.inv-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.inv-kpi {
  padding: 16px 18px; background: var(--bg-1);
  border: 1px solid var(--line); border-radius: 12px;
}
.inv-kpi-val { font-size: 26px; font-weight: 800; color: var(--fg); line-height: 1.1; }
.inv-kpi-lbl { font-size: 12px; color: var(--fg-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.inv-kpi-err .inv-kpi-val { color: #dc2626; }
.inv-kpi-rev .inv-kpi-val { color: #10b981; }

/* Setup banner */
.inv-setup-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(74,118,74,0.08), rgba(74,118,74,0.02));
  border: 1px solid rgba(74,118,74,0.3); border-radius: 14px;
}
.inv-setup-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--acc); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  flex-shrink: 0;
}
.inv-setup-body { flex: 1; }
.inv-setup-body h3 { margin: 0 0 4px; font-size: 16px; color: var(--fg); }
.inv-setup-body p { margin: 0; color: var(--fg-2); font-size: 13.5px; line-height: 1.55; }

/* Tabs */
.inv-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line);
  margin-bottom: 16px; padding-bottom: 0; flex-wrap: wrap;
}
.inv-tab {
  padding: 10px 16px; background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 13px; font-weight: 600; color: var(--fg-3); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; transition: all var(--d-1);
}
.inv-tab:hover { color: var(--fg); }
.inv-tab.is-active { color: var(--acc); border-bottom-color: var(--acc); }
.inv-tab-c {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: var(--bg-2); color: var(--fg-3);
  border-radius: 9px; font-size: 10.5px; font-weight: 700;
}
.inv-tab.is-active .inv-tab-c { background: rgba(74,118,74,0.15); color: var(--acc); }
.inv-tab-r { margin-left: auto; }

/* List / table */
.inv-list { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.inv-table {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px;
}
.inv-table thead th {
  text-align: left; padding: 12px 16px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 700; color: var(--fg-3);
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.inv-table tbody td {
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
  color: var(--fg);
}
.inv-row { cursor: pointer; transition: background var(--d-1); }
.inv-row:hover { background: var(--bg-2); }

/* Status badges */
.inv-st {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.inv-st-pending  { background: rgba(245,158,11,0.15); color: #b45309; }
.inv-st-approved { background: rgba(14,165,233,0.15); color: #0369a1; }
.inv-st-sent     { background: rgba(16,185,129,0.15); color: #047857; }
.inv-st-cancelled{ background: rgba(148,163,184,0.2);  color: #475569; }
.inv-st-error    { background: rgba(220,38,38,0.15);  color: #b91c1c; }

.inv-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* Empty state */
.inv-empty {
  padding: 60px 20px; text-align: center; color: var(--fg-3);
}
.inv-empty i { font-size: 36px; display: block; margin-bottom: 12px; color: var(--fg-4); }
.inv-empty p { margin: 0 0 6px; }

/* Detail drawer */
.inv-drawer {
  position: fixed; top: 0; right: -680px; bottom: 0;
  width: 680px; max-width: 100vw;
  background: var(--bg-0); border-left: 1px solid var(--line);
  box-shadow: -8px 0 32px rgba(0,0,0,0.12);
  z-index: 9999;
  display: flex; flex-direction: column;
  transition: right 0.25s ease;
}
.inv-drawer.is-open { right: 0; }
.inv-drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.inv-drawer-title { flex: 1; font-size: 16px; font-weight: 700; color: var(--fg); }
.inv-drawer-actions { display: flex; gap: 6px; }
.inv-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }

.inv-det { display: flex; flex-direction: column; gap: 18px; }
.inv-det-sec { background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.inv-det-sec h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--fg); }
.inv-det-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.inv-det-lbl { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.inv-det-val { font-size: 13.5px; color: var(--fg); margin-top: 3px; font-weight: 500; }
.inv-det-err {
  padding: 12px 14px; background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; color: #991b1b; font-size: 13px;
  display: flex; gap: 8px; align-items: flex-start;
}
.inv-items { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.inv-items th, .inv-items td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.inv-items thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 700; color: var(--fg-3); background: var(--bg-2);
}
.inv-det-totals { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: 13.5px; }
.inv-det-totals > div { display: flex; gap: 16px; }
.inv-det-tot-big { font-size: 18px; font-weight: 800; color: var(--fg); padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; min-width: 200px; }

.inv-hist { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.inv-hist-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; color: var(--fg-2); }
.inv-hist-row i { width: 16px; text-align: center; color: var(--fg-3); }

/* Setup wizard */
.inv-wiz-bg {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15,23,42,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.inv-wiz {
  width: 100%; max-width: 720px; max-height: 90vh;
  background: var(--bg-1); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 72px rgba(0,0,0,0.35);
}
.inv-wiz-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.inv-wiz-head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 700; }
.inv-wiz-steps {
  display: flex; gap: 0; padding: 16px 24px;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.inv-wiz-step {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--fg-4);
  position: relative;
}
.inv-wiz-step:not(:last-child):after {
  content: ''; position: absolute; left: calc(100% - 24px); top: 50%;
  width: 32px; height: 1px; background: var(--line);
}
.inv-wiz-step span {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-3); color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.inv-wiz-step.is-active { color: var(--acc); }
.inv-wiz-step.is-active span { background: var(--acc); color: #fff; box-shadow: 0 0 0 4px rgba(74,118,74,0.12); }
.inv-wiz-step.is-done span { background: #10b981; color: #fff; }
.inv-wiz-step.is-done span:before { content: '✓'; }
.inv-wiz-step.is-done span:not(:empty) { font-size: 0; }
.inv-wiz-step.is-done span:after { content: ''; }

.inv-wiz-pane {
  display: none; padding: 22px 26px; overflow-y: auto; flex: 1;
}
.inv-wiz-pane.is-active { display: block; }
.inv-wiz-pane h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.inv-wiz-pane p { margin: 0 0 14px; color: var(--fg-2); font-size: 13.5px; line-height: 1.6; }
.inv-wiz-ol { padding-left: 22px; margin: 0 0 14px; color: var(--fg-2); font-size: 13.5px; line-height: 1.8; }
.inv-wiz-ol li { margin: 0; }
.inv-wiz-tip {
  display: flex; gap: 10px; padding: 12px 14px;
  background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25);
  border-radius: 10px; font-size: 12.5px; color: #713f12; line-height: 1.5;
  margin: 14px 0;
}
.inv-wiz-tip i { color: #b45309; margin-top: 2px; }

.inv-fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.inv-fld label { font-size: 12px; font-weight: 700; color: var(--fg-2); display: flex; align-items: center; gap: 6px; }
.inv-fld input,
.inv-fld textarea,
.inv-fld select {
  padding: 9px 12px; background: var(--bg-1);
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--fg); font-size: 13.5px; font-family: inherit;
  outline: 0; transition: border-color var(--d-1);
}
.inv-fld input:focus, .inv-fld textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(74,118,74,0.12); }
.inv-fld textarea { resize: vertical; min-height: 80px; }
.inv-fld-row { display: flex; gap: 12px; }
.inv-fld-hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-3); color: var(--fg-3);
  font-size: 9.5px; font-weight: 700; cursor: help;
}
.inv-fld-hint:hover { background: var(--acc); color: #fff; }

.inv-wiz-actions {
  display: flex; gap: 10px; justify-content: space-between;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
}

.inv-wiz-success, .inv-wiz-fail {
  padding: 22px 24px; border-radius: 12px; text-align: center;
}
.inv-wiz-success { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25); color: #065f46; }
.inv-wiz-success i { font-size: 38px; color: #10b981; display: block; margin-bottom: 8px; }
.inv-wiz-fail    { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; text-align: left; }
.inv-wiz-fail i  { font-size: 32px; color: #dc2626; display: block; margin-bottom: 8px; }
.inv-wiz-fail ul { margin: 10px 0 0; padding-left: 20px; font-size: 12.5px; }

.inv-wiz-done { text-align: center; padding: 20px 0; }
.inv-wiz-done i { font-size: 56px; color: #10b981; display: block; margin-bottom: 12px; }
.inv-wiz-done h2 { font-size: 22px; margin: 0 0 8px; color: var(--fg); }
.inv-wiz-done p { color: var(--fg-2); font-size: 14px; margin-bottom: 14px; }
.inv-wiz-done .inv-wiz-ol { text-align: left; max-width: 540px; margin: 0 auto; }

.inv-wiz-branding-list {
  display: flex; flex-direction: column; gap: 6px;
  margin: 14px 0; max-height: 200px; overflow-y: auto;
}
.inv-wiz-brand-row {
  display: grid; grid-template-columns: 1fr 1fr 80px 100px;
  gap: 10px; align-items: center;
  padding: 8px 12px; background: var(--bg-2); border-radius: 8px;
  font-size: 13px;
}

/* Branding panel (per-country) */
.inv-branding-panel {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px;
}
.inv-branding-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.inv-branding-head h2 { margin: 0; font-size: 18px; }
.inv-branding-hint { color: var(--fg-3); font-size: 13px; margin-bottom: 18px; }
.inv-branding-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.inv-brand-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.inv-brand-flag {
  display: flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 700; color: var(--fg);
}
.inv-brand-flag span { font-size: 13px; color: var(--fg-3); font-weight: 600; }
.inv-brand-logo {
  max-width: 100%; max-height: 60px; object-fit: contain;
  background: #fff; padding: 8px; border-radius: 6px;
}
.inv-brand-nologo {
  padding: 14px; background: var(--bg-3); border-radius: 6px;
  text-align: center; color: var(--fg-4); font-size: 12px; font-style: italic;
}
.inv-brand-info { font-size: 12.5px; color: var(--fg-2); display: flex; flex-direction: column; gap: 3px; }
.inv-brand-acts {
  position: absolute; top: 10px; right: 10px;
  display: flex; gap: 4px;
}

/* Tooltip (hover) */
.inv-tip {
  position: fixed; z-index: 100000;
  padding: 8px 12px; background: #1f2937; color: #fff;
  border-radius: 6px; font-size: 12px; max-width: 280px;
  line-height: 1.5; box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  pointer-events: none;
}
.inv-tip:before {
  content: ''; position: absolute; bottom: 100%; left: 16px;
  border: 5px solid transparent; border-bottom-color: #1f2937;
}

/* Responsive */
@media (max-width: 768px) {
  .inv-shell { padding: 14px; }
  .inv-drawer { width: 100%; }
  .inv-table { font-size: 12px; }
  .inv-table thead th, .inv-table tbody td { padding: 10px 8px; }
}

/* Backfill picker — výber domény z ktorej importovať */
.inv-bf-sites {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
}
.inv-bf-site {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: all var(--d-1);
}
.inv-bf-site:hover {
  background: var(--bg-1); border-color: var(--acc);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(74,118,74,0.12);
}
.inv-bf-site-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(74,118,74,0.1); color: var(--acc);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.inv-bf-site-body { min-width: 0; }
.inv-bf-site-name { font-size: 14px; font-weight: 700; color: var(--fg); }
.inv-bf-site-meta { font-size: 12px; color: var(--fg-3); margin-top: 2px; word-break: break-all; }
.inv-bf-site-count { text-align: right; }
.inv-bf-site-count strong { display: block; font-size: 20px; color: var(--acc); line-height: 1; }
.inv-bf-site-count span { font-size: 11px; color: var(--fg-3); }
.inv-bf-site-arrow { color: var(--fg-4); }

.inv-bf-divider {
  position: relative; text-align: center; margin: 14px 0;
  color: var(--fg-4); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.inv-bf-divider:before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--line); z-index: 0;
}
.inv-bf-divider span { position: relative; z-index: 1; background: var(--bg-1); padding: 0 12px; }

.inv-bf-all {
  width: 100%; justify-content: center; gap: 10px; padding: 12px 16px;
}
.inv-bf-all strong {
  background: rgba(255,255,255,0.2); padding: 2px 10px; border-radius: 999px;
  font-size: 12px;
}