/* Chattrutan (modul chatt). Värdena kommer ur designsystemet (theme.json) med reservvärden, så att rutan också ser
   rimlig ut i det gamla temat. Knappen är liten och lugn: skog i stället för grönt, eftersom grönt är köpknapparnas. */
.ts-chatt {
	--chatt-kant: var(--wp--custom--marginal, 1rem);
	--chatt-skog: var(--wp--preset--color--skog, #0f2419);
	--chatt-skog-text: var(--wp--preset--color--skog-text, #c9d6cc);
	--chatt-bas: var(--wp--preset--color--bas, #fff);
	--chatt-yta: var(--wp--preset--color--yta, #f3f4f1);
	--chatt-linje: var(--wp--preset--color--linje, #e2e4de);
	--chatt-linje-mork: var(--wp--preset--color--linje-mork, #858b82);
	--chatt-text: var(--wp--preset--color--text, #151a15);
	--chatt-dampad: var(--wp--preset--color--text-dampad, #4f574e);
	--chatt-gron: var(--wp--preset--color--gron, #0d852d);
	--chatt-gron-mork: var(--wp--preset--color--gron-mork, #0a6a24);
	--chatt-radie: var(--wp--custom--radie, 2px);
	--chatt-rubrik: var(--wp--preset--font-family--rubrik, inherit);
	--chatt-textsnitt: var(--wp--preset--font-family--text, inherit);
	position: fixed;
	right: var(--chatt-kant);
	bottom: calc(var(--chatt-kant) + var(--chatt-under, 0px));
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	font-family: var(--chatt-textsnitt);
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--chatt-text);
}

.ts-chatt svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ts-chatt button {
	font: inherit;
	cursor: pointer;
}

.ts-chatt :focus-visible {
	outline: 3px solid var(--chatt-gron);
	outline-offset: 2px;
}

/* Knappen: 44 px hög, ikon och ett ord på dator, bara ikonen i mobilen */
.ts-chatt__knapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.875rem;
	border: 0;
	border-radius: var(--chatt-radie);
	background: var(--chatt-skog);
	color: var(--chatt-bas);
	font-family: var(--chatt-rubrik);
	font-weight: 500;
	box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
	transform: translateY(calc(-1 * var(--chatt-lyft, 0px)));
	transition: background-color 0.15s, transform 0.2s;
}

.ts-chatt__knapp:hover {
	background: var(--chatt-text);
}

@media (max-width: 47.99rem) {
	.ts-chatt__knapp {
		justify-content: center;
		padding: 0;
	}

	.ts-chatt__etikett {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

.ts-chatt--oppen .ts-chatt__knapp {
	display: none;
}

/* Rutan */
.ts-chatt__panel {
	display: flex;
	flex-direction: column;
	width: min(23rem, calc(100vw - 2 * var(--chatt-kant)));
	/* --chatt-synlig är den synliga höjden när mobilens tangentbord är uppe (chatt.js) */
	height: min(34rem, calc(var(--chatt-synlig, 100svh) - 2 * var(--chatt-kant)));
	overflow: hidden;
	border: 1px solid var(--chatt-linje);
	border-radius: var(--chatt-radie);
	background: var(--chatt-bas);
	box-shadow: 0 8px 32px rgb(0 0 0 / 0.18);
}

.ts-chatt__panel:focus {
	outline: none;
}

.ts-chatt__panel[hidden] {
	display: none;
}

.ts-chatt__huvud {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 0.75rem 0.875rem 1rem;
	background: var(--chatt-skog);
	color: var(--chatt-bas);
}

.ts-chatt__rubrik {
	margin: 0;
	font-family: var(--chatt-rubrik);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
}

.ts-chatt__ai {
	margin: 0.125rem 0 0;
	font-size: 0.8125rem;
	color: var(--chatt-skog-text);
}

.ts-chatt__stang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: -0.25rem 0;
	padding: 0;
	border: 0;
	border-radius: var(--chatt-radie);
	background: transparent;
	color: inherit;
}

.ts-chatt__stang:hover {
	background: rgb(255 255 255 / 0.12);
}

.ts-chatt__logg {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ts-chatt__msg {
	max-width: 85%;
	padding: 0.5rem 0.75rem;
	border-radius: var(--chatt-radie);
	overflow-wrap: anywhere;
}

.ts-chatt__msg--bot {
	align-self: flex-start;
	background: var(--chatt-yta);
}

.ts-chatt__msg--kund {
	align-self: flex-end;
	background: var(--chatt-skog);
	color: var(--chatt-bas);
}

.ts-chatt__msg a {
	color: var(--chatt-gron-mork);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ts-chatt__msg--vantar {
	color: var(--chatt-dampad);
}

.ts-chatt__form {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	padding: 0.75rem;
	border-top: 1px solid var(--chatt-linje);
}

.ts-chatt__form textarea {
	flex: 1;
	min-height: 2.75rem;
	max-height: 7.5rem;
	padding: 0.625rem 0.75rem;
	border: 1.5px solid var(--chatt-linje-mork);
	border-radius: var(--chatt-radie);
	background: var(--chatt-bas);
	color: var(--chatt-text);
	font: inherit;
	font-size: 1rem; /* 16 px, så att iOS inte zoomar in */
	resize: none;
}

.ts-chatt__skicka {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: var(--chatt-radie);
	background: var(--chatt-gron);
	color: var(--chatt-bas);
}

.ts-chatt__skicka:hover {
	background: var(--chatt-gron-mork);
}

.ts-chatt__skicka:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Bilden: knappen bredvid fältet, förhandsvisningen över det och bilden i kundens bubbla */
.ts-chatt__bildknapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	padding: 0;
	border: 1.5px solid var(--chatt-linje-mork);
	border-radius: var(--chatt-radie);
	background: var(--chatt-bas);
	color: var(--chatt-text);
}

.ts-chatt__bildknapp:hover {
	background: var(--chatt-yta);
}

.ts-chatt__bildrad {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.75rem 0;
	font-size: 0.8125rem;
	color: var(--chatt-dampad);
}

.ts-chatt__bildrad[hidden] {
	display: none;
}

.ts-chatt__bildrad img {
	width: 3rem;
	height: 3rem;
	flex: none;
	object-fit: cover;
	border-radius: var(--chatt-radie);
}

.ts-chatt__bildrad span {
	flex: 1;
}

.ts-chatt__bildbort {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: var(--chatt-radie);
	background: transparent;
	color: var(--chatt-text);
}

.ts-chatt__msgbild {
	display: block;
	width: 100%;
	max-width: 12rem;
	height: auto;
	margin-bottom: 0.375rem;
	border-radius: var(--chatt-radie);
}

.ts-chatt__fot {
	margin: 0;
	padding: 0 0.75rem 0.75rem;
	font-size: 0.8125rem;
	color: var(--chatt-dampad);
}

.ts-chatt__fot a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ts-chatt__dold {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.ts-chatt * {
		transition: none !important;
	}
}

@media print {
	.ts-chatt {
		display: none;
	}
}

/* Den fasta köpraden i mobilen (temats produkt.js sätter klassen har-koprad): knappen står ovanför raden, så att den
   inte täcker köpknappen. Den öppna rutan får ligga över raden. */
@media (max-width: 63.99rem) {
	.har-koprad .ts-chatt:not(.ts-chatt--oppen) {
		bottom: calc(5.5rem + var(--chatt-kant) / 2);
	}
}

/* Rutan ovanför kundtjänstens formulär som ber kunden pröva chatten först (chatt.js) */
.ts-chatt-tips {
	--chatt-skog: var(--wp--preset--color--skog, #0f2419);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0 0 var(--wp--preset--spacing--50, 1.5rem);
	padding: var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--50, 1.5rem);
	border-radius: var(--wp--custom--radie, 2px);
	background: var(--wp--preset--color--gron-ljus, #e7f2e9);
	color: var(--wp--preset--color--text, #151a15);
}

.ts-chatt-tips__text {
	flex: 1 1 18rem;
	margin: 0;
}

.ts-chatt-tips__knapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 0;
	border-radius: var(--wp--custom--radie, 2px);
	background: var(--chatt-skog);
	color: var(--wp--preset--color--bas, #fff);
	font-family: var(--wp--preset--font-family--rubrik, inherit);
	font-weight: 500;
	cursor: pointer;
}

.ts-chatt-tips__knapp:hover {
	background: var(--wp--preset--color--text, #151a15);
}

.ts-chatt-tips__knapp svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ts-chatt-tips__knapp:focus-visible {
	outline: 3px solid var(--wp--preset--color--gron, #0d852d);
	outline-offset: 2px;
}