/* =========================================================
   TK Blocks — kodede grafikker: Claude Code-terminalen (.tk-term)
   og Grok Bot-chatten (.tk-bot). Flyttet fra det klassiske temas
   theme.css. I armeret tilstand (.is-armed, sat af play.js) findes
   et element først, når uret når dets data-at; uden JS eller med
   reduced motion står slutbilledet færdigt.
   ========================================================= */

:root {
	--tk-font-mono: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	--tk-font-sans: var(--wp--preset--font-family--inter, Inter, system-ui, sans-serif);
	--tk-ink: #1d1d1f;
	--tk-dark: #1d1d1f;
	--tk-green: #9fe8b4;
	--tk-accent: #1d1d1f;

	--tk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--tk-term-bg: #16181d;
	--tk-term-line: rgba(255, 255, 255, 0.09);
	--tk-term-text: #e6e7ea;
	--tk-term-dim: #8b8f98;
	--tk-term-faint: #5d616b;
	--tk-term-claude: #d97757; /* kun velkomstboksen og "tænker"-stjernen */
	--tk-term-ok: #7ee2a0;
	--tk-term-wait: #f2b84b;
}

/* ---------- Fælles for begge vinduer ---------- */

.tk-term,
.tk-bot {
	position: relative;
	margin: 0;
	isolation: isolate;
	text-align: left;
}

/* Prikgitter bag vinduet — millimeterpapir, der fader ud mod kanterne.
   Kun lodret udhæng: på ydelsessiderne klipper intet forælder-element, så
   et vandret udhæng ville gøre siden bredere end skærmen. */
.tk-term::before,
.tk-bot::before {
	content: "";
	position: absolute;
	inset: -12% 0;
	z-index: -1;
	background-image: radial-gradient(circle, rgba(22, 24, 29, 0.13) 1px, transparent 1.4px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);
	mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 100%);
	pointer-events: none;
}

.tk-term__window,
.tk-bot__window {
	overflow: hidden;
	background: var(--tk-term-bg);
	color: var(--tk-term-text);
	box-shadow:
		0 0 0 1px rgba(22, 24, 29, 0.9),
		0 1px 0 rgba(255, 255, 255, 0.07) inset,
		0 2px 6px rgba(22, 24, 29, 0.08),
		0 40px 80px -28px rgba(22, 24, 29, 0.55);
}

.tk-term__titlebar,
.tk-bot__titlebar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 14px;
	background: #1d2027;
	border-bottom: 1px solid var(--tk-term-line);
	font-size: 12px;
	color: var(--tk-term-dim);
}

.tk-term__dots {
	position: absolute;
	left: 14px;
	display: flex;
	gap: 7px;
}

.tk-term__dots i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #3a3e48;
}

/* Pause/afspil — bevægelse over 5 sekunder skal kunne stoppes (WCAG 2.2.2).
   [data-tk-play]-præfikset slår kittets globale ".elementor-kit-N button". */
[data-tk-play] .tk-term__toggle {
	position: absolute;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	box-shadow: none;
	color: var(--tk-term-dim);
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

[data-tk-play] .tk-term__toggle[hidden] { display: none; }
[data-tk-play] .tk-term__toggle:hover,
[data-tk-play] .tk-term__toggle:focus { background: rgba(255, 255, 255, 0.08); color: #fff; }
[data-tk-play] .tk-term__toggle:focus-visible { outline: 2px solid #8fa8ff; outline-offset: 1px; }
[data-tk-play] .tk-term__toggle svg { width: 12px; height: 12px; fill: currentColor; }
[data-tk-play] .tk-term__toggle [data-icon] { display: none; }
[data-tk-play].is-running .tk-term__toggle [data-icon="pause"],
[data-tk-play].is-paused .tk-term__toggle [data-icon="play"],
[data-tk-play].is-ended .tk-term__toggle [data-icon="replay"] { display: block; }

[data-tk-play].is-resetting *,
[data-tk-play].is-resetting *::before,
[data-tk-play].is-resetting *::after {
	transition: none !important;
	animation: none !important;
}

[data-tk-play].is-paused *,
[data-tk-play].is-paused *::before,
[data-tk-play].is-paused *::after {
	animation-play-state: paused !important;
}

@keyframes tkx-line {
	from { opacity: 0; transform: translateY(6px); }
}

@keyframes tkx-word {
	from { opacity: 0; filter: blur(3px); }
}

@keyframes tkx-spin {
	to { transform: rotate(360deg); }
}

@keyframes tkx-blink {
	50% { opacity: 0.25; }
}

/* ---------- Claude Code-terminalen ---------- */

.tk-term__window {
	border-radius: 14px;
	font-family: var(--tk-font-mono);
	font-size: 12.5px;
	line-height: 1.5;
	font-variant-ligatures: none;
}

/* Fast højde, indholdet forankret i bunden: nye linjer skubber de gamle op
   og ud foroven som i en rigtig terminal. Toppen fader ud. */
.tk-term__screen {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 9px;
	height: 372px;
	padding: 14px 18px 12px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
}

.tk-term__screen > * { flex: none; }

.tk-term__welcome {
	padding: 10px 14px;
	border: 1px solid var(--tk-term-claude);
	border-radius: 8px;
	color: var(--tk-term-dim);
}

.tk-term__welcome b { color: #fff; font-weight: 500; }
.tk-term__gap { margin-top: 8px; }
.tk-term__claude { color: var(--tk-term-claude); }

.tk-term__line {
	display: grid;
	grid-template-columns: 2ch 1fr;
}

.tk-term__user { color: var(--tk-term-dim); }

/* ⏺ — hvid foran Claudes svar, grøn når et værktøj er færdigt. */
.tk-term__bullet { color: #fff; }
.tk-term__tool .tk-term__bullet { color: var(--tk-term-ok); }

.tk-term.is-armed .tk-term__tool:not(.is-done) .tk-term__bullet {
	color: var(--tk-term-faint);
	animation: tkx-blink 0.9s steps(2, jump-none) infinite;
}

.tk-term__name { color: #fff; font-weight: 500; }
.tk-term__args { color: var(--tk-term-dim); }

/* ⎿ — værktøjets resultat, rykket ind under kaldet. */
.tk-term__out {
	display: grid;
	grid-template-columns: 2ch 3ch 1fr;
	color: var(--tk-term-dim);
}

.tk-term__out::before { content: ""; }
.tk-term__elbow { color: var(--tk-term-faint); }
.tk-term__ok { color: var(--tk-term-ok); }

.tk-term__todos {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tk-term__todos li {
	display: grid;
	grid-template-columns: 2ch 3ch 2.4ch 1fr;
	margin: 0;
	color: var(--tk-term-text);
}

.tk-term__todos li::before { content: ""; }
.tk-term__todos .tk-term__box::before { content: "☒"; color: var(--tk-term-ok); }
.tk-term__todos li > span:last-child { text-decoration: line-through; color: var(--tk-term-faint); }
.tk-term.is-armed .tk-term__todos li:not(.is-done) .tk-term__box::before { content: "☐"; color: var(--tk-term-dim); }
.tk-term.is-armed .tk-term__todos li:not(.is-done) > span:last-child { text-decoration: none; color: var(--tk-term-text); }

/* ✻ Pondering… — stjernen skifter form som Claude Codes egen spinner. */
.tk-term__thinking { color: var(--tk-term-claude); }
.tk-term__thinking .tk-term__hint { color: var(--tk-term-faint); }

.tk-term__spin::before {
	content: "✻";
	display: inline-block;
	width: 2ch;
}

.tk-term.is-running .tk-term__spin::before { animation: tkx-spinner 0.9s steps(1) infinite; }

@keyframes tkx-spinner {
	0% { content: "·"; }
	16% { content: "✢"; }
	33% { content: "✳"; }
	50% { content: "✶"; }
	66% { content: "✻"; }
	83% { content: "✽"; }
}

/* Inputfeltet — her lander dikteringen. */
.tk-term__input {
	display: grid;
	grid-template-columns: 2ch 1fr auto;
	align-items: start;
	min-height: 36px;
	padding: 7px 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	color: #fff;
}

.tk-term__typed .w { display: inline; }
.tk-term.is-armed .tk-term__typed .w:not(.is-on) { display: none; }
.tk-term:not(.is-armed) .tk-term__typed,
.tk-term.is-armed .tk-term__typed.is-done { display: none; }

.tk-term__cursor {
	display: inline-block;
	width: 0.6em;
	height: 1.15em;
	margin-left: 1px;
	vertical-align: -0.2em;
	background: #e6e7ea;
	animation: tkx-caret 1.05s steps(1) infinite;
}

@keyframes tkx-caret {
	50% { opacity: 0; }
}

.tk-term__mic {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin: -1px -4px 0 8px;
	border-radius: 50%;
	color: var(--tk-term-faint);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.tk-term__mic svg { width: 12px; height: 12px; }

.tk-term.is-listening .tk-term__mic {
	color: #fff;
	background: var(--tk-accent);
	animation: tkx-listen 1.1s var(--tk-ease-out) infinite;
}

@keyframes tkx-listen {
	from { box-shadow: 0 0 0 0 rgba(120, 150, 255, 0.55); }
	to { box-shadow: 0 0 0 8px rgba(120, 150, 255, 0); }
}

.tk-term__footer {
	display: flex;
	justify-content: space-between;
	margin-top: -4px;
	padding: 0 4px;
	font-size: 11.5px;
	color: var(--tk-term-faint);
}

.tk-term__mode { color: #b4a7f5; }

/* Tidslinjen: display:none (ikke opacity), så terminalen vokser opad. */
.tk-term.is-armed [data-at]:not(.is-on) { display: none; }
.tk-term.is-armed .tk-term__screen > [data-at].is-on { animation: tkx-line 0.32s var(--tk-ease-out); }
.tk-term.is-armed .tk-term__typed .w.is-on { animation: tkx-word 0.24s var(--tk-ease-out); }
.tk-term.is-armed .tk-term__thinking.is-done,
.tk-term:not(.is-armed) .tk-term__thinking { display: none; }
.tk-term.is-armed .tk-term__tool:not(.is-done) .tk-term__result { display: none; }
.tk-term.is-armed .tk-term__tool.is-done .tk-term__result { animation: tkx-line 0.32s var(--tk-ease-out); }

@media (max-width: 520px) {
	.tk-term__window { font-size: 11.5px; border-radius: 12px; }
	.tk-term__screen { height: 392px; padding: 12px 14px 10px; gap: 8px; }
	.tk-term__mode { display: none; }
}

/* ---------- Grok Bot-chatten ---------- */

.tk-bot__window {
	border-radius: 16px;
	font-family: var(--tk-font-sans);
	font-size: 14px;
	line-height: 1.5;
}

.tk-bot__titlebar { font-size: 12.5px; font-weight: 600; }

.tk-bot__body {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	height: 384px;
}

/* Sidebjælken: flere bots, hver med sin egen computer i skyen. */
.tk-bot__side {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 10px;
	background: #1b1e25;
	border-right: 1px solid var(--tk-term-line);
}

.tk-bot__label {
	margin: 2px 8px 6px;
	font-family: var(--tk-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tk-term-faint);
}

.tk-bot__bots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.tk-bot__bots li {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 9px;
	align-items: center;
	margin: 0;
	padding: 7px 8px;
	border-radius: 10px;
	color: var(--tk-term-dim);
}

.tk-bot__bots li.is-active { background: rgba(255, 255, 255, 0.07); color: #fff; }
.tk-bot__bots b { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }
.tk-bot__bots small { display: block; font-family: var(--tk-font-mono); font-size: 10.5px; color: var(--tk-term-faint); }

.tk-bot__avatar {
	position: relative;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: #2a2e37;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.tk-bot__bots .is-active .tk-bot__avatar,
.tk-bot__avatar--head { background: #fff; color: var(--tk-term-bg); }

/* Prikken på avataren: grøn når botten arbejder, gul når den venter på dig. */
.tk-bot__avatar i {
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 2px solid #1b1e25;
	background: var(--tk-term-faint);
}

.tk-bot__bots .is-active .tk-bot__avatar i { background: var(--tk-term-ok); }
.tk-bot:has(.tk-bot__chip--wait.is-on:not(.is-done)) .tk-bot__bots .is-active .tk-bot__avatar i { background: var(--tk-term-wait); }

.tk-bot__machine {
	margin-top: auto;
	padding: 10px 8px 2px;
	border-top: 1px solid var(--tk-term-line);
	font-family: var(--tk-font-mono);
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--tk-term-faint);
}

.tk-bot__machine b { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--tk-term-dim); }
.tk-bot__machine svg { width: 13px; height: 13px; flex: none; }

.tk-bot__chat { display: flex; flex-direction: column; min-width: 0; }

.tk-bot__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	border-bottom: 1px solid var(--tk-term-line);
}

.tk-bot__head b { font-size: 14px; font-weight: 600; }

/* Statuschippen skifter mellem klar, arbejder, venter på dig og færdig. */
.tk-bot__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	font-family: var(--tk-font-mono);
	font-size: 11px;
	color: var(--tk-term-dim);
	white-space: nowrap;
}

.tk-bot__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tk-bot__chip--work { color: var(--tk-term-ok); }
.tk-bot__chip--wait { color: var(--tk-term-wait); }
.tk-bot.is-running .tk-bot__chip--work::before { animation: tkx-blink 1.2s ease-in-out infinite; }
.tk-bot:not(.is-armed) .tk-bot__chip:not(.tk-bot__chip--done) { display: none; }
.tk-bot.is-armed .tk-bot__chip.is-done { display: none; }

.tk-bot__feed {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	min-height: 0;
	padding: 12px 16px 10px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
}

.tk-bot__feed > * { flex: none; }

.tk-bot__me {
	align-self: flex-end;
	max-width: 86%;
	padding: 8px 12px;
	border-radius: 16px 16px 4px 16px;
	background: #fff;
	color: var(--tk-ink);
	font-size: 13px;
	line-height: 1.45;
}

.tk-bot__say { max-width: 92%; font-size: 13px; line-height: 1.5; }

/* Aktivitetsloggen: hvad botten gør på sin egen computer. */
.tk-bot__log {
	list-style: none;
	margin: 0;
	padding: 2px 0 2px 12px;
	border-left: 1px solid var(--tk-term-line);
	display: grid;
	gap: 6px;
	font-size: 12.5px;
}

.tk-bot__log li {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 9px;
	align-items: start;
	margin: 0;
}

.tk-bot__log li > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-bot__res { margin-left: 6px; font-family: var(--tk-font-mono); font-size: 11px; color: var(--tk-term-dim); }

.tk-bot__dot {
	position: relative;
	width: 14px;
	height: 14px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--tk-term-ok);
}

.tk-bot__dot::after {
	content: "";
	position: absolute;
	left: 4.8px;
	top: 2.6px;
	width: 3.4px;
	height: 6.5px;
	border: solid var(--tk-term-bg);
	border-width: 0 1.8px 1.8px 0;
	transform: rotate(45deg);
}

.tk-bot.is-armed .tk-bot__log li:not(.is-done) .tk-bot__dot {
	background: transparent;
	border: 1.8px solid rgba(255, 255, 255, 0.16);
	border-top-color: #fff;
	animation: tkx-spin 0.7s linear infinite;
}

.tk-bot.is-armed .tk-bot__log li:not(.is-done) .tk-bot__dot::after { opacity: 0; }
.tk-bot.is-armed .tk-bot__log li:not(.is-done) .tk-bot__res { display: none; }

/* Godkendelseskortet — øjeblikket, hvor agenten henter mennesket ind. */
.tk-bot__ask {
	position: relative;
	padding: 11px 13px;
	border-radius: 14px;
	background: #1f232b;
	box-shadow: 0 0 0 1px rgba(242, 184, 75, 0.45), 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}

.tk-bot__ask-title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 6px;
	font-family: var(--tk-font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tk-term-wait);
}

.tk-bot__ask-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tk-bot__ask p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--tk-term-text); }
.tk-bot__ask p.tk-bot__ask-title { margin-bottom: 6px; color: var(--tk-term-wait); }
.tk-bot__ask-actions { display: flex; gap: 8px; }

.tk-bot__ask-actions span {
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	transition: transform 0.15s var(--tk-ease-out), background-color 0.2s ease;
}

.tk-bot__no { color: var(--tk-term-dim); box-shadow: 0 0 0 1px var(--tk-term-line); }
.tk-bot__yes { position: relative; background: #fff; color: var(--tk-term-bg); }
.tk-bot__yes.is-on { transform: scale(0.94); background: var(--tk-term-ok); }

/* Markøren, der trykker "Godkend". */
.tk-bot__cursor {
	position: absolute;
	left: 58%;
	top: 52%;
	width: 15px;
	height: 19px;
	pointer-events: none;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
	transform: translate(90px, 70px);
	opacity: 0;
	transition: transform 0.75s var(--tk-ease-out), opacity 0.25s ease;
}

.tk-bot__cursor.is-on { opacity: 1; transform: none; }

/* Godkendt: kortet folder sig sammen til én linje. */
.tk-bot__ask-done { display: none; align-items: center; gap: 9px; font-size: 13px; color: var(--tk-term-dim); }
.tk-bot__ask-done b { color: var(--tk-term-text); font-weight: 600; }

.tk-bot__ask.is-done,
.tk-bot:not(.is-armed) .tk-bot__ask { padding: 0; background: none; box-shadow: none; }

.tk-bot__ask.is-done > :not(.tk-bot__ask-done),
.tk-bot:not(.is-armed) .tk-bot__ask > :not(.tk-bot__ask-done) { display: none; }

.tk-bot__ask.is-done .tk-bot__ask-done,
.tk-bot:not(.is-armed) .tk-bot__ask-done { display: flex; }

.tk-bot__composer {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 10px;
	margin: 0 12px 12px;
	padding: 6px 6px 6px 13px;
	border-radius: 13px;
	background: #1f232b;
	box-shadow: 0 0 0 1px var(--tk-term-line);
	font-size: 13px;
	color: #fff;
}

.tk-bot__placeholder { color: var(--tk-term-faint); }
.tk-bot.is-armed .tk-bot__typed:not(.is-done) ~ .tk-bot__placeholder { display: none; }
.tk-bot__typed .w { display: inline; }
.tk-bot.is-armed .tk-bot__typed .w:not(.is-on) { display: none; }
.tk-bot.is-armed .tk-bot__typed .w.is-on { animation: tkx-word 0.24s var(--tk-ease-out); }
.tk-bot:not(.is-armed) .tk-bot__typed,
.tk-bot.is-armed .tk-bot__typed.is-done { display: none; }

.tk-bot__mic {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--tk-term-dim);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tk-bot__mic svg { width: 13px; height: 13px; }

.tk-bot.is-listening .tk-bot__mic {
	background: #fff;
	color: var(--tk-term-bg);
	animation: tkx-bot-listen 1.1s var(--tk-ease-out) infinite;
}

@keyframes tkx-bot-listen {
	from { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
	to { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
}

.tk-bot.is-armed [data-at]:not(.is-on):not(.tk-bot__cursor):not(.tk-bot__yes) { display: none; }
.tk-bot.is-armed .tk-bot__feed > [data-at].is-on,
.tk-bot.is-armed .tk-bot__log > [data-at].is-on { animation: tkx-line 0.32s var(--tk-ease-out); }

@media (max-width: 620px) {
	.tk-bot__body { grid-template-columns: minmax(0, 1fr); height: 400px; }
	.tk-bot__side { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	[data-tk-play] .tk-term__toggle,
	.tk-bot__cursor { display: none; }
	.tk-term__cursor { animation: none; }
}