:root {
  --bg: var(--vscode-editor-background);
  --fg: var(--vscode-editor-foreground);
  --border: var(--vscode-panel-border, #444);
  --row-hover: var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.04));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--vscode-font-family, monospace);
  font-size: 12px; color: var(--fg); background: var(--bg);
}
.toolbar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.toolbar button {
  background: var(--vscode-button-secondaryBackground, #333);
  color: var(--vscode-button-secondaryForeground, #ccc);
  border: 1px solid transparent; border-radius: 3px;
  padding: 3px 8px; cursor: pointer; font-size: 11px;
}
.toolbar button:hover { opacity: 0.85; }
.toolbar button.active { border-color: var(--fg); }
.toolbar .spacer { flex: 1; }
#messages { overflow-y: auto; height: calc(100vh - 42px); }
.row {
  display: grid; grid-template-columns: 60px 24px 100px 1fr 60px;
  align-items: center; gap: 6px; padding: 4px 12px;
  border-bottom: 1px solid var(--border); cursor: pointer; min-height: 28px;
}
.row:hover { background: var(--row-hover); }
.ts { color: #888; font-size: 10px; }
.dir { text-align: center; font-size: 13px; }
.badge {
  display: inline-block; border-radius: 3px; padding: 1px 6px;
  font-size: 10px; font-weight: 600; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.method { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dur { color: #888; font-size: 10px; text-align: right; }
.payload {
  display: none; padding: 8px 12px 8px 100px;
  border-bottom: 1px solid var(--border);
  background: var(--vscode-textCodeBlock-background, rgba(0, 0, 0, 0.15));
}
.payload.open { display: block; }
.payload pre {
  white-space: pre-wrap; word-break: break-all; font-size: 11px;
  max-height: 400px; overflow-y: auto;
}
.empty { text-align: center; padding: 48px; color: #888; }
