:root {
  --bg: #08090c;
  --panel: #101218;
  --panel-alt: #171a21;
  --border: #262a33;
  --text: #f5f6f8;
  --text-dim: #8b909b;
  --accent: #6366f1;
  --accent-rgb: 99, 102, 241;
  --accent-2: #a855f7;
  --accent-contrast: #ffffff;
  --green: #22c55e;
  --green-rgb: 34, 197, 94;
  --gray: #6e7681;
  --gray-rgb: 110, 118, 129;
  --red: #ef4444;
  --red-rgb: 239, 68, 68;
  --amber: #f59e0b;
  --amber-rgb: 245, 158, 11;
  --manager: #a78bfa;
  --manager-rgb: 167, 139, 250;
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --topbar-height: 61px;
}

:root[data-theme="light"] {
  --bg: #fafafa;
  --panel: #ffffff;
  --panel-alt: #f4f4f6;
  --border: #e4e4e9;
  --text: #18181b;
  --text-dim: #71717a;
  --accent: #6366f1;
  --accent-rgb: 99, 102, 241;
  --accent-2: #8b5cf6;
  --accent-contrast: #ffffff;
  --green: #16a34a;
  --green-rgb: 22, 163, 74;
  --gray: #6e7781;
  --gray-rgb: 110, 119, 129;
  --red: #dc2626;
  --red-rgb: 220, 38, 38;
  --amber: #d97706;
  --amber-rgb: 217, 119, 6;
  --manager: #7c3aed;
  --manager-rgb: 124, 58, 237;
  --overlay-bg: rgba(140, 149, 159, 0.5);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--topbar-height);
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  /* Above the mobile sidebar drawer (85) - the topbar is a stacking context, so its user menu
     would otherwise be painted under the full-screen drawer and stay invisible on phones. */
  z-index: 90;
  flex-shrink: 0;
}

.topbar-logo-icon {
  flex-shrink: 0;
  margin-right: -6px;
}

.topbar-logo {
  font-size: 1.1rem;
}

.current-user-menu {
  position: relative;
}

.current-user-pill {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-alt);
  font-size: 0.8rem;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
}

.current-user-pill:hover {
  border-color: var(--accent);
}

.current-user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 90;
}

.current-user-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.current-user-dropdown-item:hover {
  background: var(--panel-alt);
}

.current-user-dropdown-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}

.current-user-dropdown-item-danger:hover {
  background: rgba(var(--red-rgb), 0.12);
  color: var(--red);
}

.current-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hamburger-btn {
  flex-shrink: 0;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger-btn:hover { border-color: var(--accent); }

.app-body {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
}

.login-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(var(--accent-rgb), 0.22), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(var(--manager-rgb), 0.18), transparent 45%),
    var(--bg);
  padding: 20px;
}

.login-card {
  width: min(380px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
}

[data-theme="dark"] .login-card {
  border-radius: 20px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 60px -20px rgba(var(--accent-rgb), 0.35);
}

[data-theme="light"] .login-card {
  border-radius: 20px;
  box-shadow:
    0 20px 50px rgba(24, 24, 27, 0.08),
    0 0 40px -18px rgba(var(--accent-rgb), 0.3);
}

.login-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.login-logo-icon {
  filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.55));
  flex-shrink: 0;
}

.login-logo {
  font-size: 2.4rem;
}

.login-subtitle {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin: 8px 0 0;
}

.login-form {
  text-align: left;
  margin-top: 28px;
}

.login-actions {
  margin-top: 22px;
}

.login-submit {
  width: 100%;
  padding: 10px 18px;
  font-size: 0.9rem;
}

@keyframes loginCardPop {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

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

.login-card-animate { animation: loginCardPop 0.55s ease both; }

.login-card-animate .login-logo-mark,
.login-card-animate .login-subtitle,
.login-card-animate .login-form {
  animation: loginFadeUp 0.5s ease both;
}

.login-card-animate .login-logo-mark { animation-delay: 0.05s; }
.login-card-animate .login-subtitle { animation-delay: 0.15s; }
.login-card-animate .login-form { animation-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  .login-card-animate,
  .login-card-animate .login-logo-mark,
  .login-card-animate .login-subtitle,
  .login-card-animate .login-form {
    animation: none;
  }
}

.sidebar {
  width: min(260px, 85vw);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 16px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  overflow-y: auto;
  z-index: 10;
  transition: width 0.2s ease, padding 0.2s ease;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0;
  padding: 20px 0;
  border-right: none;
  overflow: hidden;
}

.logo {
  display: block;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent), var(--manager));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-section .badge {
  align-self: flex-start;
}

.sidebar-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.sidebar-actions {
  display: flex;
  gap: 8px;
}

.sidebar-actions .btn {
  flex: 1;
}

.sidebar-shortcut {
  display: block;
  text-decoration: none;
  text-align: left;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-dim);
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.runs-toggle,
.schedules-toggle,
.help-toggle,
.theme-toggle,
.settings-toggle {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.runs-toggle { margin-left: auto; }

.topbar-push-right { margin-left: auto; }

.theme-toggle:hover,
.settings-toggle:hover { border-color: var(--accent); }

.login-theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  font-size: 1.2rem;
}

.login-about-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 28px auto 0;
  padding: 12px 26px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 0.94rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.login-about-link:hover {
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb), 0.5);
}

select {
  background: var(--panel-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 30px 8px 10px;
  font-size: 0.88rem;
  font-family: inherit;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b949e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s ease;
}

select:hover { border-color: var(--accent); }
select:focus { outline: none; border-color: var(--accent); }
select:disabled { opacity: 0.35; cursor: not-allowed; }

:root[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2359636e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.btn {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
}

.btn:hover { border-color: var(--accent); }

.btn-danger { color: var(--red); }
.btn-danger:hover { border-color: var(--red); }

.btn-warning { color: var(--amber); }
.btn-warning:hover { border-color: var(--amber); }

.btn-start { color: var(--green); }
.btn-start:hover { border-color: var(--green); }

.btn-network {
  padding: 6px 12px;
  font-size: 0.82rem;
  line-height: 1.6;
  border-radius: 6px;
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn:disabled:hover { border-color: var(--border); }

.btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary:hover { filter: brightness(1.08); }

[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  border-radius: 10px;
  box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), 0.6);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="dark"] .btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 10px 28px -6px rgba(var(--accent-rgb), 0.7);
}

[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  border-radius: 10px;
  box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb), 0.55);
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="light"] .btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 24px -6px rgba(var(--accent-rgb), 0.65);
}

.badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-connected { background: rgba(var(--green-rgb), 0.15); color: var(--green); }
.badge-connecting { background: rgba(var(--amber-rgb), 0.15); color: var(--amber); }
.badge-disconnected { background: rgba(var(--red-rgb), 0.15); color: var(--red); }

.conn-dot {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
}

.badge-running { background: rgba(var(--green-rgb), 0.15); color: var(--green); }
.badge-stopped { background: rgba(var(--gray-rgb), 0.15); color: var(--gray); }

.badge-pid {
  background: rgba(var(--gray-rgb), 0.1);
  color: var(--text-dim);
  font-family: monospace;
  text-transform: none;
  letter-spacing: normal;
}

main {
  flex: 1;
  min-width: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 28px 60px;
}

h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0 0 12px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-header h2, .section-header h3 { margin: 0; }

.section-description {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 720px;
  margin: 0 0 16px;
}

.current-project-label {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.project-control-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.project-control-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.network-status-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.project-control-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.project-control-divider {
  width: 1px;
  align-self: stretch;
  min-height: 22px;
  background: var(--border);
  margin-left: auto;
}

main > section + section {
  margin-top: 36px;
}

main > section {
  scroll-margin-top: 20px;
}

.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.agent-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

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

.agent-card.idle {
  border-left: 3px solid var(--gray);
  opacity: 0.75;
}

.agent-card.processing {
  border: 1px solid rgba(var(--green-rgb), 0.5);
  border-left: 3px solid var(--green);
  background: linear-gradient(180deg, rgba(var(--green-rgb), 0.10), var(--panel) 60%);
  box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.15), 0 0 18px rgba(var(--green-rgb), 0.20);
  animation: processingGlow 2.2s ease-in-out infinite;
}

.agent-card.processing:hover { transform: translateY(-1px); }

@keyframes processingGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.15), 0 0 14px rgba(var(--green-rgb), 0.18); }
  50% { box-shadow: 0 0 0 1px rgba(var(--green-rgb), 0.35), 0 0 26px rgba(var(--green-rgb), 0.38); }
}

.agent-card.process-manager {
  border: 1px solid rgba(var(--manager-rgb), 0.35);
  border-left: 3px solid var(--manager);
  background: linear-gradient(180deg, rgba(var(--manager-rgb), 0.07), var(--panel) 70%);
}

.agent-card.process-manager.idle { opacity: 1; }

.agent-card.process-manager.processing {
  border: 1px solid rgba(var(--manager-rgb), 0.35);
  border-left: 3px solid var(--manager);
}

.agent-card.process-manager .agent-name { color: var(--manager); font-weight: 700; }

.agent-card.not-ready {
  border: 1px solid rgba(var(--red-rgb), 0.5);
  border-left: 3px solid var(--red);
  background: linear-gradient(180deg, rgba(var(--red-rgb), 0.08), var(--panel) 65%);
  opacity: 1;
}

.service-errors-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.service-error-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(var(--red-rgb), 0.5);
  border-left: 3px solid var(--red);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(var(--red-rgb), 0.1), var(--panel) 70%);
  font-size: 0.85rem;
}

.service-error-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

.service-error-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-error-title {
  font-weight: 600;
  color: var(--red);
}

.service-error-message {
  color: var(--text);
}

.service-error-time {
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  white-space: nowrap;
}

.agent-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.agent-name {
  font-weight: 600;
  font-size: 1.02rem;
}

.agent-card.processing .agent-name { font-weight: 700; }
.agent-card.processing .agent-preview { color: var(--text); }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-dot.processing {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: dotPulse 1.4s ease-in-out infinite;
}
.status-dot.idle { background: var(--gray); }
.status-dot.not-ready { background: var(--red); box-shadow: 0 0 6px var(--red); }

@keyframes dotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 4px var(--green); }
  50% { transform: scale(1.5); box-shadow: 0 0 10px var(--green); }
}

.status-label {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.status-label.processing {
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.75rem;
}

.agent-model {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.agent-model.not-ready {
  color: var(--red);
  font-weight: 600;
}

.card-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.icon-btn {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.78rem;
  cursor: pointer;
  line-height: 1.6;
}

.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.icon-btn-danger:hover { color: var(--red); border-color: var(--red); }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.icon-btn:disabled:hover { color: var(--text-dim); border-color: var(--border); }

.agent-card-body {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.agent-flow {
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 6px;
}

.agent-flow .arrow { color: var(--text-dim); margin: 0 4px; }

.agent-preview {
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.messages-stats {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.msg-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 8px 4px 4px;
  cursor: pointer;
  font: inherit;
}

.msg-stat:hover { border-color: var(--border); }

.msg-stat.active {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

.msg-status.all { background: var(--panel-2, var(--panel)); color: var(--text-dim); }

.msg-stat-count {
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

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

.summary-content {
  max-width: 640px;
}

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

.summary-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.summary-stat-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}

.summary-stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.summary-stat-tile-wide {
  grid-column: 1 / -1;
}

.summary-section-title {
  margin: 20px 0 10px;
  font-size: 0.95rem;
  color: var(--text-dim);
}

.tool-usage-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tool-usage-row {
  display: grid;
  grid-template-columns: 160px 1fr 34px;
  gap: 12px;
  align-items: center;
  font-size: 0.85rem;
}

.tool-usage-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Cascadia Code", "Consolas", monospace;
  font-size: 0.8rem;
}

.tool-usage-bar-track {
  height: 8px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.tool-usage-bar {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.tool-usage-count {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.agent-token-usage-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-token-usage-row {
  display: grid;
  grid-template-columns: 140px 1fr 90px 90px 100px;
  gap: 12px;
  align-items: center;
  font-size: 0.85rem;
}

.agent-token-usage-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.agent-token-usage-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.agent-token-usage-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.agent-token-usage-total {
  font-weight: 700;
}

.message-row {
  display: grid;
  grid-template-columns: 56px 160px 1fr 90px;
  gap: 10px;
  align-items: center;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}

.message-row:hover { border-color: var(--accent); }

.msg-number {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
}

.msg-status-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.msg-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
}

.msg-status.completed { background: rgba(var(--green-rgb),0.15); color: var(--green); }
.msg-status.inprogress { background: rgba(var(--amber-rgb),0.15); color: var(--amber); }
.msg-status.new { background: rgba(var(--accent-rgb),0.15); color: var(--accent); }

.msg-preview {
  color: var(--text-dim);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.msg-route {
  color: var(--text);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.msg-time { color: var(--text-dim); text-align: right; }

.empty-state {
  color: var(--text-dim);
  font-style: italic;
}

.output-breadcrumb {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.output-breadcrumb .crumb {
  cursor: pointer;
}

.output-breadcrumb .crumb:hover {
  color: var(--accent);
}

.output-breadcrumb .crumb.current {
  color: var(--text);
  font-weight: 600;
  cursor: default;
}

.output-breadcrumb .crumb-sep {
  margin: 0 6px;
}

.output-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.output-row {
  display: grid;
  grid-template-columns: 24px 1fr 90px 100px auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
}

.output-row:hover { border-color: var(--accent); }

.tool-activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}

.tool-activity-live {
  border-color: rgba(var(--green-rgb), 0.4);
}

.tool-activity-pulse {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: status-dot-pulse 1.1s ease-in-out infinite;
}

.tool-activity-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tool-activity-title {
  font-weight: 600;
}

.tool-activity-agent {
  color: var(--manager);
}

.tool-activity-args {
  color: var(--text-dim);
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-activity-time {
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.pfile-row {
  cursor: default;
}

.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.output-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.output-size, .output-time {
  color: var(--text-dim);
  font-size: 0.78rem;
  text-align: right;
  white-space: nowrap;
}

.model-template-row {
  grid-template-columns: 24px 160px 1fr auto;
}

.mcp-server-row {
  grid-template-columns: 24px 200px 1fr auto;
}

.user-row {
  grid-template-columns: 24px 1fr 160px 120px auto;
}

.knowledge-base-row {
  grid-template-columns: 1fr 120px auto;
}

.agent-template-row {
  grid-template-columns: 1fr 1fr auto;
}

.ai-news-row {
  grid-template-columns: 24px 160px 1fr 120px auto;
}

.landing-contact-row {
  grid-template-columns: 160px 220px 1fr 150px 150px auto;
}

.execute-command-tool-row {
  grid-template-columns: 1fr 120px 150px auto;
}

.mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.kb-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runs-subheading {
  margin: 18px 0 8px;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.run-row {
  grid-template-columns: 16px 1fr 130px 130px 100px 90px;
  align-items: center;
  cursor: default;
}

.run-row-active {
  border-color: rgba(var(--green-rgb), 0.4);
  background: linear-gradient(180deg, rgba(var(--green-rgb), 0.08), var(--panel) 70%);
}

.schedule-row {
  grid-template-columns: 150px 100px 1fr 1fr 100px auto;
  cursor: default;
}

.run-project {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-time {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.run-tokens {
  text-align: right;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.run-row .badge {
  justify-self: start;
}

/* Shared with schedule rows (recurrence interval column) - run rows use .badge instead. */
.run-status {
  text-align: right;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
  justify-self: center;
}

.status-dot-pending {
  opacity: 0.5;
  animation: status-dot-pulse 1.1s ease-in-out infinite;
}

.status-dot-ok { background: var(--green); }
.status-dot-error { background: var(--red); }

@keyframes status-dot-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.85; }
}

.mt-provider {
  font-weight: 600;
  text-transform: capitalize;
}

.mt-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.output-preview-image {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  flex: 1;
  overflow: auto;
}

.output-preview-image img {
  max-width: 100%;
  height: auto;
}

.hidden { display: none !important; }

.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  justify-content: flex-end;
  z-index: 100;
}

.detail-panel {
  width: min(1200px, 95vw);
  height: 100%;
  background: var(--panel);
  border-left: 1px solid var(--border);
  padding: 24px;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

#helpOverlay .detail-panel,
#adminOverlay .detail-panel {
  width: 100%;
}

.playground-setup {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.playground-setup > div {
  flex: 1 1 220px;
  min-width: 180px;
}

.playground-setup select {
  margin: 0;
}

.playground-messages {
  flex: 1;
  min-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
  background: var(--panel-alt);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.playground-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.playground-msg-role {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.playground-msg-user {
  align-self: flex-end;
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}

.playground-msg-assistant {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--border);
}

.playground-msg-tool {
  align-self: flex-start;
  background: rgba(var(--manager-rgb), 0.12);
  border: 1px solid rgba(var(--manager-rgb), 0.3);
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  max-width: 100%;
}

.playground-msg-loading {
  padding: 12px;
}

.playground-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.playground-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: playground-typing-bounce 1.2s infinite ease-in-out;
}

.playground-typing span:nth-child(2) { animation-delay: 0.2s; }
.playground-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes playground-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.playground-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.playground-input-row .form-textarea {
  flex: 1;
  resize: vertical;
}

.admin-layout {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  flex: 1;
  min-height: 0;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 220px;
  flex-shrink: 0;
}

.admin-nav-item {
  text-align: left;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
}

.admin-nav-item:hover {
  background: var(--panel-alt);
  color: var(--text);
}

.admin-nav-item.active {
  background: var(--panel-alt);
  border-color: var(--border);
  color: var(--text);
  font-weight: 600;
}

.admin-nav-group-label {
  margin-top: 12px;
  padding: 12px 14px 0;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.admin-content {
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-left: 24px;
}

.settings-form {
  max-width: 640px;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text);
  margin: 14px 0 6px;
  cursor: pointer;
}

.section-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#detailContent {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
  flex-shrink: 0;
}

.detail-close-inline {
  position: static;
}

.detail-close:hover {
  color: var(--red);
  border-color: var(--red);
  background: rgba(var(--red-rgb), 0.12);
}

.detail-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.detail-meta {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.detail-meta div { margin-bottom: 4px; }

.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.detail-text {
  white-space: pre-wrap;
  font-family: "Cascadia Code", "Consolas", monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  flex: 1;
  min-height: 300px;
  overflow-y: auto;
}

.form-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 14px 0 6px;
}

.form-label:first-child { margin-top: 0; }

.form-input, .form-textarea {
  width: 100%;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea {
  background: var(--panel-alt);
  border-radius: 10px;
}

.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: var(--red);
}

.schedule-type-options {
  display: flex;
  gap: 16px;
  font-size: 0.88rem;
}

.schedule-type-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.schedule-interval-row {
  display: flex;
  gap: 8px;
}

.runs-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 14px;
}

.runs-filter-row .form-label {
  margin: 0;
}

.runs-filter-row .form-input {
  flex: 0 0 auto;
  width: auto;
}

.runs-filter-row .btn {
  padding: 8px 12px;
  font-size: 0.88rem;
}

.schedule-interval-row .form-input:first-child {
  flex: 0 0 90px;
}

.form-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-hint {
  color: var(--text-dim);
  font-size: 0.76rem;
  margin: 4px 0 0;
}

.form-textarea {
  font-family: "Cascadia Code", "Consolas", monospace;
  font-size: 0.82rem;
  resize: vertical;
  flex: 1;
  min-height: 200px;
}

.form-input-group {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.form-input-group .form-input { flex: 1; min-width: 0; }

.form-input-toggle {
  flex-shrink: 0;
  padding: 0 10px;
}

.form-input-toggle-active { color: var(--accent); border-color: var(--accent); }

#dynForm {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.form-error {
  color: var(--red);
  font-size: 0.82rem;
  margin-top: 12px;
}

.form-result {
  font-size: 0.82rem;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.form-result-success {
  color: var(--green);
  border-color: var(--green);
  background: rgba(var(--green-rgb), 0.1);
}

.form-result-error {
  color: var(--red);
  border-color: var(--red);
  background: rgba(var(--red-rgb), 0.1);
}

.form-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-secondary {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}

.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.help-intro {
  color: var(--text-dim);
  margin: 0 0 16px;
  line-height: 1.5;
}

.help-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.05));
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 20px;
}

.help-callout-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.help-callout p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.help-callout strong {
  color: var(--accent);
}

.help-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.help-tool {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

.help-tool h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
}

/* Kept in the list rather than removed, so it stays discoverable as something that exists but
   is currently switched off. */
.help-tool-disabled {
  opacity: 0.72;
  border-style: dashed;
}

.help-badge {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--amber-rgb), 0.15);
  color: var(--amber);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.help-tool p {
  margin: 0 0 8px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.help-tool p:last-child { margin-bottom: 0; }

.help-example {
  color: var(--text-dim);
}

.help-tool code {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.82rem;
}

/* Placed at the end of the file (rather than alongside the sidebar rules near the top) so
   these overrides win the cascade against the unconditional component rules above, which are
   defined later in the file than that first breakpoint and would otherwise take precedence. */
@media (max-width: 760px) {
  main {
    padding: 16px 14px 40px;
  }

  .section-header {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .section-header-actions {
    flex-wrap: wrap;
  }

  .agents-grid {
    grid-template-columns: 1fr;
  }

  /* Fixed-column grid rows (message list, output/model-template/mcp/run lists) don't leave
     enough room for their content on narrow screens, which forces the whole page to scroll
     horizontally. Let each cell wrap onto its own line instead. */
  .message-row,
  .output-row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .msg-status-col,
  .msg-preview,
  .output-name,
  .mt-provider,
  .mt-url,
  .run-project {
    flex: 1 1 140px;
    min-width: 0;
  }

  .msg-time,
  .output-size,
  .output-time,
  .run-time,
  .run-tokens,
  .run-status {
    text-align: left;
  }

  .row-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .detail-panel {
    width: 100%;
    padding: 16px;
  }

  .admin-layout {
    flex-direction: column;
    gap: 16px;
  }

  .admin-nav {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .admin-content {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 16px;
  }

  /* On narrow screens there isn't room to push main content aside when the sidebar opens -
     it would squeeze into an unusable sliver. Cover the screen instead, like a standard
     mobile nav drawer; close it via the ✕ inside it or by tapping the hamburger again. */
  .sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--topbar-height));
    z-index: 85;
    transition: transform 0.2s ease;
    transform: translateX(0);
  }

  .app-shell.sidebar-collapsed .sidebar {
    width: 100%;
    padding: 20px 16px;
    border-right: none;
    overflow-y: auto;
    transform: translateX(-100%);
  }
}

/* ---------- Accessibility utilities ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  z-index: 1000;
  padding: 10px 18px;
  /* Darkened accent shade (not the raw --accent token) so white text clears the 4.5:1 AA
     contrast minimum - #6366f1 with white text only reaches ~4.47:1, just under the threshold. */
  background: #575af0;
  color: #fff;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

/* ---------- Accessibility widget (font size / high contrast / reduce motion) ---------- */

.legion-a11y-toggle {
  flex-shrink: 0;
  z-index: 400;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 8px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.legion-a11y-toggle svg { pointer-events: none; }

.legion-a11y-toggle:hover { border-color: var(--accent); }

/* Deliberately large: this panel exists specifically for people with low vision or limited
   motor control, so it's sized well past the usual compact-dropdown convention - bigger text,
   bigger touch targets (44px+), more breathing room between rows. */
.legion-a11y-panel {
  position: fixed;
  top: calc(var(--topbar-height) + 8px);
  right: 12px;
  z-index: 401;
  width: 440px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--topbar-height) - 24px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
}

.legion-a11y-panel.hidden { display: none; }

.legion-a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.legion-a11y-panel-header h2 {
  font-size: 1.5rem;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

.legion-a11y-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.legion-a11y-close:hover { color: var(--text); }

.legion-a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.legion-a11y-panel-header + .legion-a11y-row { border-top: none; }

.legion-a11y-row-label {
  font-size: 1.2rem;
  color: var(--text);
}

.legion-a11y-font-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.legion-a11y-btn {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}

.legion-a11y-btn:hover { border-color: var(--accent); }

.legion-a11y-font-value {
  min-width: 64px;
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-dim);
}

.legion-a11y-switch-row {
  position: relative;
  cursor: pointer;
}

.legion-a11y-switch-row input[type="checkbox"] {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 34px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.legion-a11y-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  flex-shrink: 0;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.15s ease;
}

.legion-a11y-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.15s ease, background 0.15s ease;
}

.legion-a11y-switch-row input:checked + .legion-a11y-switch {
  background: var(--accent);
  border-color: var(--accent);
}

.legion-a11y-switch-row input:checked + .legion-a11y-switch::before {
  transform: translateX(26px);
  background: #fff;
}

.legion-a11y-switch-row input:focus-visible + .legion-a11y-switch {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.legion-a11y-reset {
  width: 100%;
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
}

.legion-a11y-reset:hover { border-color: var(--accent); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .legion-a11y-switch,
  .legion-a11y-switch::before {
    transition: none;
  }
}

@media (max-width: 560px) {
  .legion-a11y-panel { right: 6px; width: calc(100vw - 12px); padding: 22px; }
}

/* High-contrast mode - tuned for the dark landing-page theme this widget ships on. Raises
   --text-dim/--border well past the AA minimum and flattens gradients/brand color to plain
   white/black for maximum legibility, at the cost of the usual brand styling. */
:root[data-a11y-contrast="high"] {
  --text-dim: #e8e9ed;
  --border: #7a7f8c;
}

:root[data-a11y-contrast="high"] .lp-hero-gradient {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #ffffff;
  animation: none;
}

:root[data-a11y-contrast="high"] .lp-eyebrow,
:root[data-a11y-contrast="high"] .lp-news-tag,
:root[data-a11y-contrast="high"] .lp-news-link:hover,
:root[data-a11y-contrast="high"] .legion-cookie-notice p a {
  color: #ffffff;
}

:root[data-a11y-contrast="high"] .btn-primary {
  background: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
  box-shadow: none;
}

:root[data-a11y-contrast="high"] .lp-step-num {
  background: #ffffff;
  color: #000000;
}

/* Force-disable motion when toggled on in the widget, independent of the OS-level
   prefers-reduced-motion setting - mirrors that query's intent but stays user-controlled. */
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ---------- Voice assistant widget (landing page) ---------- */

/* Lives inside .lp-nav-actions, next to the "Skontaktuj się" link - see the insertBefore call in
   voice-assistant-widget.js (same technique accessibility-widget.js uses for its own nav icon).
   A muted accent tint (not a full gradient/pulse) - enough to read as its own thing next to the
   plain nav links without competing with the "Kontakt" CTA for attention. */
.legion-voice-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 999px;
  height: 46px;
  padding: 0 18px;
  font-weight: 600;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.legion-voice-nav-btn:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.55);
}

.legion-voice-nav-btn svg { flex-shrink: 0; pointer-events: none; }

/* Live-call state stays a plain, steady red rather than an animated pulse - a clear but calm
   "recording" indicator, not another attention-grabbing effect. */
.legion-voice-nav-btn.is-active {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
}

@media (max-width: 760px) {
  .legion-voice-nav-btn-label { display: none; }
  .legion-voice-nav-btn { width: 46px; height: 46px; justify-content: center; padding: 0; border-radius: 50%; }
}

.legion-voice-panel {
  position: fixed;
  top: calc(var(--topbar-height) + 12px);
  right: 20px;
  z-index: 409;
  width: 320px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - var(--topbar-height) - 24px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
}

.legion-voice-panel.hidden { display: none; }

.legion-voice-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.legion-voice-panel-header h2 {
  font-size: 1.05rem;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

.legion-voice-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.legion-voice-close:hover { color: var(--text); }

.legion-voice-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.legion-voice-orb {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legion-voice-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.18);
  transition: border-color 0.3s ease;
}

.legion-voice-orb-core {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.legion-voice-orb-core svg { width: 24px; height: 24px; }

/* Connecting - the ring spins while the call is being set up. The only spinning element in the
   panel, so it reads unambiguously as "in progress" rather than "live". */
.legion-voice-orb[data-state="connecting"] .legion-voice-orb-ring {
  border-color: transparent;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  animation: legionVoiceRingSpin 0.9s linear infinite;
}

.legion-voice-orb[data-state="connecting"] .legion-voice-orb-core {
  color: var(--accent);
  animation: legionVoiceCorePulse 1.2s ease-in-out infinite;
}

/* Active - the ring stops spinning and breathes instead (a calmer, steady "live" signal), and the
   core switches to a solid accent fill so the whole orb reads as "on" at a glance. */
.legion-voice-orb[data-state="active"] .legion-voice-orb-ring {
  border-color: rgba(var(--accent-rgb), 0.35);
  animation: legionVoiceRingGlow 2.4s ease-in-out infinite;
}

.legion-voice-orb[data-state="active"] .legion-voice-orb-core {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.04);
}

@keyframes legionVoiceRingSpin {
  to { transform: rotate(360deg); }
}

@keyframes legionVoiceCorePulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes legionVoiceRingGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.25); }
  50% { box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0); }
}

/* Bar equalizer under the orb. Height is driven live from mic/playback audio levels via the
   --legion-voice-level custom property, set from JS on every animation frame while a call is
   active (see renderVoiceLevel in voice-assistant-widget.js) - it reacts to whoever is actually
   talking rather than looping a canned animation. Hidden until the call is connected. */
.legion-voice-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 22px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.legion-voice-orb[data-state="active"] + .legion-voice-bars {
  opacity: 1;
}

.legion-voice-bars i {
  display: block;
  width: 4px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: bottom;
  transition: transform 100ms ease-out;
}

.legion-voice-bars i:nth-child(1) { transform: scaleY(calc(0.15 + var(--legion-voice-level, 0) * 0.55)); transition-delay: 0ms; }
.legion-voice-bars i:nth-child(2) { transform: scaleY(calc(0.15 + var(--legion-voice-level, 0) * 0.85)); transition-delay: 30ms; }
.legion-voice-bars i:nth-child(3) { transform: scaleY(calc(0.15 + var(--legion-voice-level, 0) * 1)); transition-delay: 60ms; }
.legion-voice-bars i:nth-child(4) { transform: scaleY(calc(0.15 + var(--legion-voice-level, 0) * 0.85)); transition-delay: 90ms; }
.legion-voice-bars i:nth-child(5) { transform: scaleY(calc(0.15 + var(--legion-voice-level, 0) * 0.55)); transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .legion-voice-orb-ring,
  .legion-voice-orb-core {
    animation: none !important;
  }
  .legion-voice-bars i {
    transition: none !important;
  }
}

.legion-voice-status {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

.legion-voice-progress {
  margin-bottom: 12px;
}

.legion-voice-progress.hidden { display: none; }

.legion-voice-progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--panel-alt);
  overflow: hidden;
}

.legion-voice-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 1s linear;
}

.legion-voice-progress-fill.is-warning { background: var(--amber); }
.legion-voice-progress-fill.is-critical { background: var(--red); }

.legion-voice-progress-label {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.4;
}

.legion-voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.legion-voice-btn-icon { display: inline-flex; flex-shrink: 0; }

.legion-voice-btn-start {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  box-shadow: 0 10px 26px -10px rgba(var(--accent-rgb), 0.65);
}

.legion-voice-btn-start:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(var(--accent-rgb), 0.75); }
.legion-voice-btn-start:active { transform: translateY(0); box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), 0.6); }

.legion-voice-btn-stop {
  background: linear-gradient(135deg, #fb7185, var(--red));
  box-shadow: 0 10px 26px -10px rgba(var(--red-rgb), 0.6);
}

.legion-voice-btn-stop:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(var(--red-rgb), 0.7); }
.legion-voice-btn-stop:active { transform: translateY(0); box-shadow: 0 6px 16px -8px rgba(var(--red-rgb), 0.55); }

.legion-voice-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 560px) {
  .legion-voice-panel { right: 10px; width: calc(100vw - 20px); }
}

/* ---------- Cookie notice banner ---------- */

.legion-cookie-notice {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
  animation: legionCookieNoticeIn 0.4s ease both;
}

.legion-cookie-notice p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}

/* Lightened accent (not the raw --accent token) - #6366f1 as normal-weight text on --panel
   only reaches ~4.19:1, short of the 4.5:1 AA minimum. */
.legion-cookie-notice p a { color: #7c7ef3; text-decoration: underline; }

.legion-cookie-notice-btn {
  display: block;
  margin: 10px auto 0;
  padding: 5px 20px;
  font-size: 0.8rem;
  white-space: nowrap;
}

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

@media (prefers-reduced-motion: reduce) {
  .legion-cookie-notice { animation: none; }
}

@media (max-width: 560px) {
  .legion-cookie-notice { padding: 10px 14px; }

  .legion-cookie-notice p {
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .legion-cookie-notice-btn {
    margin-top: 8px;
    padding: 4px 18px;
    font-size: 0.74rem;
  }
}