/* Ori — agent panel styling, in the spirit of Zed's agent panel:
   a quiet column of conversation, tool activity and a composer pinned at
   the bottom. Light and dark follow the system preference. */

:root {
	color-scheme: light dark;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

	--bg: #fafafa;
	--panel: #ffffff;
	--text: #1c1c1c;
	--muted: #6b6b6b;
	--border: #e2e2e2;
	--accent: #3b82f6;
	--user-bubble: #e8f0fe;
	--error: #b91c1c;
	--error-bg: #fee2e2;
	--code-bg: #f2f2f2;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1e2025;
		--panel: #26282e;
		--text: #e6e6e6;
		--muted: #9a9a9a;
		--border: #3a3d45;
		--accent: #60a5fa;
		--user-bubble: #2f3a4f;
		--error: #fca5a5;
		--error-bg: #3f2222;
		--code-bg: #1a1c20;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
}

.app {
	display: flex;
	flex-direction: column;
	height: 100vh;
	max-width: 52rem;
	margin: 0 auto;
}

/* ---- header ---- */

.topbar {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.6rem 1rem;
	border-bottom: 1px solid var(--border);
}

.topbar-title {
	font-size: 1.05rem;
	margin: 0;
}

.status {
	font-size: 0.75rem;
	color: var(--muted);
}

.status-online::before,
.status-offline::before,
.status-connecting::before {
	content: "●";
	margin-right: 0.3rem;
}

.status-online::before {
	color: #22c55e;
}

.status-offline::before {
	color: #ef4444;
}

.status-connecting::before {
	color: #eab308;
}

/* ---- thread ---- */

.thread {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.thread-empty,
.thread-working {
	color: var(--muted);
	font-size: 0.85rem;
	font-style: italic;
}

.message {
	border-radius: 8px;
	padding: 0.55rem 0.8rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.message-user {
	align-self: flex-end;
	background: var(--user-bubble);
	white-space: pre-wrap;
	max-width: 85%;
}

.message-agent {
	background: var(--panel);
	border: 1px solid var(--border);
}

.message-error {
	background: var(--error-bg);
	color: var(--error);
	font-size: 0.85rem;
}

/* ---- markdown ---- */

.markdown > :first-child {
	margin-top: 0;
}

.markdown > :last-child {
	margin-bottom: 0;
}

.markdown pre {
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.6rem;
	overflow-x: auto;
}

.markdown code {
	background: var(--code-bg);
	border-radius: 4px;
	padding: 0.1rem 0.3rem;
	font-size: 0.85em;
}

.markdown pre code {
	background: none;
	padding: 0;
}

.markdown table {
	border-collapse: collapse;
}

.markdown th,
.markdown td {
	border: 1px solid var(--border);
	padding: 0.3rem 0.6rem;
}

/* ---- thoughts ---- */

.thought {
	border: 1px dashed var(--border);
	border-radius: 8px;
	padding: 0.35rem 0.8rem;
	color: var(--muted);
	font-size: 0.9rem;
}

.thought-summary {
	cursor: pointer;
	user-select: none;
}

.thought-body {
	padding-top: 0.4rem;
}

/* ---- tool calls ---- */

.tool {
	border: 1px solid var(--border);
	border-left: 3px solid var(--muted);
	border-radius: 8px;
	padding: 0.35rem 0.8rem;
	background: var(--panel);
	font-size: 0.9rem;
}

.tool-in_progress {
	border-left-color: var(--accent);
}

.tool-completed {
	border-left-color: #22c55e;
}

.tool-failed {
	border-left-color: #ef4444;
}

.tool-summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	user-select: none;
}

.tool-title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tool-status {
	font-size: 0.72rem;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.05rem 0.5rem;
}

.tool-status-failed {
	color: var(--error);
}

.tool-body {
	padding: 0.4rem 0 0.2rem;
}

.tool-locations {
	margin: 0 0 0.4rem;
	padding-left: 1.1rem;
	color: var(--muted);
}

.tool-diff {
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.5rem;
	overflow-x: auto;
}

.tool-diff-path {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--muted);
}

.tool-diff pre {
	margin: 0;
	font-size: 0.8rem;
}

.tool-diff-old {
	color: #dc2626;
}

.tool-diff-new {
	color: #16a34a;
}

.tool-terminal {
	color: var(--muted);
	font-style: italic;
}

/* ---- plan ---- */

.plan {
	margin: 0 1rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.4rem 0.8rem;
	background: var(--panel);
	font-size: 0.85rem;
}

.plan-summary {
	cursor: pointer;
	user-select: none;
	color: var(--muted);
}

.plan-entries {
	list-style: none;
	margin: 0.4rem 0 0.2rem;
	padding: 0;
}

.plan-entry {
	padding: 0.1rem 0;
}

.plan-entry-completed {
	color: var(--muted);
	text-decoration: line-through;
}

.plan-entry-in_progress {
	color: var(--accent);
}

/* ---- permissions ---- */

.permission {
	margin: 0.5rem 1rem 0;
	border: 1px solid var(--accent);
	border-radius: 8px;
	padding: 0.6rem 0.8rem;
	background: var(--panel);
}

.permission-title {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
}

.permission-options {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.permission-option {
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.35rem 0.8rem;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	background: var(--panel);
	color: var(--text);
}

.permission-allow_once,
.permission-allow_always {
	background: var(--accent);
	border-color: var(--accent);
	color: #ffffff;
}

.permission-reject_once,
.permission-reject_always {
	border-color: #dc2626;
	color: #dc2626;
}

/* ---- composer ---- */

.composer {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem 1rem 1rem;
	border-top: 1px solid var(--border);
}

.composer-input {
	flex: 1;
	resize: none;
	background: var(--panel);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 0.55rem 0.7rem;
	font: inherit;
}

.composer-input:focus {
	outline: 2px solid var(--accent);
	outline-offset: -1px;
}

.composer-send,
.composer-stop {
	align-self: flex-end;
	border: none;
	border-radius: 8px;
	padding: 0.55rem 1rem;
	font: inherit;
	cursor: pointer;
	color: #ffffff;
}

.composer-send {
	background: var(--accent);
}

.composer-send:disabled {
	opacity: 0.5;
	cursor: default;
}

.composer-stop {
	background: #dc2626;
}