/* The chat panel (T05), styled after the chat in docs/mockups/flashcard-v5.html. A column beside the
   canvas (never over it: tldraw's own UI sits in the canvas corners), a narrow rail when closed. */

.ChatPanel {
	--ink: #0b0b0b;
	--ink2: #52514e;
	--muted: #898781;
	--hair: #ebe9e3;
	--axis: #c3c2b7;
	--page: #f4f3ef;
	--panel: #fff;
	--ok: #006300;
	--bad: #b42318;
	--warn-ink: #7a5200;
	--warn-bg: #fff6df;
	--hover-link: #e6effc;
	--sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
	flex: none;
	width: 380px;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--panel);
	border-left: 1px solid var(--hair);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

:root:has(.tl-theme__dark) .ChatPanel {
	--ink: #f2f1ed;
	--ink2: #c4c3be;
	--muted: #8f8e89;
	--hair: #2e2e2c;
	--axis: #5a5955;
	--page: #252523;
	--panel: #1a1a19;
	--ok: #4cc26a;
	--bad: #f07167;
	--warn-ink: #f3d28a;
	--warn-bg: #3a3019;
	--hover-link: #23344d;
}

.ChatPanel[data-open='false'] {
	width: 44px;
}

.ChatPanel *,
.ChatPanel *::before,
.ChatPanel *::after {
	box-sizing: border-box;
}

.ChatPanel :where(button) {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.ChatPanel button:focus-visible,
.ChatPanel textarea:focus-visible {
	outline: 2px solid hsl(217, 89%, 61%);
	outline-offset: 1px;
}

/* closed: a rail with the chat icon and a vertical label */
.ChatPanel-rail {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
	border: 0;
	background: none;
	color: var(--ink2);
}

.ChatPanel-rail:hover {
	background: var(--page);
	color: var(--ink);
}

.ChatPanel-rail span {
	writing-mode: vertical-rl;
	font-size: 13px;
	font-weight: 550;
	letter-spacing: 0.02em;
}

.ChatPanel-header {
	padding: 14px 14px 12px 16px;
	border-bottom: 1px solid var(--hair);
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.ChatPanel-title {
	font-weight: 650;
	font-size: 14px;
}

.ChatPanel-header small {
	display: block;
	color: var(--muted);
	font-size: 12px;
	margin-top: 2px;
	font-weight: 400;
}

.ChatPanel-x {
	margin-left: auto;
	border: 0;
	background: none;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	color: var(--muted);
	font-size: 18px;
	line-height: 1;
	flex: none;
}

.ChatPanel-x:hover {
	background: var(--page);
	color: var(--ink);
}

.ChatPanel-banner {
	margin: 10px 12px 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--warn-bg);
	color: var(--warn-ink);
	font-size: 12.5px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.ChatPanel-body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
}

.ChatPanel-empty {
	color: var(--muted);
	font-size: 12.5px;
}

.ChatPanel-divider {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ChatPanel-divider::before,
.ChatPanel-divider::after {
	content: '';
	flex: 1;
	border-top: 1px solid var(--hair);
}

.ChatTurn {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* messages */
.ChatMsg-user {
	align-self: flex-end;
	background: var(--page);
	border-radius: 10px 10px 2px 10px;
	padding: 8px 10px;
	max-width: 85%;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ChatMsg-agent {
	line-height: 1.5;
	overflow-wrap: anywhere;
}

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

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

.ChatMsg-agent p,
.ChatMsg-agent ul,
.ChatMsg-agent ol,
.ChatMsg-agent pre,
.ChatMsg-agent blockquote {
	margin: 0 0 0.6em;
}

.ChatMsg-agent ul,
.ChatMsg-agent ol {
	padding-left: 1.3em;
}

.ChatMsg-agent h1,
.ChatMsg-agent h2,
.ChatMsg-agent h3,
.ChatMsg-agent h4 {
	font-size: 13.5px;
	margin: 0.8em 0 0.3em;
}

.ChatMsg-agent code {
	background: var(--page);
	border-radius: 4px;
	padding: 0 3px;
	font-size: 12px;
}

.ChatMsg-agent pre {
	background: var(--page);
	border-radius: 8px;
	padding: 8px;
	overflow: auto;
}

.ChatMsg-agent pre code {
	padding: 0;
}

.ChatMsg-agent blockquote {
	border-left: 2px solid var(--hair);
	padding-left: 8px;
	color: var(--ink2);
}

.ChatMsg-agent a {
	color: inherit;
	text-underline-offset: 3px;
}

/* a paper the agent mentions: focuses it on this viewer's canvas */
.ChatPanel .pmn {
	border: 0;
	background: none;
	padding: 0;
	font-weight: 650;
	text-align: inherit;
	text-decoration: underline;
	text-decoration-color: var(--axis);
	text-underline-offset: 3px;
}

.ChatPanel .pmn:hover {
	text-decoration-color: var(--ink);
	background: var(--hover-link);
	border-radius: 3px;
}

/* thoughts: dimmed and collapsible */
.ChatThought {
	color: var(--muted);
	font-size: 12.5px;
}

.ChatThought-toggle {
	border: 0;
	background: none;
	padding: 0;
	color: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ChatThought-toggle:hover {
	color: var(--ink2);
}

.ChatCaret {
	display: inline-block;
	font-size: 10px;
	transition: transform 0.15s;
}

.ChatCaret[data-open='true'] {
	transform: rotate(90deg);
}

.ChatThought-text {
	margin-top: 4px;
	padding-left: 10px;
	border-left: 2px solid var(--hair);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-height: 240px;
	overflow: auto;
}

/* the plan */
.ChatPlan {
	border: 1px solid var(--hair);
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 12.5px;
}

.ChatPlan-h {
	color: var(--muted);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.ChatPlan ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ChatPlan li {
	display: flex;
	gap: 7px;
	align-items: flex-start;
}

.ChatPlan li[data-status='completed'] {
	color: var(--muted);
}

.ChatPlan-mark {
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 2px;
	border: 1.5px solid var(--axis);
	border-radius: 4px;
	display: grid;
	place-items: center;
	font-size: 10px;
	color: var(--ok);
}

.ChatPlan li[data-status='completed'] .ChatPlan-mark {
	border-color: var(--ok);
}

.ChatPlan li[data-status='in_progress'] .ChatPlan-mark {
	border: 0;
}

/* tool cards */
.ChatTool {
	border: 1px solid var(--hair);
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 12.5px;
}

.ChatTool-h {
	display: flex;
	gap: 6px;
	align-items: center;
	font-weight: 600;
}

.ChatTool-title {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ChatTool-d {
	color: var(--ink2);
	margin-top: 2px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ChatTool[data-status='failed'] .ChatTool-d {
	color: var(--bad);
}

.ChatTool-foot {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-top: 3px;
}

.ChatTool-lbl {
	color: var(--muted);
	font-size: 11.5px;
	margin-right: auto;
}

.ChatLinkBtn {
	border: 0;
	background: none;
	padding: 0;
	color: var(--ink2);
	font-size: 11.5px;
	text-decoration: underline;
	text-decoration-color: var(--axis);
	text-underline-offset: 2px;
	white-space: nowrap;
}

.ChatLinkBtn:hover {
	color: var(--ink);
	text-decoration-color: var(--ink);
}

.ChatTool-json {
	margin-top: 6px;
}

.ChatTool-jsonLabel {
	color: var(--muted);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ChatTool-json pre {
	margin: 3px 0;
	padding: 6px 8px;
	background: var(--page);
	border-radius: 6px;
	font-size: 11.5px;
	line-height: 1.4;
	max-height: 260px;
	overflow: auto;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.okc {
	color: var(--ok);
}

.badc {
	color: var(--bad);
}

.ChatPanel .spin {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid var(--hair);
	border-top-color: var(--ink2);
	border-radius: 50%;
	animation: ChatPanel-rot 0.8s linear infinite;
	flex: none;
}

@keyframes ChatPanel-rot {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ChatPanel .spin {
		animation-duration: 2.4s;
	}
}

/* permission prompts */
.ChatPermission {
	border: 1px solid var(--axis);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 12.5px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ChatPermission-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ChatPermission-answer {
	color: var(--muted);
}

/* how a turn ended */
.ChatTag {
	align-self: flex-start;
	border: 1px solid var(--hair);
	border-radius: 999px;
	padding: 0 8px;
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 600;
}

.ChatNote {
	color: var(--ink2);
	font-size: 12px;
}

.ChatNote--error {
	color: var(--bad);
}

/* buttons, as v5's .btn */
.ChatBtn {
	border: 0;
	background: var(--page);
	border-radius: 8px;
	padding: 5px 12px;
	font-size: 12.5px;
	font-weight: 550;
	white-space: nowrap;
}

.ChatBtn:hover {
	background: #eae8e2;
}

.ChatBtn--primary {
	background: var(--ink);
	color: var(--panel);
}

.ChatBtn--primary:hover {
	background: #2a2a28;
}

.ChatBtn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* the input */
.ChatPanel-foot {
	border-top: 1px solid var(--hair);
	padding: 10px 12px;
}

.ChatPanel-ctx {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--muted);
	min-height: 17px;
}

.ChatPanel-input {
	position: relative;
	margin-top: 6px;
}

.ChatPanel textarea {
	display: block;
	width: 100%;
	height: 58px;
	border: 1px solid var(--hair);
	border-radius: 8px;
	padding: 8px 64px 8px 8px;
	background: var(--panel);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	resize: none;
}

.ChatPanel-send {
	position: absolute;
	right: 6px;
	bottom: 6px;
}