/*
 * Slik ser det ut i appen (template-parts/sections/plattform/appen.php).
 *
 * Toppen: tittelen stor til venstre og teksten med knappen til høyre.
 * Kortene: grå flater med tittelen nede til venstre og en del av appen til
 * høyre, som går ut av kortet nederst. På store skjermer står kortene fast
 * (sticky) litt under hverandre, så det neste legger seg over, og kortet
 * under krymper med --p fra appen.js. Delene av appen bruker fargene fra
 * appen (wonderwave, components/customer/oversikt/felles.tsx).
 */

.pf-appen { overflow: clip; }

/* ---------- Toppen ---------- */

.ap-topp {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	align-items: end;
	gap: 32px clamp(32px, 5vw, 80px);
}

:root body .pf-appen h2.ap-h2 { --hh-fs: clamp(3rem, 1.6rem + 5.4vw, 6.75rem); --hh-lh: .98; }
.ap-h2 { margin: 0; font-weight: 800; letter-spacing: -.02em; }
.ap-h2 .pf-aksent { display: block; }

.ap-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: .6em; }
.ap-undertittel { margin: 22px 0 0; font-size: 18px; font-weight: 800; color: var(--pf-blekk); }
.ap-tekst { max-width: 28rem; margin: 6px 0 0; font-size: 17px; line-height: 1.55; color: var(--pf-gra); }
.ap-knapp { gap: 8px; margin-top: 26px; }

/* Rundingene på rad: heltene, Kari, haken og grafen */
.ap-ikoner { display: flex; align-items: center; gap: 10px; }
.ap-gruppe { display: flex; }

.ap-rund {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-left: -10px;
	border: 1px solid #ebe9f2;
	border-radius: 50%;
	background: #fff;
	font-size: 20px;
	color: var(--pf-blekk);
	overflow: hidden;
}

.ap-gruppe > :first-child,
.ap-ikoner > .ap-rund:first-child { margin-left: 0; }
.ap-intro .ap-ikoner { gap: 0; }
.ap-rund--helt { background: var(--bg); }
.ap-rund--helt img { width: 82%; height: auto; }
.ap-rund--kari { background: #6712fb; border-color: #6712fb; font-size: 18px; font-weight: 800; color: #fff; }
.ap-rund--ja { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
.ap-rund--graf { background: #f1ecff; border-color: #ddd0ff; color: #6712fb; }
.ap-rund--pluss { background: #f1f0f5; color: #8a8a99; }
.ap-pil { display: flex; font-size: 22px; color: var(--pf-blekk); }

/* ---------- Kortene ---------- */

.ap-stabel { display: grid; gap: 28px; margin-top: clamp(44px, 6vw, 88px); }

.ap-kort {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(24px, 4vw, 64px);
	padding: clamp(28px, 3.4vw, 48px) clamp(28px, 3.4vw, 48px) 0;
	border-radius: 32px;
	background: #f3f2f7;
	overflow: hidden;
	transform-origin: 50% 0;
	scale: calc(1 - var(--p, 0) * .05);
}

/* Kortet blir litt mørkere når det neste legger seg over */
.ap-kort::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #0a0f1f;
	opacity: calc(var(--p, 0) * .08);
	pointer-events: none;
}

.ap-kort-tekst { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-bottom: clamp(28px, 3.4vw, 48px); }
:root body .pf-appen h3.ap-tittel { --hh-fs: clamp(2rem, 1.3rem + 2vw, 3.25rem); --hh-lh: 1.05; }
.ap-tittel { max-width: 11em; margin: 0; font-weight: 800; text-wrap: balance; }
.ap-kort-ingress { max-width: 26rem; margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--pf-gra); }

/* Punktene under teksten: haken, det viktigste i fet skrift og resten etter */
.ap-punkter { display: grid; gap: 10px; max-width: 28rem; margin: 20px 0 0; padding: 0; list-style: none; }
.ap-punkter li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--pf-gra); }
.ap-punkter b { font-weight: 800; color: var(--pf-blekk); }
.ap-punkt-hake { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #ecfdf5; color: #059669; font-size: 13px; }
.ap-punkt-hake svg { stroke-width: 3; }

/* Skjermen fra appen, som går ut av kortet nederst */
.ap-skjerm {
	position: relative;
	align-self: end;
	min-height: 0;
	padding: clamp(18px, 2vw, 26px);
	border: 1px solid #e6e4ee;
	border-bottom: 0;
	border-radius: 22px 22px 0 0;
	background: #fff;
	font-size: 15px;
}

@media (min-width: 900px) and (min-height: 640px) {
	.ap-kort {
		position: sticky;
		top: calc(104px + var(--i) * 16px);
		height: min(600px, calc(100svh - 150px));
	}

	.ap-skjerm { height: calc(100% - 8px); overflow: hidden; }
}

.ap-fotnote { margin-top: 18px; font-size: 13px; text-align: right; color: var(--pf-gra-lys); }

/* ---------- Felles i appen ---------- */

.ap-app {
	--a-lilla: #7c3aed;
	--a-groenn: #059669;
	--a-tekst: #111827;
	--a-graa: #6b7280;
	--a-kant: #eceaf2;
	position: relative;
	color: var(--a-tekst);
}

.ap-flis {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.4em;
	height: 2.4em;
	border-radius: .7em;
	background: var(--bg, #f3eeff);
	overflow: hidden;
}

.ap-flis img { width: 84%; height: auto; }
.ap-flis--rund { border-radius: 50%; }
.ap-flis--epost { background: #eef4ff; color: #2563eb; font-size: 1.05em; }
/* Fotoene av folk hos oss har fargen bak i bildet, og fyller flisen */
.ap-flis--foto img,
.ap-rund.ap-flis--foto img { width: 100%; height: 100%; object-fit: cover; }

.ap-boks-topp { display: flex; align-items: center; gap: .6em; margin: 0 0 .9em; }
.ap-boks-topp b { font-size: 1.05em; font-weight: 800; }
.ap-vis { margin-left: auto; font-size: .85em; font-weight: 700; color: var(--a-lilla); }

.ap-pille {
	display: inline-grid;
	padding: .2em .65em;
	border-radius: 999px;
	background: #f3eeff;
	font-size: .78em;
	font-weight: 800;
	color: #5b21b6;
}

.ap-pille > span,
.ap-forslag-knapp > .ap-fra,
.ap-forslag-knapp > .ap-til { grid-area: 1 / 1; }

/* ---------- Chatten med Felix ---------- */

.ap-chat { display: flex; flex-direction: column; height: 100%; }
.ap-app-topp { display: flex; align-items: center; gap: .6em; margin: 0 0 1em; padding-bottom: .9em; border-bottom: 1px solid var(--a-kant); }
.ap-app-topp b { font-weight: 800; }
.ap-app-topp > span:not(.ap-flis) { font-size: .85em; color: var(--a-graa); }

.ap-status {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin-left: auto;
	padding: .25em .7em;
	border-radius: 999px;
	background: #ecfdf5;
	font-size: .78em;
	font-style: normal;
	font-weight: 800;
	color: var(--a-groenn);
}

.ap-status::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: currentColor; animation: ap-puls 1.6s ease-in-out infinite; }

@keyframes ap-puls { 50% { opacity: .35; } }

.ap-chat-liste { display: flex; flex-direction: column; gap: .7em; flex: 1; min-height: 0; }

.ap-boble {
	max-width: 80%;
	margin: 0;
	padding: .7em 1em;
	border-radius: 1.1em 1.1em 1.1em .35em;
	background: #f4f3f8;
	line-height: 1.45;
}

.ap-boble--kari { align-self: flex-end; border-radius: 1.1em 1.1em .35em 1.1em; background: var(--a-lilla); font-weight: 700; color: #fff; }

.ap-prikker { display: none; gap: .3em; padding: .25em 0; }
.ap-prikker i { width: .45em; height: .45em; border-radius: 50%; background: #a1a1b3; animation: ap-prikk 1s ease-in-out infinite; }
.ap-prikker i:nth-child(2) { animation-delay: .15s; }
.ap-prikker i:nth-child(3) { animation-delay: .3s; }

@keyframes ap-prikk { 50% { opacity: .3; transform: translateY(-.2em); } }

.ap-tildelt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; margin-top: .2em; }

.ap-tildelt p {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0;
	padding: .6em .7em;
	border: 1px solid var(--a-kant);
	border-radius: .9em;
	background: #fff;
}

.ap-tildelt span { display: grid; min-width: 0; line-height: 1.3; }
.ap-tildelt b { font-size: .92em; font-weight: 800; }
.ap-tildelt small { overflow: hidden; font-size: .8em; color: var(--a-graa); text-overflow: ellipsis; white-space: nowrap; }
.ap-snurr { flex: none; width: .9em; height: .9em; margin-left: auto; border: .15em solid var(--a-lilla); border-right-color: transparent; border-radius: 50%; animation: ap-snurr .8s linear infinite; }

@keyframes ap-snurr { to { rotate: 360deg; } }

.ap-skriv {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 1em 0 0;
	padding: .55em .55em .55em 1.1em;
	border: 1px solid var(--a-kant);
	border-radius: 999px;
	color: #a1a1b3;
}

.ap-skriv i { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--a-lilla); color: #fff; }
.ap-fot { margin: .6em 0 0; font-size: .8em; text-align: center; color: var(--a-graa); }

/* Stegene i chatten: data-steg kommer fram når .ap-chat har steget (appen.js) */
.ap-chat [data-steg] { opacity: 0; transform: translateY(.6em); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.ap-chat[data-na="1"] [data-steg="1"],
.ap-chat[data-na="2"] :is([data-steg="1"], [data-steg="2"]),
.ap-chat[data-na="3"] :is([data-steg="1"], [data-steg="2"]),
.ap-chat[data-na="4"] [data-steg] { opacity: 1; transform: none; }
.ap-chat[data-na="2"] .ap-prikker { display: flex; }
.ap-chat[data-na="2"] .ap-svar { display: none; }

/* ---------- Trenger din godkjenning ---------- */

/* Plass nederst til meldingen fra Astrid, så den ikke dekker forslagene */
.ap-godkj { min-height: 100%; padding-bottom: 4.2em; }
.ap-forslag { display: grid; gap: .6em; margin: 0; padding: 0; list-style: none; }

.ap-forslag li {
	display: flex;
	align-items: center;
	gap: .8em;
	padding: .8em .9em;
	border: 1px solid var(--a-kant);
	border-radius: 1em;
	transition: border-color .4s ease, background-color .4s ease;
}

.ap-forslag li > span:not(.ap-flis):not(.ap-forslag-knapp) { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.ap-forslag small { font-size: .78em; font-weight: 700; color: var(--a-graa); }
.ap-forslag b { font-weight: 800; }
.ap-forslag em { overflow: hidden; font-size: .85em; font-style: normal; color: var(--a-graa); text-overflow: ellipsis; white-space: nowrap; }

.ap-forslag-knapp {
	position: relative;
	display: inline-grid;
	flex: none;
	padding: .5em .9em;
	border-radius: 999px;
	background: var(--a-lilla);
	font-size: .85em;
	font-weight: 800;
	color: #fff;
	transition: background-color .3s ease;
}

.ap-forslag-knapp .ap-til { display: inline-flex; align-items: center; gap: .35em; visibility: hidden; }

.ap-peker {
	position: absolute;
	top: 60%;
	left: 55%;
	width: 1.6em;
	height: 1.6em;
	opacity: 0;
	transform: translate(5em, 4em);
	transition: transform 1s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
}

.ap-kontroll { display: flex; align-items: center; gap: .5em; margin: 1em 0 0; font-size: .85em; color: var(--a-graa); }
.ap-kontroll svg { color: var(--a-groenn); }

.ap-toast {
	position: absolute;
	right: 0;
	bottom: .4em;
	left: 0;
	display: flex;
	align-items: center;
	gap: .7em;
	width: fit-content;
	margin: 0 auto;
	padding: .65em 1em .65em .65em;
	border-radius: 1em;
	background: var(--pf-blekk);
	font-size: .9em;
	color: #fff;
	opacity: 0;
	transform: translateY(1em);
	transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}

.ap-toast span { display: grid; line-height: 1.35; }
.ap-toast b { font-weight: 800; }

/* Pekeren kommer, trykker, og forslaget er godkjent (appen.js setter data-na) */
.ap-godkj[data-na="1"] .ap-peker,
.ap-godkj[data-na="2"] .ap-peker { opacity: 1; transform: none; }
.ap-godkj[data-na="2"] .ap-peker { transform: scale(.85); }
.ap-godkj[data-na="2"] .ap-forslag-forst { border-color: #a7f3d0; background: #f3fdf8; }
.ap-godkj[data-na="2"] .ap-forslag-forst .ap-forslag-knapp { background: var(--a-groenn); }
.ap-godkj[data-na="2"] .ap-forslag-forst .ap-fra { visibility: hidden; }
.ap-godkj[data-na="2"] .ap-forslag-forst .ap-til { visibility: visible; }
.ap-godkj .ap-pille .ap-til { visibility: hidden; }
.ap-godkj[data-na="2"] .ap-pille .ap-fra { visibility: hidden; }
.ap-godkj[data-na="2"] .ap-pille .ap-til { visibility: visible; }
.ap-godkj[data-na="2"] .ap-toast { opacity: 1; transform: none; transition-delay: .5s; }

/* ---------- Siste aktivitet ---------- */

.ap-akt-liste { display: grid; margin: 0; padding: 0; list-style: none; }

.ap-akt-liste li {
	display: flex;
	align-items: center;
	gap: .8em;
	padding: .75em 0;
	border-top: 1px solid var(--a-kant);
}

.ap-akt-liste li:first-child { border-top: 0; }
.ap-akt-liste li > span:not(.ap-flis) { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.ap-akt-liste b { font-weight: 800; }
.ap-akt-liste small { font-size: .85em; color: var(--a-graa); }
.ap-akt-liste time { flex: none; font-size: .8em; color: #a1a1b3; }
.ap-akt-live small { color: var(--a-groenn); font-weight: 700; }
.ap-akt-liste li.er-ny { animation: ap-inn .6s cubic-bezier(.2, .7, .2, 1) both; }
.ap-akt-liste li.er-ny time { font-weight: 800; color: var(--a-lilla); }

@keyframes ap-inn { from { opacity: 0; transform: translateY(-1em); } }

/* ---------- Tallene ---------- */

.ap-hilsen { display: grid; gap: .2em; margin: 0 0 1em; }
.ap-hilsen b { font-size: 1.45em; font-weight: 800; }
.ap-hilsen span { font-size: .9em; color: var(--a-graa); }

/* Den midterste flisen er litt bredere, så «Kostnad per henvendelse» står på en linje */
.ap-kpi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: .6em; }

.ap-kpi p {
	display: grid;
	gap: .3em;
	margin: 0;
	padding: .8em .9em;
	border: 1px solid var(--a-kant);
	border-radius: 1em;
}

.ap-kpi p > span { display: flex; align-items: center; gap: .4em; font-size: .78em; font-weight: 700; color: var(--a-graa); white-space: nowrap; }
.ap-kpi b { font-size: 1.6em; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ap-kpi i { display: inline-flex; align-items: center; gap: .3em; font-size: .78em; font-style: normal; font-weight: 800; color: var(--a-groenn); }

.ap-graf { margin-top: 1em; padding: .9em 1em 1em; border: 1px solid var(--a-kant); border-radius: 1em; }
.ap-graf .ap-vis { color: var(--a-graa); font-weight: 600; }

.ap-soyler {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	align-items: end;
	gap: .7em;
	height: 9em;
	margin: 1.6em 0 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--a-kant);
}

.ap-soyler li {
	position: relative;
	height: var(--h);
	border-radius: .5em .5em .2em .2em;
	background: #c4b5fd;
	transform-origin: 50% 100%;
}

/* Uka som er nå, i lilla. Flate farger, ingen gradient */
.ap-soyler li:last-child { background: #6712fb; }
.ap-soyler li:last-child b { color: #6712fb; }
.ap-soyler b { position: absolute; bottom: 100%; left: 50%; margin-bottom: .2em; font-size: .75em; font-weight: 800; color: var(--a-graa); translate: -50% 0; }

.ap-tall.er-klar .ap-soyler li { animation: ap-vokse .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--n) * .07s); }

@keyframes ap-vokse { from { transform: scaleY(0); } }

/* ---------- Mobil og nettbrett ---------- */

@media (max-width: 899px) {
	.ap-topp { grid-template-columns: minmax(0, 1fr); }
	.ap-h2 .pf-aksent { display: inline; }
	.ap-kort { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.ap-kort-tekst { padding-bottom: 0; }
	.ap-skjerm { font-size: 14px; }
}

@media (max-width: 520px) {
	.ap-skjerm { margin-inline: -8px; padding: 14px; font-size: 12.5px; }
	.ap-kpi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
	.ap-kpi p:last-child { display: none; }
	.ap-tildelt { grid-template-columns: minmax(0, 1fr); }
	.ap-forslag em { display: none; }
	.ap-rund { width: 40px; height: 40px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.pf-appen *,
	.pf-appen *::before,
	.pf-appen *::after { animation: none !important; transition-duration: .01s !important; }
}