table, div, code, pre {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: %textSize%;
  /* Factor in viewport width to keep longer lines readable: */
  line-height: calc(1.1em + 0.45vw);
}
html, body {
  margin: 0;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  line-height: normal;
}
p {
  /* overflow: hidden; */
  margin: 0 0 1em 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 1em 0;
	width: 100%;
	word-break: initial;
	display: block;
	width: 100%;
	overflow-x: auto;
}
table th {
  padding: .3em .5em .4em;
  text-align: left;
  border: 0.5px solid hwb(0 75% 25%);
  /* background-color: hsl(38, 55%, 90%); */
  /* vertical-align: bottom; */
  word-break: initial;
}
table td {
  padding: .4em .5em .4em .4em;
  border: 0.5px solid hwb(0 75% 25%);
  /* border-width: 2em; */
  /* border-style: none; */
  /* vertical-align: top; */
}
/* table tr:nth-child(2n) {
  background-color: hsl(38, 55%, 93%);
} */

p:last-child {
  margin: 0;
}
code, pre {
  /* text-indent: 20pt; */
  font-family: Menlo, Courier, Monaco, 'Andale Mono', monospace;
  font-size: %codeSize%;

  width: 100%;
  padding: 2.5pt 7.5pt;
  border-radius: 2.5pt;
  background-color: hwb(0 100% 0% / 0.6);
  border: 0.5px solid hwb(0 75% 25%);
  overflow-x: auto;
}
code {
  /* padding: 2pt 3pt; */
  padding: 0.09vw 2.4pt;
}
pre {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 5.5pt 7.5pt;
}
pre > code {
  background-color: unset;
  border-radius: unset;
  padding: unset;
  border: unset;
}
/* Inside tables the cells already delimit — boxed inline code turns a result table
   into a circuit board. Plain monospace reads better there. */
table code {
  width: auto;
  padding: 0 1pt;
  border: none;
  background-color: transparent;
  overflow-x: visible;
}
.chat {
  display: flex;
  width: 100%;
  height: 100%;
}
.chat .messages {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
}
.chat .messages .date {
  margin: 0 auto;
  padding: 4pt 0;
  font-size: %dateSize%;
  color: #888;
  text-align: center;
  max-width: 100%;
  width: 100%;
  -webkit-user-select: none;
}
.chat .messages .date:first-child {
  padding-top: 12pt;
}
.chat .messages .message {
  /* padding: 8pt; */
  display: flex;
  max-width: 75%;
  min-width: 32pt;
  margin: 0 auto;
  /* margin-top: 4pt; */
  /* margin-bottom: 4pt; */
  /* About half the height of a single-line bubble: */
  /* border-radius: 16pt; */
  word-break: break-word;
}
.chat .messages .message.user {
  padding: 4pt 3pt;
  /* align: right; */
  margin-right: 3vw;
  /* color: white; */
  background-color: hwb(0 94% 6%);
  /* text-shadow: 0 0 4px hwb(195 0% 45% / 0.382); */
  border-radius: 12pt;
}
.chat .messages .message.assistant {
  /* align: left; */
  margin-left: 3vw;
  margin-right: 6vw;
  max-width: 100%;
  /* background-color: hwb(0 91% 9%); */
  padding: 8pt 0;
  border-radius: 0;
}
.chat .messages .message .details {
  flex: 1;
  width: 100%;
}
.chat .messages .message .details .text {
  padding: 2pt 7pt;
}
.chat .messages .message .details .tool_infos {
  padding: 2pt 7pt 7pt 7pt;
}
.chat .messages .message .details .tool_infos p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
	margin: 0 0 2pt 0;
}

/* The tool timeline: a collapsible list of steps, one row per tool call —
   body-size type, unboxed monospace names, one connector line for the whole list. */
details.tool_infos summary, details.prompt summary {
  cursor: pointer;
  color: #808080;
  font-size: %textSize%;
  -webkit-user-select: none;
  list-style: none;
}
details.tool_infos summary::-webkit-details-marker, details.prompt summary::-webkit-details-marker {
  display: none;
}
details.tool_infos summary::before, details.prompt summary::before {
  content: '▶';
  font-size: 62%;
  margin-right: 6pt;
  display: inline-block;
  vertical-align: 12%;
  transition: transform 0.15s;
}
details.tool_infos[open] summary::before, details.prompt[open] summary::before {
  transform: rotate(90deg);
}
details.tool_infos summary {
  margin-bottom: 4pt;
}
.tool_steps {
  margin-left: 2.5pt;
  padding-left: 11pt;
  border-left: 1.5pt solid hwb(0 84% 16%);
}
.chat .messages .message .details .tool_infos .tool_info {
  display: flex;
  align-items: center;
  gap: 5pt;
  padding: 2pt 0;
  min-width: 0;
  font-size: %textSize%;
  color: #555;
}
.chat .messages .message .details .tool_infos .tool_info p {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: %textSize%;
}
.tool_info code {
  width: auto;
  padding: 0;
  border: none;
  background-color: transparent;
  font-size: 94%;
  overflow-x: visible;
}
.tool_info.running {
  opacity: 0.8;
}
.tool_info.failed {
  color: #c0392b;
}
.tool_info .pulse-dots {
  flex: none;
}
.tool_info .pulse-dot {
  width: 3.5pt;
  height: 3.5pt;
}
.tool_infos .duration, .tool_info .count, .text.temporary .duration {
  flex: none;
  color: #999;
  font-size: 88%;
  font-variant-numeric: tabular-nums;
}
.tool_infos .duration:not(:empty)::before, .text.temporary .duration:not(:empty)::before {
  content: '·\00a0';
}
.text.temporary .duration {
  margin-left: 5pt;
}

/* Status lines ("Processing Data...") are progress, not response text —
   subdued, with the pulsing dots inline after the text. */
.chat .messages .message .details .text.temporary {
  color: #808080;
}
.chat .messages .message .details .text.temporary p {
  display: inline;
}
.chat .messages .message .details .text.temporary .pulse-dots {
  margin-left: 5pt;
  vertical-align: middle;
}

/* Skill invocations: chip + typed remainder, expanded prompt behind a disclosure. */
.chat .messages .message .details .skill {
  padding: 4pt 7pt 0 7pt;
}
.skill-chip {
  display: inline-block;
  padding: 1.5pt 8pt 2.5pt 8pt;
  border-radius: 10pt;
  font-size: %textSize%;
  font-weight: 600;
  color: hsl(205, 65%, 30%);
  background-color: hsl(205, 70%, 88%);
}
.chat .messages .message .details details.prompt {
  padding: 0 7pt 2pt 7pt;
}
.chat .messages .message .details details.prompt .text {
  margin-top: 2pt;
  padding: 2pt 0 0 11pt;
  border-left: 1.5pt solid hwb(0 84% 16%);
  color: #666;
}

/* A bare invocation (chip + prompt disclosure, no typed text) needs no bubble slab;
   the opened prompt gets the bubble surface instead. */
.chat .messages .message.user.skill-only {
  padding: 4pt 3pt;
  background: none;
}
.chat .messages .message.user.skill-only details.prompt .text {
  margin-top: 4pt;
  padding: 5pt 9pt 6pt 9pt;
  border-left: none;
  border-radius: 9pt;
  background-color: hwb(0 94% 6%);
}
div.image {
  line-height: 0;
  margin: 7pt 7pt 1.4em 7pt;
  border-radius: 3pt;
  overflow: hidden;
}
.chat .messages .message .details img {
  max-width: 100%;
  height: auto !important;
}

.pulse-dots {
	display: inline-flex;
	gap: 3pt;
}
.pulse-dot {
	width: 6pt;
	height: 6pt;
	background: #52B4E5;
	border-radius: 50%;
	animation: dotPulsating 1.4s infinite ease-in-out both;
}
.pulse-dot:nth-child(1) { animation-delay: -0.32s; }
.pulse-dot:nth-child(2) { animation-delay: -0.16s; }
.pulse-dot:nth-child(3) { animation-delay: 0; }
  
@keyframes dotPulsating {
	0%, 80%, 100% {
		transform: scale(0.8);
		opacity: 0.5;
	}
	40% {
		transform: scale(1.2);
		opacity: 1;
	}
}

.callout { padding: 12pt; margin: 1em 0; border-radius: 4pt; border-left: 3pt solid; }
.callout-title { display: flex; align-items: center; gap: 6pt; font-weight: 600; margin-bottom: 6pt; }
.callout-icon { flex-shrink: 0; }
.callout-content > :first-child { margin-top: 0; }
.callout-content > :last-child { margin-bottom: 0; }
.callout-note { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.callout-note .callout-icon { color: #3b82f6; }
.callout-info { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.callout-info .callout-icon { color: #3b82f6; }
.callout-tip { background: #dcfce7; border-color: #22c55e; color: #166534; }
.callout-tip .callout-icon { color: #22c55e; }
.callout-warning { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.callout-warning .callout-icon { color: #f59e0b; }
.callout-important { background: #ede9fe; border-color: #8b5cf6; color: #5b21b6; }
.callout-important .callout-icon { color: #8b5cf6; }
.callout-caution { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.callout-caution .callout-icon { color: #ef4444; }
details.callout summary { cursor: pointer; list-style: none; }
details.callout summary::-webkit-details-marker { display: none; }
details.callout summary::before { content: '▶'; margin-right: 6pt; transition: transform 0.2s; display: inline-block; }
details.callout[open] summary::before { transform: rotate(90deg); }
blockquote { border-left: 3pt solid #ddd; margin: 1em 0; padding-left: 15pt; color: #666; }

@media (min-width: 800pt) {
    .chat .messages .message.user {
        max-width: 600pt;
    }
    .chat .messages .message.assistant {
        max-width: 800pt;
    }
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
	pre, code {
        background-color: hwb(0 0% 100% / 0.2);
        border: 0.5px solid hwb(0 35% 65%);
    }
	table code {
		border: none;
		background-color: transparent;
	}
	.chat .messages .date {
	  color: #777;
	}
    a:link, a:visited, a:active {
        color: hsl(218, 100%, 72%);
    }
	.chat .messages .message.user {
	    background-color: hwb(0 35% 65%);
	}
	table {
		background-color: hwb(0 0% 100% / 0.2);
	}
	table th, table td {
		border: 0.5px solid hwb(0 32% 68%);
	}
	.callout-note, .callout-info { background: #1e3a5f; color: #93c5fd; }
	.callout-tip { background: #14532d; color: #86efac; }
	.callout-warning { background: #451a03; color: #fcd34d; }
	.callout-important { background: #2e1065; color: #c4b5fd; }
	.callout-caution { background: #450a0a; color: #fca5a5; }
	blockquote { border-color: #555; color: #aaa; }
	.tool_steps {
		border-color: hwb(0 32% 68%);
	}
	.chat .messages .message .details .tool_infos .tool_info {
		color: #b0b0b0;
	}
	.tool_info.failed {
		color: #e57368;
	}
	.tool_infos .duration, .tool_info .count, .text.temporary .duration {
		color: #8a8a8a;
	}
	.skill-chip {
		color: hsl(205, 75%, 78%);
		background-color: hsl(205, 45%, 24%);
	}
	.chat .messages .message .details details.prompt .text {
		border-color: hwb(0 32% 68%);
		color: #999;
	}
	.chat .messages .message.user.skill-only {
		background: none;
	}
	.chat .messages .message.user.skill-only details.prompt .text {
		background-color: hwb(0 35% 65%);
	}
	details.tool_infos summary, details.prompt summary {
		color: #8a8a8a;
	}
	.chat .messages .message .details .text.temporary {
		color: #909090;
	}
}
