/* Running Agents (agent monitor) — extracted from the inline <style> blocks
   in index/active/show/claude_session.html.haml, prompt_rules.css pattern.
   .agent-monitor = list pages; .session-detail = detail pages, with
   .ra-app (app session) / .ra-claude (claude session) page variants. */

/* ── List pages (index + active) ── */
body:has(.agent-monitor) { margin: 0; min-height: 100dvh; font-family: system-ui, sans-serif; background: #f5f5f5; }
.agent-monitor { max-width: 1400px; margin: 0 auto; padding: 2rem 1rem; }
.agent-monitor .monitor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.agent-monitor .monitor-header h1 { margin: 0; font-size: 2rem; color: #111827; }
.agent-monitor .live-indicator { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #059669; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.agent-monitor .pulse { width: 10px; height: 10px; background: #10b981; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
.agent-monitor .monitor-tabs { display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin-bottom: 2rem; }
.agent-monitor .tab { padding: 0.625rem 1.25rem; text-decoration: none; color: #6b7280; font-weight: 500; font-size: 0.9375rem; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s; }
.agent-monitor .tab:hover { color: #111827; }
.agent-monitor .tab--active { color: #111827; border-bottom-color: #111827; font-weight: 600; }
.agent-monitor .empty-state { text-align: center; padding: 4rem 1rem; color: #6b7280; font-size: 1.125rem; }
.agent-monitor .sessions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1.5rem; }
.agent-monitor .session-card { background: #fff; border-radius: 0.75rem; padding: 1.25rem; border-left: 4px solid #d1d5db; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; position: relative; overflow: hidden; cursor: pointer; }
.agent-monitor .session-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.agent-monitor .session-card--active { border-left-color: #10b981; }
.agent-monitor .session-card--active::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #10b981, transparent); background-size: 200% 100%; animation: shimmer 3s linear infinite; }
.agent-monitor .session-card--completed { border-left-color: #5a7280; opacity: 0.7; }
.agent-monitor .session-card--errored { border-left-color: #ef4444; background: #fef2f2; }
.agent-monitor .session-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.agent-monitor .session-id { font-family: monospace; font-size: 0.875rem; color: #6b7280; font-weight: 500; }
.agent-monitor .session-status { padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.agent-monitor .status-active { background: #d1fae5; color: #065f46; }
.agent-monitor .status-completed { background: #e5eced; color: #2d4350; }
.agent-monitor .status-errored { background: #fee2e2; color: #991b1b; }
.agent-monitor .session-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
.agent-monitor .meta-item { display: flex; flex-direction: column; gap: 0.25rem; }
.agent-monitor .meta-label { font-size: 0.75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.agent-monitor .meta-value { font-size: 0.875rem; color: #374151; font-weight: 500; }
.agent-monitor .session-prompt { font-size: 0.875rem; color: #4b5563; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.agent-monitor .session-error { margin-top: 1rem; padding: 0.75rem; background: #fee2e2; border: 1px solid #fca5a5; border-radius: 0.5rem; font-size: 0.875rem; color: #991b1b; font-weight: 500; }
@keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.9); }
    }
@keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
@media (max-width: 768px) {
  .agent-monitor .sessions-grid { grid-template-columns: 1fr; }
}

/* ── Detail pages: shared ── */
body:has(.session-detail) { margin: 0; min-height: 100dvh; font-family: system-ui, sans-serif; background: #f5f5f5; }
.session-detail { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
.session-detail .back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: #6b7280; text-decoration: none; font-size: 0.875rem; margin-bottom: 1.5rem; transition: color 0.15s; }
.session-detail .back-link:hover { color: #111827; }
.session-detail .session-header { background: #fff; border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.session-detail .session-header-info { flex: 1; min-width: 0; }
.session-detail .session-id-full { font-family: monospace; font-size: 1rem; color: #374151; word-break: break-all; font-weight: 600; margin-bottom: 0.5rem; }
.session-detail .session-status { padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; flex-shrink: 0; }
.session-detail .status-active { background: #d1fae5; color: #065f46; }
.session-detail .status-completed { background: #e5eced; color: #2d4350; }
.session-detail .status-errored { background: #fee2e2; color: #991b1b; }
.session-detail .event-row { display: flex; gap: 1rem; align-items: flex-start; }
.session-detail .event-time { font-size: 0.7rem; color: #9ca3af; font-family: monospace; white-space: nowrap; padding-top: 0.8rem; min-width: 5.5rem; text-align: right; }
.session-detail .event-body { flex: 1; min-width: 0; }
.session-detail .event-label { font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.session-detail .event-text { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.session-detail .event-tool { background: #fffbeb; border-left: 3px solid #f59e0b; }
.session-detail .event-tool .event-label { color: #b45309; }
.session-detail .event-user { background: #eff6ff; border-left: 3px solid #93c5fd; }
.session-detail .event-user .event-label { color: #1d4ed8; }
.session-detail .event-user .event-content { color: #1e3a8a; white-space: pre-wrap; }
.session-detail .event-other { background: #f9fafb; border: 1px solid #f3f4f6; }
.session-detail .event-other .event-label { color: #9ca3af; }
.session-detail .monitor-tabs { display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin-bottom: 1.5rem; }
.session-detail .tab { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: #6b7280; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s; }
.session-detail .tab:hover { color: #111827; }
.session-detail .tab--active { color: #111827; border-bottom-color: #111827; font-weight: 600; }

/* ── Detail: app session (show) ── */
.ra-app .session-started { font-size: 0.875rem; color: #6b7280; }
.ra-app .events-timeline { display: flex; flex-direction: column; gap: 0.75rem; }
.ra-app .event-bubble { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.6; }
.ra-app .event-start { background: #e5eced; border-left: 3px solid #5a7280; }
.ra-app .event-start .event-label { color: #1d4ed8; }
.ra-app .event-start .event-content { color: #1e3a8a; white-space: pre-wrap; }
.ra-app .event-text .event-content { color: #374151; overflow-wrap: break-word; word-break: break-word; }
.ra-app .event-tool .event-content { font-family: monospace; font-size: 0.8rem; color: #78350f; }
.ra-app .event-thinking { background: #f3f4f6; border-left: 3px solid #9ca3af; }
.ra-app .event-thinking .event-label { color: #6b7280; }
.ra-app .event-thinking .event-content { color: #4b5563; font-style: italic; white-space: pre-wrap; }
.ra-app .event-result { background: #f0fdf4; border: 1px solid #86efac; }
.ra-app .event-result .event-label { color: #166534; }
.ra-app .event-result .event-content { color: #14532d; }
.ra-app .event-done { background: #dcfce7; border: 2px solid #22c55e; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #166534; }
.ra-app .event-error { background: #fee2e2; border-left: 3px solid #ef4444; }
.ra-app .event-error .event-label { color: #991b1b; }
.ra-app .event-error .event-content { color: #7f1d1d; font-family: monospace; font-size: 0.8rem; word-break: break-all; }
.ra-app .event-md > *:first-child { margin-top: 0; }
.ra-app .event-md > *:last-child { margin-bottom: 0; }
.ra-app .event-md h1,
.ra-app .event-md h2,
.ra-app .event-md h3 { font-weight: 700; margin: 1em 0 0.4em; line-height: 1.3; }
.ra-app .event-md h1 { font-size: 1.25em; }
.ra-app .event-md h2 { font-size: 1.1em; }
.ra-app .event-md h3 { font-size: 1em; }
.ra-app .event-md p { margin: 0.4em 0; }
.ra-app .event-md ul,
.ra-app .event-md ol { margin: 0.4em 0; padding-left: 1.5em; }
.ra-app .event-md li { margin: 0.1em 0; }
.ra-app .event-md code { background: #f3f4f6; border-radius: 0.2em; padding: 0.1em 0.3em; font-family: monospace; font-size: 0.85em; }
.ra-app .event-md pre { background: #f3f4f6; border-radius: 0.375rem; padding: 0.75em 1em; overflow-x: auto; margin: 0.5em 0; }
.ra-app .event-md pre code { background: none; padding: 0; font-size: 0.8em; }
.ra-app .event-md hr { border: none; border-top: 1px solid #e5e7eb; margin: 0.75em 0; }
.ra-app .event-md strong { font-weight: 700; }
.ra-app .event-md em { font-style: italic; }
.ra-app .event-md blockquote { border-left: 3px solid #d1d5db; margin: 0.5em 0; padding: 0 0.75em; color: #6b7280; }
.ra-app .export-md-btn { padding: 0.25rem 0.625rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 500; color: #374151; background: #f3f4f6; text-decoration: none; border: 1px solid #d1d5db; transition: background 0.15s; }
.ra-app .export-md-btn:hover { background: #e5e7eb; }

/* ── Detail: claude session ── */
.ra-claude .session-meta { font-size: 0.8rem; color: #6b7280; margin-top: 0.3rem; }
.ra-claude .session-meta code { font-size: 0.75rem; color: #9ca3af; }
.ra-claude .claude-timeline { display: flex; flex-direction: column; gap: 0.75rem; }
.ra-claude .event-bubble { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.6; margin-bottom: 0.5rem; }
.ra-claude .event-text .event-content { color: #374151; white-space: pre-wrap; }
.ra-claude .event-tool .event-content { font-family: monospace; font-size: 0.8rem; color: #78350f; white-space: pre-wrap; }
.ra-claude .event-thinking { background: #f3f4f6; border-left: 3px solid #9ca3af; cursor: pointer; padding: 0.75rem 1rem; }
.ra-claude .event-thinking .event-label { color: #6b7280; margin-bottom: 0; }
.ra-claude .event-thinking .event-content { color: #4b5563; font-style: italic; white-space: pre-wrap; margin-top: 0.5rem; }
.ra-claude .event-thinking summary { list-style: none; }
.ra-claude .event-thinking summary::-webkit-details-marker { display: none; }
.ra-claude .event-tool-result { background: #f9fafb; border-left: 3px solid #d1d5db; }
.ra-claude .event-tool-result .event-label { color: #6b7280; }
.ra-claude .event-tool-result .event-label code { font-size: 0.7rem; font-weight: 400; }
.ra-claude .event-tool-result .event-content { font-family: monospace; font-size: 0.8rem; color: #374151; white-space: pre-wrap; }
.ra-claude .event-tool-result-error { border-left-color: #ef4444; }
.ra-claude .event-tool-result-error .event-label { color: #991b1b; }
.ra-claude .token-usage { font-size: 0.7rem; color: #9ca3af; font-family: monospace; margin-top: 0.25rem; margin-bottom: 0.25rem; }
.ra-claude .event-code-scroll { max-height: 4800px; overflow-y: auto; overflow-x: auto; margin: 0; padding: 0.5rem 0 0 0; word-break: break-all; }
.ra-claude .tool-id { font-weight: 400; font-size: 0.65rem; color: #a78a3a; font-family: monospace; text-transform: none; letter-spacing: 0; }