DemoCoder/web/style.css

.markdown-body {
	line-height: 1.6;
}

.markdown-body p {
	margin: 0.5em 0;
}

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

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

.markdown-body pre {
	background: #1e1e2e;
	color: #cdd6f4;
	padding: 1rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	margin: 0.5em 0;
}

.markdown-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.875em;
}

.markdown-body :not(pre) > code {
	background: #e5e7eb;
	color: #1e40af;
	padding: 0.125em 0.375em;
	border-radius: 0.25rem;
}

.markdown-body pre code {
	background: none;
	padding: 0;
	color: inherit;
	font-size: 0.8125rem;
	line-height: 1.7;
}

.markdown-body blockquote {
	border-left: 3px solid #d1d5db;
	padding-left: 1rem;
	color: #6b7280;
	margin: 0.5em 0;
}

.markdown-body ul,
.markdown-body ol {
	padding-left: 1.5rem;
	margin: 0.5em 0;
}

.markdown-body li {
	margin: 0.25em 0;
}

.markdown-body li > p {
	display: inline;
}

.markdown-body hr {
	border: none;
	border-top: 1px solid #d1d5db;
	margin: 1em 0;
}

.markdown-body table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin: 0.5em 0;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	overflow: hidden;
}

.markdown-body th,
.markdown-body td {
	border: none;
	padding: 0.5rem 0.875rem;
	text-align: left;
}

.markdown-body th {
	background: #f9fafb;
	font-weight: 600;
	color: #374151;
	border-bottom: 2px solid #e5e7eb;
}

.markdown-body tr:nth-child(even) {
	background: #fafbfc;
}

.markdown-body tr:nth-child(odd) {
	background: #ffffff;
}

.markdown-body tr:hover {
	background: #f3f4f6;
}

.markdown-body a {
	color: #2563eb;
	text-decoration: underline;
}

.markdown-body img {
	max-width: 100%;
	border-radius: 0.375rem;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
	margin: 1em 0 0.5em 0;
	font-weight: 600;
	line-height: 1.3;
}

.markdown-body h1 {
	font-size: 1.5rem;
}

.markdown-body h2 {
	font-size: 1.25rem;
}

.markdown-body h3 {
	font-size: 1.125rem;
}

.thinking-panel > summary {
	list-style: none;
}

.thinking-panel > summary::-webkit-details-marker {
	display: none;
}

.thinking-chevron {
	transition: transform 0.15s ease;
}

.thinking-panel[open] .thinking-chevron {
	transform: rotate(90deg);
}

.tool-meta-list {
	display: grid;
	gap: 0.5rem;
}

.tool-meta-row {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
}

.tool-meta-key {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #94a3b8;
}

.tool-meta-value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #0f172a;
	white-space: pre-wrap;
	word-break: break-word;
}

.tool-text-block {
	margin: 0;
	max-height: 18rem;
	overflow: auto;
	border: 1px solid #dbe4f0;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.95);
	padding: 0.875rem 1rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.8125rem;
	line-height: 1.5rem;
	color: #0f172a;
	white-space: pre-wrap;
	word-break: break-word;
}

.tool-text-block-error {
	border-color: #fecaca;
	background: #fff1f2;
	color: #7f1d1d;
}

.tool-placeholder {
	border: 1px dashed #cbd5e1;
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	color: #64748b;
	font-style: italic;
}

.tool-file-preview {
	max-height: 12.25rem;
	overflow-y: auto;
	border: 1px solid #dbe4f0;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.95);
}

.tool-file-preview.is-expanded {
	max-height: 60vh;
}

.tool-file-preview pre {
	margin: 0;
	padding: 0.875rem 1rem;
	background: transparent;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.8125rem;
	line-height: 1.5rem;
	color: inherit;
	white-space: pre-wrap;
	word-break: break-word;
}

.tool-diff {
	overflow: hidden;
	border-radius: 0.75rem;
	border: 1px solid #0f172a;
	background: #0f172a;
}

.tool-diff-header {
	padding: 0.625rem 0.875rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	line-height: 1.5;
	white-space: pre-wrap;
	color: #cbd5e1;
}

.tool-diff-body {
	max-height: 18rem;
	overflow: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.75rem;
	line-height: 1.5rem;
}

.tool-diff-line {
	display: flex;
	gap: 0.5rem;
	padding: 0 0.875rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.tool-diff-prefix {
	flex: 0 0 1rem;
	text-align: center;
	user-select: none;
	opacity: 0.7;
}

.tool-diff-remove {
	background: rgba(239, 68, 68, 0.08);
	color: #fecaca;
}

.tool-diff-add {
	background: rgba(16, 185, 129, 0.08);
	color: #a7f3d0;
}

.tool-diff-note {
	padding: 0.875rem;
	color: #cbd5e1;
}

.message-input {
	resize: none;
	overflow-y: hidden;
	min-height: 3.5rem;
	line-height: 1.5rem;
}