/* ===== Design Tokens ===== */
:root {
	--color-primary: #4285f4;
	--color-primary-hover: #3b78e0;
	--color-primary-light: #eff6ff;
	--color-success: #16a34a;
	--color-success-light: #f0fdf4;
	--color-error: #dc2626;
	--color-error-light: #fef2f2;
	--color-text: #1a1a1a;
	--color-text-secondary: #667085;
	--color-text-muted: #98a2b3;
	--color-border: #e5e7eb;
	--color-surface: #ffffff;
	--color-surface-alt: #f9fafb;

	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: "SF Mono", "Fira Code", ui-monospace, monospace;
	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-lg: 18px;

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-full: 9999px;

	--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.1);

	--sidebar-width: 220px;
	--header-height: 56px;
	--chat-max-width: 800px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	color: var(--color-text);
	background: var(--color-surface-alt);
	-webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; border: none; background: none; }
textarea { font: inherit; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Layout ===== */
#app {
	display: grid;
	height: 100vh;
	height: 100dvh;
	grid-template-rows: var(--header-height) 1fr;
	grid-template-columns: var(--sidebar-width) 1fr;
	grid-template-areas:
		"header header"
		"sidebar chat";
	overflow: hidden;
}

/* ===== Header ===== */
.header {
	grid-area: header;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	z-index: 10;
}
.header-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: var(--color-text);
}
.header-logo-icon {
	width: 32px;
	height: 32px;
	background: var(--color-primary);
	color: white;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
}
.header-spacer { flex: 1; }
.header-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}
.model-selector {
	padding: 6px 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	font-size: var(--font-size-sm);
	color: var(--color-text);
	cursor: pointer;
}
.model-selector:hover { border-color: var(--color-primary); }
.btn-clear {
	padding: 6px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	transition: all 0.15s;
}
.btn-clear:hover { border-color: var(--color-error); color: var(--color-error); }
.hamburger {
	display: none;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
}
.hamburger:hover { background: var(--color-surface-alt); }
.hamburger svg { width: 20px; height: 20px; stroke: var(--color-text); }

/* ===== Sidebar ===== */
.sidebar {
	grid-area: sidebar;
	background: var(--color-surface);
	border-right: 1px solid var(--color-border);
	overflow-y: auto;
	padding: 12px 0;
}
.sidebar-section { padding: 0 12px; margin-bottom: 16px; }
.sidebar-section-title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--color-text-muted);
	padding: 0 8px;
	margin-bottom: 6px;
}
.sidebar-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background 0.15s;
	position: relative;
}
.sidebar-item:hover { background: var(--color-surface-alt); }
.sidebar-item.active { background: var(--color-primary-light); }
.sidebar-avatar {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	color: white;
	flex-shrink: 0;
}
.sidebar-item-info {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
.sidebar-item-name {
	font-size: var(--font-size-sm);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sidebar-item-desc {
	font-size: 11px;
	color: var(--color-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sidebar-run-btn {
	width: 24px;
	height: 24px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s;
	flex-shrink: 0;
	color: var(--color-text-secondary);
}
.sidebar-item:hover .sidebar-run-btn { opacity: 1; }
.sidebar-run-btn:hover { background: var(--color-primary-light); color: var(--color-primary); }
.sidebar-run-btn svg { width: 14px; height: 14px; }

/* Pulsing indicator for active agent */
.sidebar-item .pulse-indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
	animation: pulse 1.5s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(0.8); }
}

/* ===== Chat Area ===== */
.chat-area {
	grid-area: chat;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-surface-alt);
}
.messages-container {
	flex: 1;
	overflow-y: auto;
	padding: 24px 16px;
	display: flex;
	flex-direction: column-reverse;
}
.messages-inner {
	max-width: var(--chat-max-width);
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column-reverse;
	gap: 16px;
}

/* ===== Empty State ===== */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 40px 20px;
	text-align: center;
}
.empty-state-icon {
	width: 64px;
	height: 64px;
	background: var(--color-primary);
	color: white;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 16px;
}
.empty-state h2 {
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin-bottom: 8px;
}
.empty-state p {
	color: var(--color-text-secondary);
	margin-bottom: 24px;
	max-width: 400px;
}
.suggestion-cards {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.suggestion-card {
	padding: 10px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: all 0.15s;
	max-width: 220px;
	text-align: left;
}
.suggestion-card:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

/* ===== Messages ===== */
.message {
	display: flex;
	gap: 10px;
	max-width: 100%;
}
.message-user {
	flex-direction: row-reverse;
}
.message-avatar {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	color: white;
	flex-shrink: 0;
	margin-top: 2px;
}
.message-body {
	max-width: 85%;
	min-width: 0;
}
.message-assistant .message-body {
	width: 85%;
}
.message-bubble {
	padding: 10px 14px;
	border-radius: var(--radius-md);
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.message-bubble table {
	width: 100%;
}
.message-user .message-bubble {
	background: var(--color-primary);
	color: white;
	border-bottom-right-radius: 4px;
}
.message-assistant .message-bubble {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-bottom-left-radius: 4px;
}
.message-header {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 4px;
}
.message-header .streaming-status {
	flex: 1;
	min-width: 0;
}
.message-header .agent-trail-toggle {
	flex-shrink: 0;
	margin-bottom: 0;
}
.message-timestamp {
	font-size: 11px;
	color: var(--color-text-muted);
	margin-top: 4px;
	padding: 0 4px;
}
.message-user .message-timestamp { text-align: right; }

/* ===== Agent Trail ===== */
.agent-trail-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
}
.agent-trail-toggle:hover { background: var(--color-surface-alt); }
.agent-trail-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s;
}
.agent-trail-toggle.expanded svg { transform: rotate(90deg); }
.agent-trail-events {
	display: none;
	flex-direction: column;
	gap: 6px;
	padding-left: 12px;
	border-left: 2px solid var(--color-border);
	margin-left: 4px;
}
.agent-trail-events.visible { display: flex; }


/* Trail event cards */
.trail-event {
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
}
.trail-agent-start {
	color: var(--color-primary);
	font-weight: 500;
}
.trail-handoff {
	color: var(--color-text-secondary);
	font-style: italic;
}
.trail-tool {
	border: 1px solid var(--color-border);
	background: var(--color-surface);
}
.trail-tool.running {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
}
.trail-tool.complete {
	border-color: var(--color-success);
	background: var(--color-success-light);
}
.trail-tool-header {
	display: flex;
	align-items: center;
	gap: 6px;
}
.trail-tool-header svg { width: 14px; height: 14px; }
.trail-tool-name { font-weight: 500; }
.trail-tool-duration {
	margin-left: auto;
	color: var(--color-text-muted);
	font-size: 11px;
}
.trail-tool-detail {
	margin-top: 4px;
	font-size: 12px;
	color: var(--color-text-secondary);
}
.trail-tool-output {
	margin-top: 4px;
	padding: 4px 8px;
	background: var(--color-surface-alt);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: 11px;
	max-height: 80px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-all;
}

/* ===== Streaming State ===== */
.streaming-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Current status indicator — matches trail event font */
.streaming-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	padding: 4px 0;
}
@keyframes dotPulse {
	0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
	40% { opacity: 1; transform: scale(1); }
}
/* Token streaming */
.streaming-text-bubble {
	min-height: 3lh;
	display: flex;
	align-items: center;
}
.streaming-text-bubble .streaming-text-content {
	flex: 1;
}
.streaming-text-content {
	will-change: contents;
}
.streaming-cursor {
	display: inline-block;
	width: 2px;
	height: 1em;
	background: var(--color-primary);
	vertical-align: text-bottom;
	margin-left: 1px;
	animation: blink 0.8s step-end infinite;
}
@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}
.typing-indicator {
	display: inline-flex;
	gap: 4px;
	padding: 4px 0;
}
.typing-indicator span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-text-muted);
	animation: dotPulse 1.4s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

.handoff-connector {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}
.handoff-connector::before {
	content: '';
	width: 20px;
	border-top: 2px dashed var(--color-border);
}

/* ===== Error Message ===== */
.message-error .message-bubble {
	background: var(--color-error-light);
	border: 1px solid var(--color-error);
	color: var(--color-error);
}
.error-retry {
	margin-top: 8px;
	padding: 4px 12px;
	border: 1px solid var(--color-error);
	border-radius: var(--radius-sm);
	color: var(--color-error);
	font-size: var(--font-size-sm);
	background: transparent;
}
.error-retry:hover { background: var(--color-error); color: white; }

/* System message */
.message-system {
	justify-content: center;
}
.message-system .message-bubble {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	text-align: center;
}

/* ===== Input Area ===== */
.input-area {
	padding: 12px 16px 16px;
	background: var(--color-surface-alt);
}
.input-inner {
	max-width: var(--chat-max-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: border-color 0.15s;
}
.input-inner:focus-within { border-color: var(--color-primary); }
.input-textarea {
	flex: 1;
	border: none;
	outline: none;
	resize: none;
	font-size: var(--font-size-base);
	line-height: 1.5;
	max-height: 126px; /* ~6 lines */
	min-height: 21px;
	background: transparent;
	color: var(--color-text);
}
.input-textarea::placeholder { color: var(--color-text-muted); }
.btn-send {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.15s;
}
.btn-send.send {
	background: var(--color-primary);
	color: white;
}
.btn-send.send:hover { background: var(--color-primary-hover); }
.btn-send.send:disabled { background: var(--color-border); cursor: default; }
.btn-send.stop {
	background: var(--color-error);
	color: white;
}
.btn-send.stop:hover { background: #b91c1c; }
.btn-send svg { width: 18px; height: 18px; }

/* Input mode toggle */
.btn-input-mode {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	background: var(--color-surface);
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	cursor: pointer;
	transition: all 0.15s;
}
.btn-input-mode:hover { border-color: var(--color-text-muted); }
.btn-input-mode.active {
	background: var(--color-primary);
	color: white;
	border-color: var(--color-primary);
}
.btn-input-mode.active:hover { background: var(--color-primary-hover); }

/* Scroll to bottom */
.scroll-to-bottom {
	position: sticky;
	bottom: 16px;
	align-self: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-md);
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
}
.scroll-to-bottom.visible { display: flex; }
.scroll-to-bottom svg { width: 18px; height: 18px; stroke: var(--color-text-secondary); }

/* ===== Markdown Content ===== */
.md-content p { margin-bottom: 8px; }
.md-content p:last-child { margin-bottom: 0; }
.md-content strong { font-weight: 600; }
.md-content em { font-style: italic; }
.md-content code {
	font-family: var(--font-mono);
	font-size: 12px;
	background: var(--color-surface-alt);
	padding: 1px 4px;
	border-radius: 3px;
}
.md-content pre {
	margin: 8px 0;
	padding: 10px;
	background: #1e1e1e;
	color: #d4d4d4;
	border-radius: var(--radius-sm);
	overflow-x: auto;
	font-size: 12px;
	line-height: 1.5;
}
.md-content pre code {
	background: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}
.md-content ul, .md-content ol {
	margin: 8px 0;
	padding-left: 20px;
}
.md-content li { margin-bottom: 4px; }
.md-content li:last-child { margin-bottom: 0; }
.md-content a { color: var(--color-primary); }
.message-user .md-content a { color: #bfdbfe; }
.message-user .md-content code { background: rgba(255,255,255,0.15); }

/* ===== JSON Viewer ===== */
.json-viewer {
	background: #1e1e1e;
	color: #d4d4d4;
	padding: 10px;
	border-radius: var(--radius-sm);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	margin: 4px 0;
}
.json-key { color: #9cdcfe; }
.json-string { color: #ce9178; }
.json-number { color: #b5cea8; }
.json-boolean { color: #569cd6; }
.json-null { color: #569cd6; font-style: italic; }

/* ===== Session View ===== */
.session-view {
	grid-area: chat;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--color-surface-alt);
	padding: 24px 16px;
}
.session-view-inner {
	max-width: var(--chat-max-width);
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.session-view-info {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.session-view-info-title {
	font-weight: 600;
	font-size: var(--font-size-base);
	margin-bottom: 4px;
}
.session-view-info-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--font-size-sm);
}
.session-view-info-label {
	color: var(--color-text-secondary);
}
.session-view-info-row code {
	font-family: var(--font-mono);
	font-size: 12px;
	background: var(--color-surface-alt);
	padding: 2px 6px;
	border-radius: 3px;
}
.session-view-input {
	display: flex;
	gap: 8px;
}
.session-view-input-field {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-base);
	font-family: var(--font-sans);
	background: var(--color-surface);
	color: var(--color-text);
	outline: none;
}
.session-view-input-field:focus {
	border-color: var(--color-primary);
}
.btn-session-action {
	padding: 6px 14px;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: white;
	font-size: var(--font-size-sm);
	font-weight: 500;
	transition: background 0.15s;
}
.btn-session-action:hover {
	background: var(--color-primary-hover);
}
.session-view-status {
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	padding: 8px 0;
}
.session-view-error {
	padding: 10px 14px;
	background: var(--color-error-light);
	border: 1px solid var(--color-error);
	border-radius: var(--radius-sm);
	color: var(--color-error);
	font-size: var(--font-size-sm);
}
.session-view-json-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.session-view-json-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
}
.btn-copy {
	padding: 4px 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	color: var(--color-text-secondary);
	transition: all 0.15s;
}
.btn-copy:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.session-view-json {
	background: #1e1e1e;
	color: #d4d4d4;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.5;
	padding: 16px;
	border-radius: var(--radius-sm);
	white-space: pre-wrap;
	word-break: break-all;
	user-select: all;
	overflow: auto;
	max-height: 60vh;
}

/* ===== Responsive: Tablet ===== */
@media (max-width: 1023px) {
	#app { grid-template-columns: 56px 1fr; }
	.sidebar { padding: 8px 0; }
	.sidebar-section { padding: 0 4px; }
	.sidebar-section-title { display: none; }
	.sidebar-item { justify-content: center; padding: 8px; }
	.sidebar-item-info { display: none; }
	.sidebar-run-btn { display: none; }
	.sidebar-avatar { width: 36px; height: 36px; }
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 767px) {
	#app {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"chat";
	}
	.sidebar {
		display: none;
		position: fixed;
		top: var(--header-height);
		left: 0;
		bottom: 0;
		width: 280px;
		z-index: 100;
		box-shadow: var(--shadow-md);
	}
	.sidebar.open { display: block; }
	.sidebar-item-info { display: block; }
	.sidebar-run-btn { display: flex; }
	.sidebar-section-title { display: block; }
	.hamburger { display: flex; }
	.sidebar-overlay {
		display: none;
		position: fixed;
		inset: 0;
		top: var(--header-height);
		background: rgba(0,0,0,0.3);
		z-index: 99;
	}
	.sidebar-overlay.open { display: block; }
	.suggestion-cards { flex-direction: column; align-items: stretch; }
	.suggestion-card { max-width: none; }
}