:root {
	color-scheme: dark;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: #080b12;
	color: #d9e1ee;
	font-size: 13px;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 960px; overflow: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.muted { color: #7f8da3; margin-left: 12px; }

.topbar {
	height: 48px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 0 16px;
	border-bottom: 1px solid #202839;
	background: #0d111b;
}
.top-actions { justify-self: end; display: flex; align-items: center; gap: 12px; color: #8e9bb0; }
.connection { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.connection i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #e5a34a; box-shadow: 0 0 8px currentColor; }
.connection.live { color: #48d597; }
.connection.live i { background: #48d597; }
.connection.closed { color: #f06d78; }
.connection.closed i { background: #f06d78; }

.workspace { height: calc(100vh - 48px); min-height: 0; display: grid; grid-template-columns: 22% 35% 43%; overflow: hidden; }
.panel { min-width: 0; min-height: 0; background: #0a0e17; }
.tree-panel, .events-panel { border-right: 1px solid #202839; }
.tree-panel { display: flex; min-height: 0; flex-direction: column; padding: 15px 12px 14px; }
.panel-title { color: #76849a; font-size: 10px; font-weight: 800; letter-spacing: .12em; }

input[type="search"] {
	width: 100%;
	margin: 11px 0;
	padding: 8px 10px;
	border: 1px solid #293247;
	border-radius: 5px;
	outline: none;
	background: #101622;
}
input[type="search"]:focus { border-color: #7768dd; box-shadow: 0 0 0 2px #7768dd22; }

.call-tree { flex: 1; min-height: 0; overflow: auto; }
.tree-row { display: flex; align-items: center; width: 100%; }
.tree-row .tree-node { flex: 1; width: auto; min-width: 0; }
.tree-disclosure {
	flex: none;
	width: 24px;
	padding: 7px 0;
	border: 0;
	background: transparent;
	color: #7f8da3;
	font-size: 10px;
}
.tree-disclosure:hover { background: #192131; color: #c4bcff; }
.tree-node {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 100%;
	padding: 7px 8px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
}
.tree-node:hover, .tree-node.selected { background: #7565dd20; }
.tree-node.selected { color: #b7aefd; box-shadow: inset 2px 0 #7969e7; }
.tree-node .kind { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #68758b; }
.tree-node.llm .kind { background: #8a79ee; }
.tree-node.tool .kind { background: #42c78c; }
.tree-node.interaction .kind { background: #4fa8e8; }
.tree-node .name { overflow: hidden; text-overflow: ellipsis; }
.tree-node .count { margin-left: auto; color: #65738a; font-size: 11px; }
.tree-node.depth-1 { padding-left: 22px; }
.tree-node.depth-2 { padding-left: 38px; }
.tree-node.depth-3 { padding-left: 54px; }
.tree-panel footer { flex: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid #202839; color: #68768c; line-height: 1.6; font-size: 11px; }

.events-panel { display: flex; flex-direction: column; }
.events-toolbar { padding: 15px 13px 8px; border-bottom: 1px solid #202839; }
.events-toolbar > div:first-child { display: grid; grid-template-columns: 1fr minmax(120px, 45%); align-items: center; gap: 10px; }
.events-toolbar input { margin: 0; padding: 6px 8px; }
.filters { display: flex; gap: 4px; margin-top: 10px; }
button { padding: 5px 9px; border: 1px solid #2a3448; border-radius: 4px; background: #111724; }
button:hover { background: #192131; }
button.active { color: #c4bcff; border-color: #6558be; background: #6758c329; }
#pause { margin-left: auto; }
#pause.active { color: #efc06d; border-color: #8f6e36; background: #6f54272b; }

.event-list { flex: 1; overflow: auto; }
.event-row { width: 100%; padding: 10px 13px; border: 0; border-bottom: 1px solid #1b2230; border-radius: 0; background: transparent; text-align: left; }
.event-row:hover { background: #111725; }
.event-row.selected { background: #7565dd1a; box-shadow: inset 3px 0 #7869e8; }
.event-meta { display: flex; justify-content: space-between; margin-bottom: 4px; color: #647187; font-size: 10px; font-variant-numeric: tabular-nums; }
.event-type { color: #aeb9c9; font-weight: 650; }
.event-type.llm { color: #a99cf7; }
.event-type.tool { color: #54d79b; }
.event-type.error { color: #f17680; }
.event-summary { float: right; max-width: 55%; overflow: hidden; color: #77859a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.detail-panel { display: flex; min-height: 0; flex-direction: column; padding: 14px; overflow: hidden; }
.tabs { display: flex; gap: 5px; border-bottom: 1px solid #242c3e; }
.tabs button { margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #7e8ba0; }
.tabs button.active { border-bottom-color: #8677ec; color: #d5cffd; }
.tabs button[hidden] { display: none; }
.detail-heading { min-height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-heading span { display: block; font-weight: 700; }
.detail-heading small { display: block; max-width: 36vw; margin-top: 4px; color: #69768b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-heading button:disabled { cursor: default; opacity: .45; }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
pre { min-width: 0; min-height: 100%; margin: 0; padding: 15px; border: 1px solid #20293a; border-radius: 7px; background: #070a10; color: #c8d2e1; font: 11.5px/1.58 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversation { display: flex; min-height: 100%; flex-direction: column; gap: 10px; padding: 2px 4px 14px 0; }
.message-card { padding: 12px 13px; border: 1px solid #232d40; border-left: 3px solid #66758d; border-radius: 7px; background: #0e1420; }
.message-card.role-user { border-left-color: #4fa8e8; background: #0d1825; }
.message-card.role-assistant { border-left-color: #8b79ee; background: #151327; }
.message-card.role-llmrequest { border-left-color: #6f7f99; background: #111824; }
.message-card.role-system { border-left-color: #d0a14d; background: #1a1710; }
.message-card.role-tool, .message-card.role-toolresult { border-left-color: #43c98e; background: #0d1a17; }
.message-role { margin-bottom: 8px; color: #8290a5; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.message-role { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.message-role-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.message-collapse { padding: 2px 6px; border-color: #364158; background: #111827; color: #9aa8bc; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.message-collapse:hover { background: #1a2433; color: #d2dbea; }
.final-output { color: #b9adff; font-size: 9px; letter-spacing: .08em; }
.message-card.collapsed .message-role { margin-bottom: 5px; }
.message-preview { overflow: hidden; color: #8996a9; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.message-body[hidden], .message-preview[hidden] { display: none; }
.message-block { color: #d6deeb; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-block + .message-block { margin-top: 10px; padding-top: 10px; border-top: 1px solid #242c3d; }
.message-block small { display: block; margin-bottom: 5px; color: #7e8ba0; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.message-block.thinking { color: #9ba7b9; font-style: italic; }
.message-block.tool-call, .message-block.tool-result { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body pre { margin: .55em 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: .8em 0 .45em; line-height: 1.25; }
.markdown-body h1 { font-size: 1.35em; }
.markdown-body h2 { font-size: 1.22em; }
.markdown-body h3 { font-size: 1.12em; }
.markdown-body ul, .markdown-body ol { padding-left: 1.6em; }
.markdown-body blockquote { padding-left: 10px; border-left: 3px solid #46546b; color: #9da9ba; }
.markdown-body code { padding: .12em .32em; border-radius: 3px; background: #070b12; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.markdown-body pre { min-height: 0; padding: 10px 12px; overflow-x: auto; }
.markdown-body pre code { padding: 0; background: transparent; }
.markdown-body a { color: #76b9f3; text-decoration: underline; text-underline-offset: 2px; }
.markdown-body table { width: 100%; border-collapse: collapse; }
.markdown-body th, .markdown-body td { padding: 5px 7px; border: 1px solid #303a4e; text-align: left; }
.markdown-image-alt { color: #8390a4; font-style: italic; }
.detail-scroll > [hidden] { display: none; }
.empty { display: grid; place-items: center; color: #5f6c81; }

@media (max-width: 1100px) {
	.workspace { grid-template-columns: 22% 38% 40%; }
	.topbar { grid-template-columns: 1fr auto; }
	.connection { display: none; }
}