/* === Anthropic Design Tokens === */
:root {
  --bg: #faf9f5;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f4ed;
  --bg-input: #f0eee6;
  --bg-modal: #ffffff;
  --bg-code: #f0eee6;
  --text: #141413;
  --text-secondary: #30302e;
  --text-muted: #87867f;
  --border: #d1cfc5;
  --border-focus: #d97757;
  --accent: #d97757;
  --accent-hover: #c46849;
  --accent-soft: rgba(217, 119, 87, 0.1);
  --danger: #bf4d43;
  --danger-soft: rgba(191, 77, 67, 0.12);
  --danger-hover: #a8413a;
  --success: #788c5d;
  --success-soft: rgba(120, 140, 93, 0.12);
  --info: #6a9bcc;
  --info-soft: rgba(106, 155, 204, 0.12);
  --shadow-sm: 0 1px 3px rgba(20, 20, 19, 0.04);
  --shadow-md: 0 4px 16px rgba(20, 20, 19, 0.06);
  --shadow-lg: 0 8px 32px rgba(20, 20, 19, 0.1);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --transition: 0.2s ease;
}

[data-theme="dark"] {
  --bg: #141413;
  --bg-card: #1f1e1d;
  --bg-card-hover: #262624;
  --bg-input: #30302e;
  --bg-modal: #1f1e1d;
  --bg-code: #262624;
  --text: #faf9f5;
  --text-secondary: #b0aea5;
  --text-muted: #73726c;
  --border: #3d3d3a;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Page-level horizontal clip. `overflow-x: clip` (not `hidden`) is deliberate:
   `hidden` would compute overflow-y to `auto` and make body a scroll container,
   which breaks the dashboard's many `position: sticky` elements. `clip` clips
   without establishing a scroll container, so sticky keeps working. This stops
   an installed (standalone) PWA from being draggable sideways when something
   overflows by a hair: Safari's rubber-band hides it, standalone does not. */
html, body { max-width: 100%; overflow-x: clip; }

/* Keep the iOS rubber-band bounce -- it looks good. The problem was only that
 * flinging past the TOP edge dragged the sticky chrome and exposed the darker
 * body background beside the (lighter) menu. We bleed the menu's own card
 * background (and its divider line) straight up above the sticky chrome via
 * .sidebar::before (wide layout) and .mobile-topbar::before (portrait), so the
 * overpull on the menu side stays the light menu colour, seam included.
 *
 * Only the TOP is handled this way. The bottom overscroll gutter can't be split
 * per-column: iOS paints it from a single canvas background COLOR (it ignores
 * background-image/gradients there) and absolutely-positioned bleed below the
 * content either adds stray scroll or gets clipped. So the bottom gutter stays
 * the dark content colour, which is the larger part of the page anyway. */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
  font-size: 15px;
  display: grid;
  grid-template-columns: 220px 1fr;
}

/* === Sidebar === */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  padding: 20px 14px;
  z-index: 90;
}
/* Bleed the sidebar's card background -- and its right-hand divider line --
 * straight up above itself, so the iOS rubber-band overpull at the TOP shows the
 * light menu colour and the seam continues, instead of the darker body bg the
 * dragged sticky column would otherwise expose. Off-screen except during the
 * bounce; absolute so it adds no scroll height; pointer-events:none so it never
 * eats taps. right:-1px reaches the border-box edge so the 1px border-right
 * lines up exactly with the sidebar's own divider. */
.sidebar::before {
  content: '';
  position: absolute;
  left: 0;
  right: -1px;
  bottom: 100%;
  height: 100vh;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  pointer-events: none;
}

/* === Mobile shell (hamburger + off-canvas sidebar) === */
/* On desktop the top bar and backdrop are hidden; the sidebar lives in the
 * body grid. On narrow screens the body collapses to one column, the sidebar
 * slides in off-canvas over a backdrop, and a fixed top bar carries the
 * hamburger -- without this the fixed 220px sidebar column pushed the content
 * off the right edge of a phone viewport. */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 768px) {
  body { grid-template-columns: 1fr; }
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 80;
    height: 52px;
    padding: 0 14px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
  }
  .mobile-topbar-title { font-weight: 600; font-size: 15px; }
  /* Same bleed for the portrait top bar: light card colour overpulls above it. */
  .mobile-topbar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 100vh;
    background: var(--bg-card);
    pointer-events: none;
  }
  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 85;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  main { max-width: 100%; padding: 16px 14px 48px; overflow-x: hidden; }
  .activity-list { grid-template-columns: 1fr; }
  .activity-tail { max-height: clamp(140px, 35vh, 320px); }
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 18px;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  overflow: hidden;
}
.sidebar-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.sidebar-brand-sub { font-size: 11px; color: var(--text-muted); }
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  flex: 1;
  overflow-y: auto;
  /* overflow-y:auto makes the browser compute overflow-x from `visible` to
   * `auto`, so a label that overran the column turned the nav into a sideways
   * scroller (landscape, where the notch inset squeezed the column). Pin it. */
  overflow-x: hidden;
  /* Keep a scroll gesture that starts in the menu inside the menu: without this
   * it chains to the document the moment the nav hits its top/bottom (or has
   * nothing to scroll), so "scrolling the menu" ends up scrolling the page. */
  overscroll-behavior: contain;
}
.sb-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition);
}
.sb-link svg { flex-shrink: 0; color: currentColor; }
/* min-width:0 lets a long label wrap inside the column instead of forcing the
 * link wider than the nav (which is what produced the landscape overflow);
 * overflow-wrap:anywhere lets even a single long word (e.g. "Dokumentáció", or
 * any label at a large system text size) break onto a second line rather than
 * spill past the edge or get clipped. */
.sb-link .sb-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sb-link:hover { color: var(--text); background: var(--accent-soft); }
.sb-link.active { color: var(--text); background: var(--accent-soft); }
.sb-link.active svg { color: var(--accent); }
.sb-badge { margin-left: auto; }
.sidebar-footer {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-start;
}

/* === Header === */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.logo svg { color: var(--accent); }

nav { display: flex; gap: 4px; }

.nav-link {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--transition);
}
.nav-link:hover { color: var(--text); background: var(--accent-soft); }
.nav-link.active { color: var(--accent); background: var(--accent-soft); }

.updates-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: #e53e3e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}
.updates-badge[hidden] { display: none; }

.updates-summary {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--bg-input);
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.6;
}
.updates-summary.behind {
  border-left: 4px solid var(--accent);
}
.updates-summary.up-to-date {
  border-left: 4px solid #22c55e;
}
.updates-summary.error {
  border-left: 4px solid #e53e3e;
}
.updates-summary code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
}

.updates-commits { margin-top: 20px; }
.updates-commit-list { display: flex; flex-direction: column; gap: 8px; }
.updates-commit {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.updates-commit-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
}
.updates-commit-msg { font-size: 14px; color: var(--text); }

.team-graph {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
}
.team-level {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.team-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 160px;
  max-width: 220px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition);
}
.team-node:hover { border-color: var(--accent); transform: translateY(-1px); }
.team-node.main { background: var(--accent-soft); border-color: var(--accent); }
.team-node.leader { border-color: var(--accent); }
.team-node-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--bg-input);
}
.team-node-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-node-name { font-weight: 600; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.team-node-meta { font-size: 12px; color: var(--text-muted); }
.team-connector {
  width: 2px;
  height: 16px;
  background: var(--border);
}
/* Nested tree: a subtree is a column (manager on top, its reports beneath),
   so reports always sit directly under their own manager. */
.team-subtree {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team-children {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}
.team-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }

[data-theme="light"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }

/* === Main === */
main {
  max-width: 1200px;
  padding: 32px 32px 64px;
  width: 100%;
  /* main is the 1fr grid track; a grid item's default minimum size is its
   * content's min-content, so wide cards (e.g. schedule rows with badges +
   * action buttons) inflate the track and push the whole layout past the
   * viewport -- everything on the right clips. This was masked in portrait,
   * where main gets overflow-x:hidden (a scroll container's min size is 0).
   * min-width:0 gives the wide/landscape layout the same freedom: the track
   * follows 1fr and the flex cards shrink to fit instead of overflowing. */
  min-width: 0;
}

.page-header { margin-bottom: 32px; }
.page-header h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.subtitle { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

/* === Overview page === */
.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.overview-stat {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: border-color var(--transition);
}
.overview-stat:hover { border-color: var(--accent); }
.overview-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.overview-stat-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.overview-stat-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.overview-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
}
@media (max-width: 1000px) {
  .overview-grid { grid-template-columns: 1fr; }
}
.overview-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.overview-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.overview-card-head h3 { font-size: 16px; font-weight: 600; }
.overview-card-meta { font-size: 12px; color: var(--text-muted); }

.overview-team-graph {
  padding: 12px 0;
  gap: 14px;
}
.overview-team-graph .team-node {
  min-width: 120px;
  max-width: 160px;
  padding: 8px 10px;
}
.overview-team-graph .team-node-avatar { width: 40px; height: 40px; }
.overview-team-graph .team-node-name { font-size: 13px; }
.overview-team-graph .team-node-meta { font-size: 11px; }
.overview-agent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--transition);
}
.overview-agent:hover { border-color: var(--accent); }
.overview-agent.main { background: var(--accent-soft); }
.overview-agent-avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--bg-input);
  overflow: hidden;
  flex-shrink: 0;
}
.overview-agent-avatar img { width: 100%; height: 100%; object-fit: cover; }
.overview-agent-name { font-weight: 600; font-size: 13px; line-height: 1.2; }
.overview-agent-status { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.overview-agent-status .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 4px;
  vertical-align: middle;
}
.overview-agent-status.stopped .dot { background: #a0a0a0; }

.overview-activity {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.overview-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
}
.overview-activity-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.overview-activity-body { flex: 1; }
.overview-activity-title { color: var(--text); line-height: 1.4; }
.overview-activity-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* === Kanban Board === */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  min-height: calc(100vh - 160px);
}
/* Both the flat board and the swimlane board carry .kanban-board; an
   explicit [hidden] override is required because the unconditional
   `display: grid` above otherwise wins the cascade over the UA [hidden]
   default (equal specificity, later source order). */
.kanban-board[hidden] { display: none; }

.kanban-col {
  background: var(--bg-input);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.kanban-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  position: sticky;
  top: 0;
}
.kanban-col-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.kanban-col-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
  border: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}

/* WIP limit badge states — colour applied via inline style from JS */
.kanban-col-count[data-wip="warn"] { background: color-mix(in oklch, currentColor 10%, var(--bg-card)); }
.kanban-col-count[data-wip="full"] { background: color-mix(in oklch, currentColor 10%, var(--bg-card)); animation: wip-pulse-mild 2.4s ease-in-out infinite; }
.kanban-col-count[data-wip="over"] { background: color-mix(in oklch, currentColor 12%, var(--bg-card)); animation: wip-pulse-strong 1.6s ease-in-out infinite; transform: scale(1.1); }

@keyframes wip-pulse-mild {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes wip-pulse-strong {
  0%, 100% { opacity: 1; transform: scale(1.1); }
  50% { opacity: 0.4; transform: scale(1.1); }
}
.kanban-add-btn {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  line-height: 1;
}
.kanban-add-btn:hover { background: var(--accent-soft); color: var(--accent); }

.kanban-col-body {
  flex: 1;
  padding: 4px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}
.kanban-col-body.drag-over {
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}

/* === Kanban Card === */
.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: grab;
  transition: all var(--transition);
  user-select: none;
  position: relative;
}
.kanban-card-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.kanban-card:hover .kanban-card-actions {
  opacity: 1;
}
.card-breakdown-btn {
  background: color-mix(in oklch, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: 5px;
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 3px 5px;
  transition: background 0.15s;
}
.card-breakdown-btn:hover {
  background: color-mix(in oklch, var(--accent) 25%, transparent);
}
.card-breakdown-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kanban-subtask-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
  padding: 1px 7px;
  border-radius: 10px;
  cursor: pointer;
}
.kanban-subtask-badge:hover {
  background: color-mix(in oklch, var(--accent) 20%, transparent);
}

/* Embedded subtasks — rendered inside the parent card when same column */
.kanban-embedded-subtasks {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kanban-embedded-subtask {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.3;
}
.kanban-embedded-subtask:hover {
  border-color: var(--accent);
  background: var(--bg-input);
}
.kanban-embedded-seq {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.kanban-embedded-assignee {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.kanban-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.kanban-card.dragging {
  opacity: 0.4;
  transform: rotate(2deg);
}
.kanban-card-project {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.kanban-card-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.3;
}

.kanban-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.kanban-card-assignee {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}
.assignee-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.assignee-dot.owner { background: var(--accent); }
.assignee-dot.bot { background: var(--info); }
.assignee-dot.agent { background: var(--success); }
.assignee-dot.unknown { background: var(--text-muted); }

.kanban-card-due {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
}
.kanban-card-due.overdue { color: var(--danger); font-weight: 600; }

.kanban-card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.kanban-card-label-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  color: var(--label-color);
  background: color-mix(in srgb, var(--label-color) 16%, transparent);
  cursor: pointer;
  line-height: 1.5;
}
.kanban-card-label-pill:hover { filter: brightness(1.15); }
.kanban-card-label-overflow {
  color: var(--text-muted);
  background: var(--bg);
  cursor: default;
}
.kanban-card-label-overflow:hover { filter: none; }

/* Archived cards: same card look as the board, laid out in a responsive grid */
.archived-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.archived-card {
  cursor: pointer;
}
.archived-card:active { cursor: pointer; }
.archived-prio-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 8px;
  color: var(--prio-color);
  background: color-mix(in srgb, var(--prio-color) 16%, transparent);
  line-height: 1.5;
}
.archived-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.archived-date {
  font-size: 11px;
  color: var(--text-muted);
}

.kanban-quick-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 12px;
  /* Inactive chips already carry their label's own colour (border + text +
     faint tint), so the header filter row visually matches the per-card label
     pills on the board; the active state below fills solid. */
  border: 1px solid var(--chip-color);
  color: var(--chip-color);
  background: color-mix(in srgb, var(--chip-color) 12%, var(--bg-card));
  cursor: pointer;
  user-select: none;
}
.kanban-quick-filter-chip:hover { border-color: var(--chip-color); }
.kanban-quick-filter-chip.active {
  color: white;
  background: var(--chip-color);
  border-color: var(--chip-color);
}
.kanban-quick-filter-count {
  font-size: 10px;
  opacity: 0.85;
}
.kanban-quick-filter-clear {
  margin-left: 2px;
  font-weight: 700;
}
.kanban-quick-filter-clear-all {
  font-size: 12px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.priority-bar {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 0;
}
.kanban-card {
  position: relative;
  overflow: hidden;
}
.kanban-card[data-priority="urgent"] { border-left: 3px solid var(--danger); }
.kanban-card[data-priority="high"] { border-left: 3px solid var(--accent); }
.kanban-card[data-priority="normal"] { border-left: 3px solid transparent; }
.kanban-card[data-priority="low"] { border-left: 3px solid var(--border); }

/* Card aging: left stripe overrides priority border when card is stale.
   Colour is set as --card-aging-color via inline style by JS. */
.kanban-card[data-aging] { border-left: 3px solid var(--card-aging-color); }

/* Aging badge: hourglass + day/hour counter, top-right (left of the ⚡ action) */
.kanban-card-aging-badge {
  position: absolute;
  top: 6px;
  right: 28px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes aging-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.kanban-card-aging-badge.kanban-card-aging-critical {
  animation: aging-pulse 2.2s ease-in-out infinite;
}

/* === Kanban Swimlanes === */
.kanban-swimlane-board {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.kanban-swimlane {
  border-bottom: 2px dashed var(--border);
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.kanban-swimlane:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.kanban-swimlane-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  background: var(--bg);
}
.kanban-swimlane-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.kanban-swimlane-avatar.owner { background: var(--accent); }
.kanban-swimlane-avatar.bot { background: var(--info); }
.kanban-swimlane-avatar.agent { background: var(--success); }
.kanban-swimlane-avatar.unknown { background: var(--text-muted); }
.kanban-swimlane-avatar.priority-urgent { background: var(--danger); }
.kanban-swimlane-avatar.priority-high { background: var(--accent); }
.kanban-swimlane-avatar.priority-normal { background: var(--text-muted); }
.kanban-swimlane-avatar.priority-low { background: var(--border); }
.kanban-swimlane-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-right: auto;
}
.kanban-swimlane-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
.kanban-swimlane-toggle {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.kanban-swimlane-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.kanban-swimlane-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.kanban-swimlane.collapsed .kanban-swimlane-body { display: none; }
.kanban-swimlane-col {
  background: var(--bg-input);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 60px;
}
.kanban-swimlane-col-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  padding: 8px 12px 4px;
}
.kanban-swimlane-col-body {
  flex: 1;
  min-height: 40px;
}

/* === Card detail === */
.card-detail-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.card-detail-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  white-space: pre-wrap;
}
.card-detail-desc:empty { display: none; }

.card-detail-labels { margin-bottom: 20px; }
.card-detail-labels h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.label-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
}
.label-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--label-color);
  background: color-mix(in srgb, var(--label-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--label-color) 40%, transparent);
}
.label-pill-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
}
.label-pill-remove:hover { opacity: 1; }
.label-color-swatches { display: flex; gap: 4px; }
.label-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}
.label-color-swatch.selected { border-color: var(--text); }

.card-detail-comments { margin-bottom: 20px; }
.card-detail-comments h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.comment-item {
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-soft, #3b82f633);
}
.comment-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2px;
}
.comment-date {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 8px;
  font-weight: 400;
}
.comment-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  white-space: pre-wrap;
}

.comment-form textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  resize: vertical;
  transition: all var(--transition);
}
.comment-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.comment-author-select {
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}

.form-row {
  display: flex;
  gap: 12px;
}
.form-half { flex: 1; }

/* === Page switching === */
.page[hidden] { display: none; }
#kanbanPage { max-width: none; }
/* Full-width layout for the kanban board (overrides main's 1200px cap) */
main.kanban-active { max-width: none; padding-left: 16px; padding-right: 16px; }

.page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  /* On a narrow (landscape phone) main, let the action cluster drop below the
   * title instead of overflowing the right edge. No-op on desktop, where there
   * is room for one row. */
  flex-wrap: wrap;
}

/* === Agent Grid === */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* === Agent Card === */
.agent-card {
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition);
  min-height: 180px;
}
.agent-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.agent-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.agent-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}
.agent-avatar.gradient-1 { background: linear-gradient(135deg, rgba(217,119,87,0.15), rgba(217,119,87,0.35)); }
.agent-avatar.gradient-2 { background: linear-gradient(135deg, rgba(106,155,204,0.15), rgba(106,155,204,0.35)); color: var(--info); }
.agent-avatar.gradient-3 { background: linear-gradient(135deg, rgba(120,140,93,0.15), rgba(120,140,93,0.35)); color: var(--success); }
.agent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-card-info {
  flex: 1;
  min-width: 0;
}

.agent-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-desc {
  font-size: 13px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.agent-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.agent-model-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--bg-input);
  color: var(--text-muted);
}
.agent-model-badge.opus { background: rgba(217,119,87,0.12); color: var(--accent); }
.agent-model-badge.sonnet { background: var(--info-soft); color: var(--info); }
.agent-model-badge.haiku { background: var(--success-soft); color: var(--success); }

/* === Per-agent tmux attach copy buttons (running agents only) === */
.agent-tmux-cmds {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.tmux-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tmux-copy-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.tmux-copy-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.tmux-copy-btn.copied {
  color: var(--success);
  border-color: var(--success);
}
.tmux-copy-ico {
  font-size: 12px;
  line-height: 1;
}

.titan-card { border-left: 3px solid var(--accent); }
.titan-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

/* === Telegram status dot === */
.tg-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}
.tg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.tg-dot.connected { background: var(--success); }
.tg-dot.disconnected { background: var(--text-muted); }

/* === Process status === */
.process-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
}
.process-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.process-dot.running {
  background: var(--success);
  box-shadow: 0 0 6px rgba(120, 140, 93, 0.6);
  animation: pulse-dot 2s ease-in-out infinite;
}
.process-dot.stopped { background: var(--text-muted); }
.process-dot.restarting {
  background: var(--warning, #d4a52c);
  box-shadow: 0 0 6px rgba(212, 165, 44, 0.6);
  animation: pulse-dot 1s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.agent-process-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--bg-input);
  border-radius: var(--radius);
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.process-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.process-uptime {
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
}
.process-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* === Add Card === */
.add-card {
  border: 2px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-family: inherit;
}
.add-card:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.add-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.add-card:hover .add-icon { background: var(--accent-soft); }

/* === Wizard === */
.wizard-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.wizard-step {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background var(--transition);
}
.wizard-step.active { background: var(--accent); }
.wizard-step.done { background: var(--success); }

.wizard-panel[hidden] { display: none; }

.wizard-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.wizard-spinner-wrap {
  margin-bottom: 20px;
}
.wizard-spin {
  width: 36px;
  height: 36px;
  border-width: 3px;
  border-color: var(--border);
  border-top-color: var(--accent);
}
.wizard-gen-status {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.wizard-gen-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.wizard-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}
.wizard-actions .btn-secondary { width: auto; }

.code-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.code-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* === Agent Detail Modal ===
   Needs a compound selector (`.modal.modal-agent-detail`) to outrank
   the later `.modal { max-width: 480px; }` rule below -- otherwise
   source order wins and the detail modal stays at 480px. */
.modal.modal-agent-detail {
  max-width: 900px;
}
/* At narrower widths, the five-tab nav still wouldn't fit -- tighten
   the tab paddings so everything stays on one row. The outer modal
   padding also drops a bit so the tab row actually has room. */
.modal.modal-agent-detail .tab-nav { padding: 0 16px; }
.modal.modal-agent-detail .tab-btn { padding: 12px 10px; }

/* === Tab Navigation === */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  padding: 0 24px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab-btn {
  padding: 12px 16px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel { padding: 0 24px 24px; }
.tab-panel[hidden] { display: none; }

/* === Agent Overview === */
.agent-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}
.agent-overview-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}

/* === Agent Settings === */
.agent-save-section {
  margin-top: 8px;
  margin-bottom: 20px;
}

/* === Telegram Tab === */
.tg-instructions {
  margin-bottom: 20px;
}
.tg-instructions h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}
.tg-instructions ol {
  padding-left: 20px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
}
.tg-instructions code {
  background: var(--bg-code);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

.tg-connected-info {
  margin-bottom: 20px;
}
.tg-bot-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
}
.tg-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(217, 119, 87, 0.08);
  border: 1px solid rgba(217, 119, 87, 0.2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.tg-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.tg-notice code {
  background: var(--bg-code);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}
.tg-notice-ok {
  background: rgba(120, 140, 93, 0.08);
  border-color: rgba(120, 140, 93, 0.2);
}
.tg-notice-ok svg { color: var(--success); }
.tg-notice-warn {
  background: rgba(200, 140, 40, 0.08);
  border-color: rgba(200, 140, 40, 0.3);
}
.tg-notice-warn svg { color: #c88c28; }

.tg-pairing-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.tg-pairing-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.tg-pairing-info {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.tg-pending-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tg-pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.tg-pending-code {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-weight: 600;
  color: var(--accent);
}
.tg-pending-sender {
  color: var(--text-muted);
  font-size: 12px;
}

.tg-connected-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.tg-allowed-section {
  margin-top: 16px;
}
.tg-allowed-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.tg-allowed-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
  font-style: italic;
}
.tg-allowed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.tg-allowed-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tg-allowed-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.15);
  color: rgb(70, 140, 240);
  text-transform: uppercase;
}
.tg-allowed-kind-group {
  background: rgba(0, 168, 132, 0.15);
  color: rgb(40, 170, 130);
}
.tg-allowed-id {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 12px;
  color: var(--text);
}
.btn-icon-danger {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}
.btn-icon-danger:hover {
  background: rgba(220, 60, 70, 0.1);
  color: rgb(230, 90, 100);
  border-color: rgba(220, 60, 70, 0.3);
}

/* === Skills Tab === */
.skill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.skill-header h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.skill-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.skill-item:hover {
  background: var(--bg-card-hover);
}
.skill-item-info {
  flex: 1;
  min-width: 0;
}
.skill-item-name {
  font-size: 14px;
  font-weight: 500;
}
.skill-item-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  background: var(--info-soft);
  color: var(--info);
}
.skill-item-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.skill-item-actions {
  flex-shrink: 0;
  margin-left: 12px;
}

.skill-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 14px;
}

.skill-create-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.skill-tab-btn {
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}
.skill-tab-btn:hover { color: var(--text); }
.skill-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.skill-tab-panel[hidden] { display: none; }

.file-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 24px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  color: var(--text-muted);
}
.file-upload-area:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.file-upload-area p { font-size: 14px; }
.file-upload-area .hint { font-size: 12px; margin-top: 4px; }

/* === Agent detail bottom === */
.agent-detail-bottom {
  margin: 0 24px;
  padding-top: 16px;
  padding-bottom: 8px;
}

/* === Modal === */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 19, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.modal {
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s ease;
}
.modal-overlay.active .modal { transform: translateY(0) scale(1); }

.modal-wide { max-width: 640px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.modal-close:hover { background: var(--danger); color: white; }

.modal-body { padding: 24px; }

/* === Avatar Gallery === */
.avatar-gallery { margin-bottom: 20px; }
.form-label-sm {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-secondary);
}
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.avatar-grid-item {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--transition);
  background: var(--bg-input);
}
.avatar-grid-item:hover {
  border-color: var(--accent);
  transform: scale(1.05);
}
.avatar-grid-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.avatar-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.avatar-change-btn {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg-modal);
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}
.avatar-change-btn:hover { background: var(--accent-hover); }

.detail-avatar-gallery {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-input);
  border-radius: var(--radius);
}

.avatar-upload-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: var(--text-muted);
  font-size: 12px;
}
.avatar-upload-divider::before,
.avatar-upload-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.avatar-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.avatar-upload-zone:hover,
.avatar-upload-zone.drag-over {
  border-color: var(--accent);
  background: rgba(217,119,87,0.05);
}
.avatar-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}
.avatar-upload-preview {
  position: relative;
  display: inline-block;
}
/* The plain class rules above (display:flex/inline-block) outrank the UA
   [hidden]{display:none}, so toggling the `hidden` attribute had no effect.
   Re-assert it with attribute+class specificity for both upload zones. */
.avatar-upload-content[hidden],
.avatar-upload-preview[hidden] {
  display: none;
}
.avatar-upload-preview img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-preview-clear {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Form === */
.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-secondary);
}
.hint { font-weight: 400; color: var(--text-muted); }

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: all var(--transition);
  outline: none;
}
/* Checkbox/radio inputs must not inherit the width:100% + padding meant for
   text fields -- inside a flex label that stretches the box to full width and
   shoves the adjacent label text out past the modal's right edge ("content
   sticking out of the modal" bug, e.g. the agent-detail Csapat tab). */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group textarea { resize: vertical; }

/* === Buttons === */
.btn-primary {
  width: 100%;
  padding: 12px;
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 8px;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 10px 20px;
  font-size: 14px;
  margin-top: 0;
  white-space: nowrap;
}

.btn-secondary {
  padding: 10px 20px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-muted);
}

.btn-danger {
  padding: 10px 20px;
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-danger:hover { background: var(--danger); color: white; }

/* === Detail === */
.detail-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.detail-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
}
.detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-info h3 { font-size: 18px; font-weight: 600; }
.detail-info p { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

.detail-section { margin-bottom: 24px; }
.detail-section h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}

.detail-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* === Spinner === */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
[data-theme="dark"] .btn-primary .spinner {
  border-color: rgba(20,20,19,0.3);
  border-top-color: #141413;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Toast === */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 12px 24px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s ease;
  z-index: 1100;
  white-space: nowrap;
}
.toast.visible { transform: translateX(-50%) translateY(0); }

/* === Tasks === */
.tasks-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}
.tasks-empty svg { margin-bottom: 16px; opacity: 0.4; }
.tasks-empty p { font-size: 15px; }
.text-muted { font-size: 13px !important; margin-top: 4px; }

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}
.task-row:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.task-status { flex-shrink: 0; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-active {
  background: var(--success-soft);
  color: var(--success);
}
.badge-paused {
  background: rgba(217, 119, 87, 0.12);
  color: var(--accent);
}
.badge-heartbeat {
  background: rgba(200, 80, 120, 0.12);
  color: #c85078;
}

.task-info {
  flex: 1;
  min-width: 0;
}

.task-prompt {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.task-schedule {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-schedule-cron {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.task-next {
  color: var(--text-muted);
}

.task-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition);
}
.task-row:hover .task-actions { opacity: 1; }

.btn-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-secondary);
}
.btn-icon:hover { background: var(--accent-soft); color: var(--accent); }
.btn-icon-danger:hover { background: rgba(191, 77, 67, 0.1); color: var(--danger); }

/* === Task detail === */
.task-detail-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.meta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.meta-value {
  font-size: 13px;
  color: var(--text-secondary);
}
.meta-value-editable {
  cursor: pointer;
  border-bottom: 1px dashed var(--border);
}
.meta-value-editable:hover {
  color: var(--text);
}
.meta-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.meta-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-elevated, rgba(255, 165, 0, 0.15));
  border: 1px solid var(--border, rgba(255, 165, 0, 0.4));
  border-radius: 4px;
}
.meta-badge[hidden] { display: none; }

.task-detail-result {
  margin-bottom: 20px;
}
.task-detail-result label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.task-detail-result .code-block {
  max-height: 200px;
  overflow-y: auto;
}

.task-detail-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.task-detail-buttons .btn-primary { width: auto; }

/* === Checkbox === */
.form-check {
  margin-bottom: 18px;
}
.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-secondary);
}
.check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* === Memory page === */
/* === Memory Stats === */
.mem-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 100px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.2;
}
.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* === Memory Toolbar === */
.mem-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.mem-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.mem-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.mem-search {
  width: 100%;
  padding: 10px 14px 10px 40px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: all var(--transition);
}
.mem-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.mem-agent-filter {
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}
.mem-search-mode {
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}

/* === Memory Tabs === */
.mem-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.mem-tab {
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}
.mem-tab:hover { color: var(--text); }
.mem-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.mem-tier-view[hidden], .mem-log-view[hidden], .mem-graph-view[hidden] { display: none; }

/* === Memory Graph === */
.mem-graph-view {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  height: 600px;
}
#memGraphCanvas {
  width: 100%;
  height: 100%;
  cursor: grab;
}
#memGraphCanvas:active { cursor: grabbing; }
.graph-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
}
.graph-empty[hidden] { display: none; }

/* === Graph Detail Panel === */
.graph-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 300px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 10;
  padding: 16px;
  animation: graphPanelIn 0.18s ease;
}
.graph-panel[hidden] { display: none; }
@keyframes graphPanelIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
.graph-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.graph-panel-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all var(--transition);
}
.graph-panel-close:hover {
  color: var(--text);
  background: var(--bg-input);
}
.graph-panel-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 12px;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}
.graph-panel-agent {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}
.graph-panel-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.graph-panel-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.graph-panel-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Graph zoom indicator */
.graph-zoom-indicator {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.graph-zoom-indicator.visible { opacity: 1; }

/* Graph controls hint */
.graph-controls-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 10px;
  color: var(--text-muted);
  z-index: 5;
  line-height: 1.6;
  opacity: 0.7;
  pointer-events: none;
}

/* === Tier Badges === */
.badge-hot { background: rgba(220, 60, 60, 0.12); color: #dc3c3c; }
.badge-warm { background: rgba(217, 119, 87, 0.12); color: var(--accent); }
.badge-cold { background: var(--info-soft); color: var(--info); }
.badge-shared { background: rgba(200, 180, 100, 0.18); color: #9a8a30; }

.mem-agent-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 7px;
  border-radius: 4px;
  margin-left: 4px;
}

.mem-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.mem-keyword-tag {
  font-size: 10px;
  padding: 1px 7px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

/* === Memory List === */
.mem-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mem-item {
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
}
.mem-item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.mem-item.expanded .mem-content-full { display: block; }
.mem-item.expanded .mem-content-short { display: none; }

.mem-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.mem-date {
  font-size: 11px;
  color: var(--text-muted);
}

.mem-salience {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

.mem-content-short,
.mem-content-full {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.mem-content-short {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mem-content-full {
  display: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.mem-item-footer {
  display: none;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.mem-item.expanded .mem-item-footer { display: flex; }

.mem-empty, .log-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

/* === Daily Log === */
.log-date-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}
.log-current-date {
  font-size: 16px;
  font-weight: 600;
  min-width: 140px;
  text-align: center;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-icon:hover {
  background: var(--bg-input);
  border-color: var(--accent);
  color: var(--accent);
}

.log-entries {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.log-entry {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.log-entry-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  white-space: nowrap;
  padding-top: 2px;
}
.log-entry-content {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
  flex: 1;
}

/* === Schedule View Toggle === */
.schedule-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}
.view-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.view-btn:hover { color: var(--text); border-color: var(--accent); }
.view-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.schedule-view[hidden] { display: none; }

/* === Schedule List === */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pending-retries-banner {
  margin-bottom: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid #e5a43a;
  border-radius: var(--radius);
}
.pending-retries-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pending-retries-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.pending-retries-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.pending-retries-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pending-retry-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
}
.pending-retry-info { flex: 1; min-width: 0; }
.pending-retry-title {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pending-retry-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.schedule-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 4px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.schedule-section:first-child { margin-top: 4px; }
.schedule-section-icon { font-size: 13px; }
.schedule-section-count {
  background: var(--bg-input);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
}
.schedule-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}
.schedule-row:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.schedule-agent-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--accent-soft);
}
.schedule-agent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.schedule-info {
  flex: 1;
  min-width: 0;
}
.schedule-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.schedule-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.schedule-cron {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.schedule-agent-name {
  color: var(--accent);
  font-weight: 500;
}

.schedule-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition);
}
.schedule-row:hover .schedule-actions { opacity: 1; }
/* Touch devices have no hover, so the reveal-on-hover would leave the actions
 * permanently invisible (e.g. a landscape phone, which is wider than the 640px
 * mobile tweak). Show them whenever the pointer can't hover. */
@media (hover: none) { .schedule-actions { opacity: 1; } }

.schedule-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}
.schedule-empty svg { margin-bottom: 16px; opacity: 0.4; }

/* === Prompt Expand === */
.prompt-expand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.expand-questions {
  margin-top: 12px;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg-input);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.expand-questions[hidden] { display: none; }
.expand-questions:not([hidden]) { display: flex; }
.expand-question {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.expand-question-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.expand-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.expand-option {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}
.expand-option:hover { border-color: var(--accent); color: var(--accent); }
.expand-option.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.expand-apply-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* === Timeline View === */
.timeline-header {
  position: sticky;
  top: 64px;
  z-index: 5;
  background: var(--bg);
  padding-bottom: 8px;
}
.timeline-hours {
  display: flex;
  height: 32px;
  border-bottom: 1px solid var(--border);
  margin-left: 100px;
}
.timeline-hour {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  border-left: 1px solid var(--border);
  padding-top: 8px;
  min-width: 0;
}
.timeline-hour:first-child { border-left: none; }

.timeline-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.timeline-row {
  display: flex;
  align-items: center;
  height: 44px;
  position: relative;
}

.timeline-agent {
  width: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-right: 10px;
}
.timeline-agent-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--accent-soft);
}
.timeline-agent-avatar img { width: 100%; height: 100%; object-fit: cover; }
.timeline-agent-name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-track {
  flex: 1;
  height: 100%;
  position: relative;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  overflow: visible;
}

.timeline-marker {
  position: absolute;
  top: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid var(--accent);
  background: var(--bg-card);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  z-index: 2;
}
.timeline-marker:hover {
  transform: scale(1.2);
  z-index: 100;
  box-shadow: 0 0 12px var(--accent-soft);
}
.timeline-marker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.timeline-marker.disabled {
  border-color: var(--text-muted);
  opacity: 0.5;
}

.timeline-marker-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--text);
  color: var(--bg);
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}
.timeline-marker-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
}
.timeline-marker:hover .timeline-marker-tooltip { display: block; z-index: 101; }

.timeline-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--danger);
  pointer-events: none;
  z-index: 5;
  pointer-events: none;
}
.timeline-now::before {
  content: 'most';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--danger);
  font-weight: 600;
  white-space: nowrap;
}

/* === Week View === */
.week-grid {
  display: flex;
  gap: 4px;
  min-height: 300px;
}
.week-day {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  flex: 0 0 48px;
  overflow: hidden;
  cursor: pointer;
  transition: flex var(--transition), border-color var(--transition);
}
.week-day.week-day-expanded {
  flex: 1 1 auto;
  cursor: default;
  min-width: 200px;
}
.week-day:not(.week-day-expanded):hover {
  border-color: var(--accent);
}
.week-day-today {
  border-color: var(--accent);
}
.week-day-header {
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.week-day-expanded .week-day-header {
  padding: 10px 14px;
  font-size: 12px;
}
.week-day-today .week-day-header {
  color: var(--accent);
  background: var(--accent-soft);
}
.week-day-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  flex: 1;
}
.week-day-expanded .week-day-count { display: none; }
.week-day-count-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.week-day-today .week-day-count-num {
  background: var(--accent-soft);
  color: var(--accent);
}
.week-day-tasks {
  display: none;
  flex: 1;
  position: relative;
  min-height: 400px;
}
.week-day-expanded .week-day-tasks { display: block; }

/* Hour grid lines inside expanded day */
.week-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  opacity: 0.4;
}
.week-hour-label {
  position: absolute;
  left: 4px;
  font-size: 9px;
  color: var(--text-muted);
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
}

.week-day-empty {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  min-height: 400px;
}
.week-day-expanded .week-day-empty { display: flex; }

.week-task-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 2;
  min-height: 36px;
  box-shadow: var(--shadow-sm);
}
.week-task-card:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  z-index: 10;
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}
.week-task-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.week-task-avatar img { width: 100%; height: 100%; object-fit: cover; }
.week-task-info { min-width: 0; flex: 1; }
.week-task-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
}
.week-task-name {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .week-grid { flex-direction: column; }
  .week-day { flex: 0 0 auto !important; min-width: 0 !important; }
  .week-day-expanded { min-width: 0 !important; }
}

/* === Recall / Napló Page === */
.recall-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.recall-search-wrap {
  flex: 2;
  min-width: 200px;
  position: relative;
}
.recall-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.recall-search {
  width: 100%;
  padding: 10px 14px 10px 40px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.recall-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.recall-date-wrap {
  position: relative;
  flex-shrink: 0;
}
.recall-date-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.recall-date {
  padding: 9px 12px 9px 34px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  width: 170px;
  transition: border-color var(--transition), box-shadow var(--transition);
  color-scheme: dark;
}
.recall-date:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.recall-expr {
  flex: 1;
  min-width: 160px;
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.recall-expr:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.recall-expr::placeholder,
.recall-search::placeholder {
  color: var(--text-muted);
}
.recall-agent-filter {
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
  min-width: 130px;
}
.recall-agent-filter:focus {
  border-color: var(--accent);
}
.recall-summary {
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.recall-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 640px) {
  .recall-toolbar { flex-direction: column; align-items: stretch; }
  .recall-search-wrap, .recall-date-wrap, .recall-expr, .recall-agent-filter { width: 100%; }
  .recall-date { width: 100%; }
}

.recall-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.recall-date-header {
  margin-top: 20px;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.recall-item {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.recall-memory {
  border-left: 3px solid var(--border);
}
.recall-memory[data-cat="hot"]    { border-left-color: #ef4444; }
.recall-memory[data-cat="warm"]   { border-left-color: #f59e0b; }
.recall-memory[data-cat="cold"]   { border-left-color: #3b82f6; }
.recall-memory[data-cat="shared"] { border-left-color: #8b5cf6; }
.recall-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.recall-item-label {
  font-size: 12px;
  color: var(--text-muted);
}
.recall-item-badges {
  display: flex;
  gap: 6px;
}
.recall-badge {
  font-size: 11px;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.recall-badge-agent { background: var(--accent); }
.recall-badge-cat { background: var(--text-muted); }
.recall-badge-cat[data-cat="hot"]    { background: #ef4444; }
.recall-badge-cat[data-cat="warm"]   { background: #f59e0b; }
.recall-badge-cat[data-cat="cold"]   { background: #3b82f6; }
.recall-badge-cat[data-cat="shared"] { background: #8b5cf6; }
.recall-item-content {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.5;
}
.recall-item-keywords {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.recall-loading, .recall-empty { font-size: 13px; color: var(--text-muted); }
.recall-error { font-size: 13px; color: var(--danger); }

/* === Connectors Page === */
.connector-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.connector-section-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  margin-top: 20px;
}
.connector-section-header:first-of-type { margin-top: 0; }

.connector-group-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-top: 24px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.connector-group-heading:first-child { margin-top: 0; }
.connector-scope-section { margin-bottom: 4px; }
.connector-scope-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.connector-scope-header.collapsible { cursor: pointer; user-select: none; }
.connector-scope-header.collapsible:hover { color: var(--text); }
.connector-scope-toggle {
  font-size: 10px;
  width: 12px;
  display: inline-block;
  transition: transform 0.15s;
}
.connector-scope-count {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 11px;
  margin-left: 4px;
}
.connector-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.connector-scope-grid[hidden] { display: none; }

.connector-external-paths {
  margin-bottom: 12px;
}
.connector-external-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.connector-external-header:hover { color: var(--text); }
.connector-external-body[hidden] { display: none; }
.connector-external-body { margin-top: 10px; }
.connector-external-add { display: flex; gap: 8px; margin-top: 8px; }
.connector-external-add .input { flex: 1; }
.connector-external-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  font-size: 13px;
  font-family: monospace;
}
.connector-external-item button {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
.connector-external-item button:hover { opacity: 0.7; }

.connector-env-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.github-repo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.github-repo-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.github-repo-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.github-repo-date {
  font-size: 11px;
  color: var(--text-muted);
  font-family: inherit;
}
.github-repo-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.github-repo-actions button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
.github-repo-update { color: var(--accent); }
.github-repo-update:hover { opacity: 0.7; }
.github-repo-delete { color: var(--danger); }
.github-repo-delete:hover { opacity: 0.7; }
.github-repo-status {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.github-repo-status.loading { background: var(--bg-card); color: var(--accent); border: 1px solid var(--accent); }
.github-repo-status.error { background: var(--bg-card); color: var(--danger); border: 1px solid var(--danger); }
.github-repo-status.success { background: var(--bg-card); color: var(--success); border: 1px solid var(--success); }
.github-repo-status[hidden] { display: none; }

/* Vault page */
.vault-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.vault-add-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  animation: slideDown 0.2s ease;
}
.vault-add-panel[hidden] { display: none; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.vault-add-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.vault-add-panel-header h3 { margin: 0; font-size: 15px; }
.vault-add-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.vault-add-fields .vault-field-group:last-child {
  grid-column: 1 / -1;
}
.vault-field-group { display: flex; flex-direction: column; gap: 4px; }
.vault-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.vault-add-actions { display: flex; justify-content: flex-end; }
@media (max-width: 600px) {
  .vault-add-fields { grid-template-columns: 1fr; }
  .vault-add-fields .vault-field-group:last-child { grid-column: auto; }
}
.vault-search-wrap {
  position: relative;
  margin-bottom: 16px;
}
.vault-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.vault-search {
  width: 100%;
  padding: 10px 12px 10px 38px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}
.vault-search:focus { border-color: var(--accent); }
.vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.vault-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
  gap: 8px;
}
.vault-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.vault-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.vault-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft, rgba(99, 102, 241, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.vault-card-title {
  flex: 1;
  min-width: 0;
}
.vault-card-id {
  font-family: monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}
.vault-card-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.vault-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
}
.vault-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.vault-card-value {
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
  animation: slideDown 0.15s ease;
}
.vault-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}
.vault-empty[hidden] { display: none; }
.vault-empty svg { margin-bottom: 12px; opacity: 0.4; }
.vault-empty p { margin: 4px 0; font-size: 14px; }
.vault-empty-hint { font-size: 12px !important; opacity: 0.6; }

.vault-binding-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  vertical-align: middle;
  margin-left: 6px;
}

.vault-card-edit-form {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 6px;
  align-items: center;
}
.vault-card-edit-form .input { flex: 1; }

/* === SSH Vault Section === */
.ssh-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.ssh-key-store-section { margin-top: 28px; }

/* Key assign select in card/table */
.ssh-key-select {
  font-size: 12px;
  padding: 3px 6px;
  height: 28px;
  min-width: 0;
  max-width: 160px;
}
.ssh-key-select-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ssh-key-select-wrap .ssh-key-select { flex: 1; }

/* Info modal server section */
.ssh-info-server-section {
  margin-bottom: 14px;
}
.ssh-info-server-section .ssh-info-key-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

/* Info modal key section */
.ssh-info-key-section {
  background: var(--bg-hover, rgba(127,127,127,.05));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.ssh-info-key-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.ssh-info-key-section .ssh-key-select {
  width: 100%;
  max-width: 100%;
  height: 34px;
  font-size: 13px;
}
.ssh-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ssh-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}
.ssh-section-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.ssh-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* SSH key status badges */
.ssh-key-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ssh-key-badge.ok { background: rgba(34,197,94,.15); color: #16a34a; }
.ssh-key-badge.missing { background: rgba(234,179,8,.15); color: #b45309; }
.ssh-key-badge.expired { background: rgba(239,68,68,.15); color: #dc2626; }
[data-theme="dark"] .ssh-key-badge.ok { color: #4ade80; }
[data-theme="dark"] .ssh-key-badge.missing { color: #fbbf24; }
[data-theme="dark"] .ssh-key-badge.expired { color: #f87171; }

/* SSH card grid */
.ssh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ssh-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ssh-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ssh-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ssh-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ssh-card-title { flex: 1; min-width: 0; }
.ssh-card-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssh-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssh-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.ssh-card-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.ssh-card-row svg { flex-shrink: 0; opacity: 0.6; }
.ssh-card-row span { color: var(--text); font-family: monospace; font-size: 12px; }
.ssh-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ssh-card-actions { display: flex; gap: 4px; }

/* SSH table */
.ssh-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ssh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ssh-table th {
  background: var(--bg-card);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ssh-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ssh-table tr:last-child td { border-bottom: none; }
.ssh-table tbody tr:hover { background: var(--bg-hover, rgba(127,127,127,.05)); }
.ssh-table .ssh-table-name { font-weight: 600; }
.ssh-table .ssh-table-mono { font-family: monospace; font-size: 12px; color: var(--text-muted); }
.ssh-table .ssh-table-actions { display: flex; gap: 4px; justify-content: flex-end; }

@media (max-width: 600px) {
  .ssh-cards { grid-template-columns: 1fr; }
  .ssh-section-header { flex-direction: column; }
}

/* SSH keygen + info modal styles */
.ssh-pubkey-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.ssh-pubkey-box {
  width: 100%;
  font-family: monospace;
  font-size: 11px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  resize: none;
  line-height: 1.5;
  word-break: break-all;
}
.ssh-pubkey-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}
.ssh-install-step {
  margin-bottom: 14px;
}
.ssh-install-step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.ssh-code-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.ssh-code {
  flex: 1;
  font-family: monospace;
  font-size: 12px;
  color: var(--text);
  word-break: break-all;
  white-space: pre-wrap;
  user-select: all;
}
.ssh-code-copy {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.ssh-code-copy:hover { color: var(--accent); border-color: var(--accent); }
.ssh-code-copy.copied { color: var(--success); border-color: var(--success); }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* Keygen button -- inline on card/table */
.ssh-keygen-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
  color: #b45309;
}
[data-theme="dark"] .ssh-keygen-btn { color: #fbbf24; }
.ssh-keygen-btn:hover { background: rgba(234,179,8,.12); }

.ssh-info-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: all var(--transition);
  flex-shrink: 0;
}
.ssh-info-btn:hover { color: var(--accent); border-color: var(--accent); }

.vault-bind-status {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
}
.vault-bind-status.success { background: rgba(34,197,94,.12); color: var(--success); }
.vault-bind-status.error { background: rgba(239,68,68,.12); color: var(--danger); }

.vault-scan-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.vault-scan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--bg-card);
}
.vault-scan-check { flex-shrink: 0; }
.vault-scan-info { flex: 1; min-width: 0; }
.vault-scan-server {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.vault-scan-env {
  font-size: 12px;
  color: var(--text-muted);
  font-family: monospace;
}
.vault-scan-env code {
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}
.vault-scan-targets {
  font-size: 11px;
  color: var(--text-muted);
}
.vault-scan-id { flex-shrink: 0; }

.modal-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal-content {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 90%;
  max-width: 480px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 15px; }
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
}
.modal-close:hover { color: var(--text); }
.modal-body { padding: 16px 20px; }
.modal-desc { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.env-var-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.env-var-label {
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
  color: var(--text);
}
.env-var-input { width: 100%; }
.connector-builtin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.connector-builtin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.connector-builtin-name {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}
.connector-builtin-action {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.connector-builtin-action:hover { text-decoration: underline; }

/* Built-in row's "Részletek" button: carries the same action styling
   but presents as an actual <button> with focus ring for keyboard
   users. The bare <span> it replaced was unreachable by tab and
   lacked a click handler despite looking like a control. */
.connector-builtin-action.btn-link {
  background: none;
  border: none;
  /* Inherit base .connector-builtin-action sizing so both visual
     heights stay identical across built-in rows regardless of
     whether a row ends with a span or a button. */
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  border-radius: 4px;
}
.connector-builtin-action.btn-link:hover {
  background: var(--bg-input);
  text-decoration: underline;
}
.connector-builtin-action.btn-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Inline <code> inside the built-in detail modal: give it a
   distinct background so the command text stands out from the
   surrounding prose in both light and dark themes. Scoped to the
   new modal's body specifically; .modal-body is shared by ~13
   other modals with their own <code> styling (Agent detail
   Settings, Telegram instructions, etc.) that we must not
   override. */
#builtinDetailBody code {
  background: var(--bg-input);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

.connector-grid {
  display: block;
}

.connector-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}
.connector-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.connector-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.connector-status-dot.connected { background: var(--success); box-shadow: 0 0 6px rgba(120,140,93,0.4); }
.connector-status-dot.configured { background: var(--info); }
.connector-status-dot.needs_auth { background: var(--accent); }
.connector-status-dot.failed { background: var(--danger); }
.connector-status-dot.unknown { background: var(--text-muted); }

.connector-info {
  flex: 1;
  min-width: 0;
}
.connector-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.connector-endpoint {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.connector-type-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.connector-type-badge.remote { background: var(--info-soft); color: var(--info); }
.connector-type-badge.local { background: var(--success-soft); color: var(--success); }
.connector-type-badge.plugin { background: var(--accent-soft); color: var(--accent); }

.connector-source-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text-muted);
  margin-left: 6px;
  vertical-align: middle;
}

.info-box {
  padding: 12px 16px;
  margin: 0 0 16px;
  border-radius: 8px;
  background: var(--info-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  border-left: 3px solid var(--info);
}
.info-box strong { color: var(--info); }

.connector-stale-banner {
  padding: 10px 14px;
  margin: 0 0 12px;
  border-radius: 6px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  border-left: 3px solid var(--danger);
}

.connector-card-readonly {
  cursor: default;
  opacity: 0.9;
}
.connector-card-readonly:hover {
  /* The base .connector-card:hover rule applies border-color +
     box-shadow to hint at a click target. Read-only cards have no
     click handler, so mute those cues explicitly. */
  border-color: var(--border);
  box-shadow: none;
}
.connector-readonly-hint {
  color: var(--text-muted);
  font-style: italic;
  font-size: 11px;
  margin-top: 2px;
}

.connector-detail-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.connector-detail-row {
  display: flex;
  gap: 12px;
}
.connector-detail-row .meta-label { min-width: 80px; }

.connector-agent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.connector-agent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}
.connector-agent-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}
.connector-agent-item label {
  font-size: 13px;
  cursor: pointer;
}

.connector-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  color: var(--text-muted);
  font-size: 14px;
  gap: 10px;
}

/* === Connector Tabs === */
.connector-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.connector-tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: -1px;
}
.connector-tab:hover {
  color: var(--text);
}
.connector-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* === Catalog Filters === */
.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.catalog-filter-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.catalog-filter-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.catalog-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* === Catalog Grid === */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.catalog-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition);
  gap: 12px;
}
.catalog-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.catalog-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.catalog-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  font-size: 22px;
}
.catalog-card-info {
  flex: 1;
  min-width: 0;
}
.catalog-card-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.catalog-card-link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.catalog-card-link:hover { opacity: 1; }
.catalog-card-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.catalog-card-type.local {
  background: var(--success-soft);
  color: var(--success);
}
.catalog-card-type.remote {
  background: var(--info-soft);
  color: var(--info);
}
.catalog-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.catalog-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.catalog-install-btn {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.catalog-install-btn.install {
  background: var(--success);
  color: #fff;
}
.catalog-install-btn.install:hover {
  filter: brightness(1.1);
}
.catalog-install-btn.installed {
  background: var(--success-soft);
  color: var(--success);
  cursor: default;
  font-weight: 600;
}
.catalog-uninstall-link {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  margin-left: auto;
  transition: color var(--transition);
}
.catalog-uninstall-link:hover {
  color: var(--danger);
  text-decoration: underline;
}
.catalog-auth-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 4px;
}

/* Catalog install modal env fields */
.catalog-env-group {
  margin-bottom: 14px;
}
.catalog-env-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-family: monospace;
}
.catalog-env-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  font-size: 14px;
}
.catalog-env-group input:focus {
  border-color: var(--border-focus);
  outline: none;
}

/* === Status Page === */
.status-overall {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 600;
}
.status-overall.operational {
  background: var(--success-soft);
  color: var(--success);
}
.status-overall.degraded {
  background: rgba(217, 119, 87, 0.12);
  color: var(--accent);
}
.status-overall.unknown {
  background: var(--bg-input);
  color: var(--text-muted);
}

.status-services {
  margin-bottom: 28px;
}
.status-services h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.status-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.status-service {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.status-service-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-service-dot.operational { background: var(--success); }
.status-service-dot.degraded { background: var(--accent); }
.status-service-dot.down { background: var(--danger); }

.status-service-name {
  font-size: 13px;
  font-weight: 500;
}
.status-service-uptime {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.status-incidents h3 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.status-incident-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.status-incident {
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 3px solid var(--border);
}
.status-incident.resolved { border-left-color: var(--success); }
.status-incident.monitoring { border-left-color: var(--info); }
.status-incident.identified { border-left-color: var(--accent); }
.status-incident.investigating { border-left-color: var(--danger); }

.status-incident-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.status-incident-title {
  font-size: 14px;
  font-weight: 600;
}
.status-incident-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 4px;
}
.status-incident-badge.resolved { background: var(--success-soft); color: var(--success); }
.status-incident-badge.monitoring { background: var(--info-soft); color: var(--info); }
.status-incident-badge.identified { background: rgba(217,119,87,0.12); color: var(--accent); }
.status-incident-badge.investigating { background: rgba(191,77,67,0.12); color: var(--danger); }

.status-incident-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.status-incident-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
}

.status-loading {
  text-align: center;
  padding: 48px;
  color: var(--text-muted);
}

/* === Migration Page === */
.migrate-steps {
  max-width: 700px;
}
.migrate-step h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}
.migrate-step[hidden] { display: none; }

.migrate-findings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.migrate-finding {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.migrate-finding-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.migrate-finding-info {
  flex: 1;
  min-width: 0;
}
.migrate-finding-name {
  font-size: 13px;
  font-weight: 500;
}
.migrate-finding-type {
  font-size: 11px;
  color: var(--text-muted);
}
.migrate-finding-size {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.migrate-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.migrate-result {
  padding: 20px;
  background: var(--success-soft);
  border-radius: var(--radius);
}
.migrate-result h4 {
  color: var(--success);
  margin-bottom: 10px;
}
.migrate-result-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.migrate-result-stat {
  text-align: center;
}
.migrate-result-stat-value {
  font-size: 20px;
  font-weight: 600;
}
.migrate-result-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}
.migrate-result-details {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* === Skills Page === */
.skills-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.skills-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  gap: 12px;
}

.skills-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.skills-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.skills-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: 18px;
}

.skills-card-info {
  flex: 1;
  min-width: 0;
}

.skills-card-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
  word-break: break-word;
}

.skills-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skills-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.skills-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--info-soft);
  color: var(--info);
}

.skills-agent-badge.none {
  background: var(--bg-input);
  color: var(--text-muted);
  font-style: italic;
}

.skills-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.skills-empty svg {
  color: var(--text-muted);
  opacity: 0.5;
  margin-bottom: 12px;
}

/* Skills detail modal */
.skill-detail-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
}

.skill-detail-meta {
  margin: 0 0 20px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.skill-detail-meta .skill-detail-source strong {
  color: var(--text);
}
.skill-detail-meta .skill-detail-note {
  margin-top: 2px;
  font-style: italic;
}

.skill-detail-agents {
  margin-bottom: 24px;
}

.skill-agent-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.skill-agent-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.skill-agent-checkbox:hover {
  border-color: var(--accent);
}

.skill-agent-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.skill-agent-checkbox label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  flex: 1;
}

.skill-agent-auto,
.connector-agent-auto {
  opacity: 0.85;
  background: var(--bg-input);
}

.tag-auto {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.skill-detail-content-wrap {
  margin-top: 20px;
}

.skill-detail-content {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 8px;
}

/* === Responsive === */
@media (max-width: 900px) {
  .kanban-board {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .kanban-col { min-height: auto; }
  .kanban-swimlane-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  main { padding: 20px 16px 48px; }
  .agents-grid { grid-template-columns: 1fr; gap: 12px; }
  .agent-card { padding: 20px 14px; min-height: auto; }
  .agent-avatar { width: 44px; height: 44px; font-size: 18px; }
  .modal { width: 95%; }
  .modal-agent-detail { max-width: 100%; }
  .header-left { gap: 16px; }
  .mem-toolbar { flex-direction: column; }
  .mem-stats { gap: 8px; }
  .stat-card { min-width: 70px; padding: 12px; }
  .stat-value { font-size: 20px; }
  .mem-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mem-tab { padding: 10px 12px; font-size: 12px; }
  .log-date-nav { gap: 8px; }
  .log-current-date { font-size: 14px; min-width: 120px; }
  .log-entry { padding: 10px 12px; gap: 8px; }
  .log-entry-time { font-size: 11px; }
  .tab-nav { padding: 0 16px; overflow-x: auto; }
  .tab-btn { padding: 10px 12px; font-size: 13px; }
  .tab-panel { padding: 0 16px 16px; }
  .agent-overview-grid { grid-template-columns: 1fr; }
  .agent-detail-bottom { margin: 0 16px; }
  .schedule-view-toggle { flex-wrap: wrap; }
  .schedule-row { padding: 12px 14px; gap: 10px; }
  .schedule-actions { opacity: 1; }
  .timeline-agent { width: 70px; }
  .timeline-hours { margin-left: 70px; }
  .timeline-marker { width: 24px; height: 24px; top: 10px; }
  .timeline-marker-tooltip { font-size: 10px; }
  .connector-scope-grid { grid-template-columns: 1fr; }
  .connector-stats { gap: 8px; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-filters { gap: 4px; }
  .catalog-filter-btn { padding: 5px 10px; font-size: 12px; }
  .skills-grid { grid-template-columns: 1fr; }
  .skills-stats { gap: 8px; }
  .autonomy-grid { gap: 8px; }
  .autonomy-row { flex-wrap: wrap; gap: 10px; }
  .autonomy-row-label { min-width: unset; flex: 1 1 100%; }
}

/* === Autonomy Page === */
.autonomy-legend {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.autonomy-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.autonomy-legend-item strong {
  font-weight: 600;
  font-size: 14px;
}
.autonomy-level-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.autonomy-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.autonomy-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.autonomy-row:hover { border-color: var(--accent); }
.autonomy-row.locked {
  opacity: 0.55;
  pointer-events: none;
}
.autonomy-row.locked:hover { border-color: var(--border); }
.autonomy-row.capped { border-left: 3px solid var(--accent); }
.autonomy-row-label {
  flex: 1;
  min-width: 260px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.autonomy-row-lock {
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.autonomy-row-lock svg { flex-shrink: 0; }
.autonomy-row-cap {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.autonomy-row-cap svg { flex-shrink: 0; }
.autonomy-levels {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  border-radius: 6px;
  padding: 3px;
}
.autonomy-level-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: all var(--transition);
  min-width: 36px;
  text-align: center;
}
.autonomy-level-btn:hover:not(.active):not(:disabled) {
  color: var(--text);
  background: var(--bg-card);
}
.autonomy-level-btn.over-cap {
  opacity: 0.3;
  cursor: not-allowed;
}
.autonomy-level-btn.active {
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.autonomy-level-btn.active[data-level="1"] {
  background: var(--text-muted);
}
.autonomy-level-btn.active[data-level="2"] {
  background: var(--accent);
}
.autonomy-level-btn.active[data-level="3"] {
  background: var(--success);
}
.autonomy-grid > :last-child { margin-bottom: 0; }
.autonomy-footer {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
}

/* === Settings page === */
.settings-group { margin-bottom: 28px; }
.settings-group:last-child { margin-bottom: 0; }
.settings-group-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  transition: border-color var(--transition);
}
.settings-row:hover { border-color: var(--accent); }
.settings-row-info { flex: 1; min-width: 240px; }
.settings-row-key {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono, monospace);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.settings-restart-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--warning, #c9a000);
  border: 1px solid var(--warning, #c9a000);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.settings-row-desc {
  font-size: 13px;
  color: var(--text);
  margin-top: 4px;
}
.settings-row-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.settings-row-editor {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}
.settings-row-editor .input {
  width: 140px;
  font-size: 13px;
}
.settings-color-input {
  width: 72px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  cursor: pointer;
}
.settings-row-error {
  font-size: 12px;
  color: var(--danger);
  flex-basis: 100%;
}

/* Auth Mode Cards */
.auth-mode-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.auth-mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.auth-mode-card:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
}
.auth-mode-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.auth-mode-card input[type="radio"] {
  display: none;
}
.auth-mode-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
}
.auth-mode-card.selected .auth-mode-card-icon {
  background: var(--accent);
  color: #fff;
}
.auth-mode-card-body { flex: 1; min-width: 0; }
.auth-mode-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.auth-mode-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
@media (max-width: 600px) {
  .auth-mode-cards { gap: 6px; }
  .auth-mode-card { padding: 10px 12px; gap: 10px; }
}

/* === Activity (live agent status) === */
.activity-meta { display: flex; align-items: center; }
.activity-updated { font-size: 12px; color: var(--text-muted); }
.activity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  gap: 16px;
  align-items: start;
}
.activity-empty { color: var(--text-muted); font-size: 14px; }
.activity-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 14px 16px;
}
.activity-card.act-working { border-left-color: #22c55e; }
.activity-card.act-idle    { border-left-color: #9ca3af; }
.activity-card.act-error   { border-left-color: #ef4444; }
.activity-card.act-unknown { border-left-color: #eab308; }
.activity-card.act-stopped { border-left-color: #6b7280; opacity: 0.7; }
.activity-card.act-clickable { cursor: pointer; transition: background 0.15s, box-shadow 0.15s; }
.activity-card.act-clickable:hover { background: var(--bg-card-hover, var(--bg-card)); box-shadow: 0 0 0 2px var(--accent); }
.act-term-icon { color: var(--text-muted); flex-shrink: 0; opacity: 0.6; }
.activity-card.act-clickable:hover .act-term-icon { opacity: 1; color: var(--accent); }
.activity-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.activity-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.act-main-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--border); color: var(--text-muted); border-radius: 4px; padding: 1px 6px;
}
.activity-badge { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.activity-badge.act-working {
  background: rgba(34,197,94,0.15); color: #16a34a;
  /* "Breathing" pulse so the live "dolgozik" badge reads as active, mirroring
     the .process-dot.running pulse (same 2s ease-in-out cadence). */
  animation: badge-breathe 2s ease-in-out infinite;
}
.activity-badge.act-idle    { background: rgba(156,163,175,0.18); color: #6b7280; }
.activity-badge.act-error   { background: rgba(239,68,68,0.15); color: #dc2626; }
.activity-badge.act-unknown { background: rgba(234,179,8,0.18); color: #ca8a04; }
.activity-badge.act-stopped { background: rgba(107,114,128,0.15); color: #6b7280; }

/* Green "breathing" glow for the working badge: saturates the pill and pulses a
   soft halo at peak, then settles. */
@keyframes badge-breathe {
  0%, 100% { background: rgba(34,197,94,0.12); box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  50%      { background: rgba(34,197,94,0.32); box-shadow: 0 0 8px 1px rgba(34,197,94,0.40); }
}
.activity-tail {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  line-height: 1.45; color: var(--text-muted); white-space: pre-wrap; word-break: break-word;
  max-height: clamp(200px, 28vh, 480px); overflow: auto;
  background: var(--bg-subtle, rgba(127,127,127,0.06));
  border-radius: 6px; padding: 8px 10px;
}
.activity-tail-empty { margin: 0; font-size: 12px; color: var(--text-muted); font-style: italic; }

/* === Messages / Chat page === */
.chat-layout {
  display: flex;
  gap: 0;
  flex: 1;
  min-height: 0;
  height: calc(100vh - 160px);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 16px;
}
.chat-sidebar {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}
.chat-sidebar-loading, .chat-sidebar-empty {
  padding: 20px 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.chat-agent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.chat-agent-item:hover { background: var(--bg-hover); }
.chat-agent-item.selected { background: color-mix(in srgb, var(--accent) 12%, transparent); border-left: 3px solid var(--accent); }
.chat-agent-avatar { flex-shrink: 0; }
.chat-avatar { border-radius: 50%; display: block; object-fit: cover; }
.chat-avatar-mono { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; }
.chat-agent-info { flex: 1; min-width: 0; }
.chat-agent-name { font-size: 13px; font-weight: 600; }
.chat-agent-preview { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-agent-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.chat-thread-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-main);
}
.chat-thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}
.chat-thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.chat-thread-title { font-size: 15px; font-weight: 700; }
.chat-bubbles {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-bubble-row.outgoing { flex-direction: row-reverse; }
.chat-bubble-avatar { flex-shrink: 0; }
.chat-bubble { max-width: 72%; display: flex; flex-direction: column; gap: 4px; }
.bubble-out {
  background: var(--accent);
  color: #fff;
  border-radius: 16px 4px 16px 16px;
  padding: 10px 14px;
  align-self: flex-end;
}
.bubble-in {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px 16px 16px 16px;
  padding: 10px 14px;
  align-self: flex-start;
}
.bubble-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.bubble-sender { font-size: 11px; font-weight: 600; opacity: 0.7; }
.bubble-id-chip {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: monospace;
}
.bubble-out .bubble-id-chip { background: rgba(255,255,255,0.25); color: #fff; }
.bubble-in .bubble-id-chip { background: var(--bg-hover); color: var(--text-muted); }
.bubble-text { font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.bubble-out .bubble-text { color: #fff; }
.bubble-time { font-size: 10px; opacity: 0.55; text-align: right; margin-top: 2px; }
.chat-compose {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.chat-compose-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-compose-input {
  flex: 1;
  resize: none;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  min-height: 62px;
  max-height: 120px;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.chat-compose-input:focus { outline: none; border-color: var(--accent); }
.chat-send-btn {
  height: 38px !important;
  width: auto !important;
  min-width: 72px;
  max-width: 90px;
  white-space: nowrap;
  padding: 0 14px !important;
  flex-shrink: 0;
  font-size: 13px !important;
  align-self: flex-end;
}

/* Unread badge */
.chat-agent-item.unread .chat-agent-name { font-weight: 700; }
.chat-unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.unread-preview { font-weight: 600; color: var(--text) !important; }

/* === Agent reauth + terminal === */
.agent-reauth-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: color-mix(in srgb, #ef4444 12%, transparent);
  border: 1px solid #ef4444;
  border-radius: 6px;
  padding: 6px 10px;
  margin: 8px 0 0;
}
.agent-reauth-reason { font-size: 11px; color: #ef4444; font-weight: 600; flex: 1; }
.btn-danger {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-danger:hover { background: #dc2626; }
.btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }
.agent-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.agent-terminal-btn { font-size: 11px; display: flex; align-items: center; gap: 4px; }

/* Terminal modal */
.terminal-modal {
  max-width: 1100px;
  width: 98vw;
  display: flex;
  flex-direction: column;
  /* Fixed height (not max-height): with a content-driven height the xterm
     FitAddon grows the modal as the pane repaints, which re-runs fit() and
     makes the modal oscillate ("vibrating terminal"). A fixed height gives the
     flex:1 container a stable size, so fit() settles and xterm scrolls
     internally instead of resizing the modal. */
  height: 90vh;
}
.terminal-modal .modal-header { flex-shrink: 0; }
/* min-height:0 lets the flex child actually shrink to the container; overflow
   hidden stops the xterm screen from pushing the modal taller. */
#terminalContainer { flex: 1; min-height: 0; overflow: hidden; }
.xterm { height: 100% !important; }

/* === Docs viewer === */
.docs-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.docs-list {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 16px;
}
.docs-list-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text, #222);
  text-decoration: none;
  font-size: 14px;
  border: 1px solid transparent;
}
.docs-list-title { line-height: 1.3; }
.docs-list-date {
  font-size: 11px;
  color: var(--text-muted, #888);
  font-variant-numeric: tabular-nums;
}
.docs-list-item:hover { background: var(--surface-2, rgba(127,127,127,0.08)); }
.docs-list-item.active {
  background: var(--surface-2, rgba(127,127,127,0.12));
  border-color: var(--border, rgba(127,127,127,0.25));
  font-weight: 600;
}
.docs-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 4px 40px;
  line-height: 1.65;
}
.markdown-body h1 { font-size: 1.7em; margin: 0.2em 0 0.6em; }
.markdown-body h2 { font-size: 1.35em; margin: 1.4em 0 0.5em; border-bottom: 1px solid var(--border, rgba(127,127,127,0.2)); padding-bottom: 0.2em; }
.markdown-body h3 { font-size: 1.12em; margin: 1.2em 0 0.4em; }
.markdown-body p { margin: 0.6em 0; }
.markdown-body ul, .markdown-body ol { margin: 0.5em 0; padding-left: 1.6em; }
.markdown-body li { margin: 0.25em 0; }
.markdown-body code {
  background: var(--surface-2, rgba(127,127,127,0.12));
  padding: 0.12em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.markdown-body pre {
  background: var(--surface-2, rgba(127,127,127,0.12));
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
}
.markdown-body pre code { background: none; padding: 0; }
.markdown-body table {
  border-collapse: collapse;
  margin: 0.8em 0;
  width: 100%;
}
.markdown-body th, .markdown-body td {
  border: 1px solid var(--border, rgba(127,127,127,0.3));
  padding: 7px 11px;
  text-align: left;
}
.markdown-body th { background: var(--surface-2, rgba(127,127,127,0.1)); }
.markdown-body blockquote {
  margin: 0.8em 0;
  padding: 0.4em 1em;
  border-left: 3px solid var(--border, rgba(127,127,127,0.4));
  color: var(--text-muted, #666);
}
.markdown-body hr { border: none; border-top: 1px solid var(--border, rgba(127,127,127,0.25)); margin: 1.4em 0; }
.markdown-body a { color: var(--accent, #3b82f6); }
@media (max-width: 760px) {
  .docs-layout { flex-direction: column; }
  .docs-list { flex-basis: auto; width: 100%; position: static; }
}

/* === Agent conversation (readable transcript) modal === */
.conversation-modal { width: min(820px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.conversation-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border, #2a2a2a); flex-wrap: wrap; }
.conversation-toolbar #conversationSearch { flex: 1; min-width: 160px; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border, #333); background: var(--bg-input, #1c1c1c); color: inherit; }
.conversation-filter { display: flex; align-items: center; gap: 5px; font-size: 12px; opacity: .85; white-space: nowrap; }
.conversation-container { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #141414; border-radius: 0 0 8px 8px; min-height: 320px; }
.conversation-empty { opacity: .6; text-align: center; padding: 30px; }
.conv-load-older {
  display: block;
  margin: 0 auto 10px;
  padding: 6px 16px;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
}
.conv-load-older:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.conv-load-older:disabled { opacity: .5; cursor: default; }
.conv-row { display: flex; }
.conv-row.conv-in { justify-content: flex-start; }
.conv-row.conv-out { justify-content: flex-end; }
.conv-bubble { max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.conv-in .conv-bubble { background: #26323d; border-bottom-left-radius: 3px; }
.conv-out .conv-bubble { background: #1f4030; border-bottom-right-radius: 3px; }
.conv-meta { font-size: 10.5px; opacity: .6; margin-bottom: 3px; }
.conv-text { white-space: normal; word-break: break-word; }
.conv-row.conv-note { justify-content: center; }
.conv-note-text { font-size: 12px; opacity: .55; font-style: italic; max-width: 88%; }
.conv-row.conv-action { justify-content: flex-start; }
.conv-action-text { font-size: 11.5px; opacity: .5; font-family: 'JetBrains Mono', monospace; display: flex; gap: 8px; align-items: baseline; }
.conv-action-ts { opacity: .6; font-size: 10px; }
/* === Mobile login QR modal === */
.mobile-login-qr {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.mobile-login-qr svg { width: 100%; height: 100%; display: block; }
.mobile-login-qr .muted { color: var(--muted, #888); text-align: center; font-size: 13px; }
.mobile-login-warn {
  font-size: 12px;
  color: var(--muted, #888);
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

/* === Docs viewer: content toolbar (.md download) === */
.docs-content-toolbar { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.docs-content-toolbar .btn-compact { font-size: 12px; }

/* === Idea box: score chip + clickable title === */
.idea-score-chip { font-size: 11px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); white-space: nowrap; }
.idea-title-link { color: inherit; text-decoration: none; cursor: pointer; }
.idea-title-link:hover { text-decoration: underline; }

/* === Naplo (Audit Timeline) === */
.naplo-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.naplo-source-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.naplo-tab { padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; font-size: 13px; transition: background 0.15s, color 0.15s; }
.naplo-tab.active { background: var(--accent, #2563eb); color: #fff; border-color: transparent; }
.naplo-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.naplo-date { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: 13px; }
.naplo-date-sep { color: var(--text-muted); font-size: 13px; }
.naplo-search { flex: 1; min-width: 160px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: 13px; }
.naplo-summary { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.naplo-empty { color: var(--text-muted); font-size: 14px; text-align: center; margin-top: 40px; }
.naplo-empty.error { color: var(--danger, #ef4444); }
.naplo-timeline { display: flex; flex-direction: column; gap: 1px; }
.naplo-entry { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border); font-size: 13px; }
.naplo-entry-meta { display: flex; align-items: center; gap: 8px; }
.naplo-ts { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.naplo-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }
.naplo-entry-detail { color: var(--text); line-height: 1.5; }
.naplo-entry-detail code { background: var(--bg, #f5f5f5); padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 12px; }
.naplo-actor { color: var(--text-muted); font-size: 12px; }
.naplo-note { font-style: italic; color: var(--text-muted); }
.naplo-event-type { font-size: 11px; background: var(--bg); border-radius: 3px; padding: 1px 5px; color: var(--text-muted); }
.naplo-sensitive { font-size: 11px; color: var(--danger, #ef4444); font-weight: 600; }

/* === Safe-area insets (iOS notch / Dynamic Island / home indicator) ===
 * The page ships viewport-fit=cover (see index.html), which lets content draw
 * edge-to-edge under the notch in an installed (standalone) PWA. env() resolves
 * to 0 on devices/browsers with no inset (Android without a cutout, desktop),
 * so every rule here is a no-op there -- no platform sniffing needed.
 *
 * Landscape is the important case: an iPhone in landscape is WIDER than the
 * mobile breakpoint, so it uses the desktop column layout (sidebar + main as
 * in-flow grid children of <body>), NOT the mobile shell.
 *
 * Each side inset is filled by the column that meets it, NOT by a body gap, so
 * the strip shows the right colour. The LEFT inset (the menu side) is handled on
 * .sidebar below, letting its lighter card background bleed into the cutout
 * instead of leaving a darker body-coloured gap beside the menu. The RIGHT inset
 * sits next to <main>, whose background already is the body colour, so padding
 * the body on the right is seamless there. Bottom padding clears the home
 * indicator in both orientations. iOS reports left/right insets as 0 in
 * portrait, so none of this adds stray side padding there. */
body {
  padding-right: env(safe-area-inset-right);
}
/* Bottom inset: on the wide layout (the sidebar lives in the body grid as a
 * sticky column) put it on <main>, NOT <body>. Padding on <body> shortens the
 * sticky sidebar's containing block, so a flick to the very bottom detaches the
 * menu from top:0 and slides it up by the inset -- the residual drift still
 * visible at the bottom in landscape. <main> is the scrolling content; padding
 * it clears the home indicator without shrinking that container, so the menu
 * stays pinned. Below the breakpoint the sidebar is a fixed off-canvas drawer
 * (independent of body height), so <body> padding is correct there. */
@media (min-width: 769px) {
  main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* Widen the sidebar track by the left inset so the menu keeps its full content
   * width in landscape. Without this the inset (added to .sidebar padding-left
   * below) eats into a fixed 220px track, squeezing the labels until they
   * overflow. The added track width and the added padding cancel out, leaving
   * the same 192px content box as desktop. */
  body { grid-template-columns: calc(220px + env(safe-area-inset-left)) 1fr; }
}
@media (max-width: 768px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}
/* Left inset = the menu side. Extend the sidebar's own (lighter) card background
 * into the cutout; the extra inner padding keeps the brand/nav clear of the
 * notch. Portrait and no-notch devices report 0, so this stays the base 14px. */
.sidebar {
  padding-left: calc(14px + env(safe-area-inset-left));
}
/* Portrait status-bar/notch: grow the sticky top bar so its card background
 * fills the strip and its content sits below the notch. Done here (not via
 * body padding-top) so the strip shows the bar colour, not a body-coloured
 * gap. The bar only renders below the mobile breakpoint (portrait), where this
 * height override wins over the base rule by source order. */
.mobile-topbar {
  height: calc(52px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}
@media (max-width: 768px) {
  /* Off-canvas drawer is position:fixed, so it ignores the <body> padding above.
   * When opened in portrait, keep its top brand below the notch and its footer
   * above the home indicator. */
  .sidebar {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}