/*

Group selector
h2, h1 { : both same style

Descendant selector:
ol li { hierarchy, only the <li> within <ol>

Child Selector
ol>li { only the <li> RIGHT AFTER the <ol>

*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i,800,800i&display=swap');

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');


:root {
	--textcolor: #042a08; /* Donkergroen */
	--maincolor: blue;
	--background:#F0F2F5;
	--pleasantgrey: #b3b3b1;
	--healfiegreen: #00AF66;
	
	--font-size-basic: 62.5%;
	--panel-header-background: rgb(237, 237, 237);
	--lightgrey: #f5f7f7;	
	--greytext:rgba(0, 0, 0, 0.6);
	--bluecheck:#4fc3f7;

	--outgoinggreen: #DCF8C6;

	/* Official Whatsapp colors */ 
	--tealgreen:#128C7E;
	--tealgreendark:#075E54;
	--lightgreen:#25D366;
	--blue:#34B7F1;
	
	--red:#FF3B30;
	--coolblue:#397AFE;

	/* --viewportfactor:1; */
}

.ListSection, .ListNote {
	border-radius:10px;
	background-color:white;
	margin:10px 0px;
	/*outline:1px solid red; */
}

.Ellipsis {
	overflow:hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1; /* # of lines */ 
	-webkit-box-orient: vertical;	
}

.ListNote {
	height:75px;
	/* overflow:auto; */
	overflow:hidden;
	clear:both;
	padding:10px 20px;
	cursor:pointer;
	text-overflow: ellipsis;
	/*white-space: nowrap; */
}


.ListNote .NoteResults {
	width:100%;
	clear:both;
}

.ListNote .NoteResults .Details {
	width:100%;
	clear:both;
}

.FieldDetails {
	overflow:auto;
	margin-top:5px;
	border:1px solid var(--panel-header-background);
	border-radius: 5px;
}

.FieldDetails div {
	float:left;
	padding:2px 2px;
}

.FieldAnswers {
	margin-top:5px;
	border:1px solid var(--panel-header-background);
	border-radius: 5px;
	overflow:auto;
}

#NotesList {
	overflow-y:auto;
	/*border:1px solid red; */
	height:200px;
	background-color:var(--lightgrey);
	padding:10px 5px;
}

#NoteForm {
	padding:10px 5px;
}

#TypeFormPersonList {
	margin-top:15px;
}

.ListTypeForm, .ListLearnModule {
	padding:14px 16px;
	border-radius:12px;
	border: 0.5px solid var(--ios-sep, rgba(0,0,0,0.10));
	background: var(--ios-bg, #fff);
	cursor:pointer;
	margin:10px 16px;
	box-shadow: 0 0 0 0.5px rgba(0,0,0,0.04);
}

.ListTypeForm:hover, .ListLearnModule:hover, .ListTypeFormSelected {
	background-color:var(--panel-header-background);
}

.ListHeader {
	font-weight:500;
	text-align:center;
	/* margin:5px 0px; */
}

.ListItem {
	/* width:100%; */
	border-bottom:1px solid var(--panel-header-background);
	padding: 5px 0px 5px 20px;
	/*outline:1px solid green; */
	cursor:pointer;
}

.ListItem .fas {
	margin-right:20px;
}

#LogoLogin {
	margin-top:10px;
	width:200px;
	/* outline:1px solid red; */
	display: block;
	margin-left: auto;
	margin-right: auto;	
}

[contenteditable]:focus {
	outline: 0px solid transparent;
}

[contenteditable]:empty:before {
    content: attr(data-placeholder);
}

div, input, textarea { 
	box-sizing: border-box; /* width includes padding and border, not margin */
}	

html {
	height:100%;
	margin:0;
	padding:0;
}

body {
	height:100%;
	margin: 0;
	margin:0;	
    padding:0;
	/*outline:1px dotted blue; */
	font-family:"Segoe UI","Helvetica Neue", Helvetica, "Lucida Grande";
	/* font-family:"Helvetica Neue", Helvetica, "Lucida Grande"; */
}

.PGOdata {
	font-size:0.9rem;
}

.PGOdata table tbody td {
	/* border-spacing: 1px; */
	padding: 2px 2px;
}

.PGOdata table > tbody > tr > td:first-child {
	width:40% !important;
	/* background-color:yellow !important; */
}

.PGOdata table tr td:second-child {
	wordbreak:break-all;
	width:60% !important;
	background-color:green !important;
}

/* =============== GENERIC =============== */

#HeaderContainer {
	
	
}

.Header {
	height:60px;
	width:100%;
	background-color:var(--panel-header-background);
	display: flex;
	align-items: center;
	justify-content:center;
	text-align:center;
	font-size:20px;
	/*outline:1px dotted black; */
}

.Header .IconBack, .Header .IconRight {
	justify-content: center;
	display: flex;
	padding:0px 10px;
	/* outline:1px dotted red; */
	float:left;
	color:var(--tealgreendark);
	font-size:26px;
	cursor:pointer;
	/* width:10%; */
	width:15%;
	/* text-align:center; */
}

.Header .HeaderTitle {
	/* outline:1px solid red; */
	text-align:center;
	width:70%
}

.Header .UserAvatar {
	margin-right:20px;
}

#HealfieContainer {
	position:relative;
	width:100%;
	max-width:420px;
	height:100%;
	margin:0 auto;
	overflow:hidden;
}

.UserAvatar, .UserAvatarBig {
	margin-top:5px;
	background-image:url('/media/users/standard.png');
	width:40px;
	height:40px;
	border-radius:50%;
	overflow:auto;
	cursor:pointer;
	/* outline:1px dotted blue; */
}

.UserAvatarBig {
	width:100px;
	height:100px;
	/* outline:1px dotted blue; */
}

.UserSection {
	justify-content: center;
	display: flex;
	align-items: center;
	height:150px;
	padding:10px 0px;
}

/* Profielscherm — meldingen aan/uit kaart (Notificaties) */
.ProfileNotifyCard {
	margin: 12px 16px 18px 16px;
	padding: 14px 16px;
	background: #f7f7f7;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ProfileNotifyHeader {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #333;
}
.ProfileNotifyHeader i { color: var(--maincolor, #198754); }
.ProfileNotifyTitle { font-size: 15px; }
.ProfileNotifyDesc {
	font-size: 13px;
	color: #555;
	line-height: 1.4;
}
.ProfileNotifyBtn { align-self: flex-start; min-width: 130px; }

/* ============================================================
   Apple-style profiel + instellingen
   ============================================================ */

.ProfileView, .SettingsView {
	background: #F2F2F7;
	min-height: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
	padding-bottom: 32px;
}

/* Identity-card bovenaan ShowMyProfile */
.ProfileIdentity {
	display: flex; flex-direction: column; align-items: center;
	padding: 24px 16px 16px;
}
.ProfileAvatarWrap {
	position: relative;
	width: 96px; height: 96px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	cursor: pointer;
}
.ProfileAvatarEdit {
	position: absolute; right: -2px; bottom: -2px;
	width: 30px; height: 30px;
	background: #fff; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	color: #6D6D72;
	font-size: 13px;
}
.ProfileName {
	margin-top: 12px;
	font-size: 22px; font-weight: 600; color: #000;
	letter-spacing: -0.2px;
}
.ProfileSubtitle {
	margin-top: 2px;
	font-size: 14px; color: #6D6D72;
}

/* Sectie + card */
.SectionHeader {
	font-size: 13px;
	color: #6D6D72;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 22px 16px 6px;
	font-weight: 500;
}
.SettingsCard {
	background: #fff;
	border-radius: 10px;
	margin: 0 16px;
	overflow: hidden;
	box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06);
}

/* Rij */
.SettingsRow {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border-bottom: 0.5px solid #C6C6C8;
	gap: 8px;
}
.SettingsCard .SettingsRow:last-child { border-bottom: none; }
.SettingsRow > label:not(.iosToggle) {
	flex: 0 0 38%;
	font-size: 16px;
	color: #000;
	font-weight: 400;
	margin: 0;
	cursor: inherit;
}
/* iOS-toggle label krijgt eigen vaste afmeting; mag NIET de 38%-width
   van de algemene .SettingsRow > label-rule erven. */
.SettingsRow > label.iosToggle {
	flex: 0 0 51px !important;
	width: 51px !important;
	height: 31px !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	font-size: 0 !important;
}
.SettingsRow > input[type="text"],
.SettingsRow > input[type="email"],
.SettingsRow > input[type="tel"],
.SettingsRow > input[type="url"],
.SettingsRow > input[type="date"],
.SettingsRow > input[type="number"],
.SettingsRow > select,
.SettingsRow > textarea {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	text-align: right;
	font-size: 16px;
	color: #3C3C43;
	padding: 0;
	font-family: inherit;
	min-width: 0;
}
.SettingsRow > select { -webkit-appearance: none; appearance: none; padding-right: 12px; }
.SettingsRow > input::placeholder,
.SettingsRow > textarea::placeholder { color: #C7C7CC; }
.SettingsRow > input:focus,
.SettingsRow > textarea:focus,
.SettingsRow > select:focus { outline: none; }

/* Stacked variant voor textarea */
.SettingsRow.SettingsRowStacked {
	flex-direction: column;
	align-items: stretch;
	padding: 10px 16px;
}
.SettingsRow.SettingsRowStacked > label {
	flex: none;
	margin-bottom: 4px;
	font-size: 13px;
	color: #6D6D72;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.SettingsRow.SettingsRowStacked > textarea {
	text-align: left;
	min-height: 88px;
	resize: vertical;
}

/* Tools-rij — naam links bewerkbaar */
.SettingsRow > label > input.SettingsRowKey {
	border: none; background: transparent; outline: none;
	font: inherit; color: #000; padding: 0; width: 100%;
}

/* Link-rij met chevron */
.SettingsRow.SettingsLink {
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0.05);
}
.SettingsRow.SettingsLink:active { background: #E5E5EA; }
.SettingsRow.SettingsLink::after {
	content: '\203A';   /* › */
	color: #C7C7CC;
	font-size: 22px;
	margin-left: 4px;
	line-height: 1;
}
.SettingsRow.SettingsLink > .ProfileRowIcon {
	flex: 0 0 28px;
	color: var(--maincolor, #198754);
	font-size: 18px;
	text-align: center;
}
.SettingsRow.SettingsLink > label { flex: 1; cursor: pointer; }

/* Destructive (logout) */
.SettingsRow.Destructive > label { color: #FF3B30; font-weight: 500; }
.SettingsRow.Destructive > .ProfileRowIcon { color: #FF3B30; }

/* iOS-style toggle */
.iosToggle {
	position: relative;
	width: 51px; height: 31px;
	flex: 0 0 51px;
	margin: 0 0 0 auto;
	cursor: pointer;
	display: inline-block;
}
.iosToggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.iosToggle .Slider {
	position: absolute; inset: 0;
	background: #E9E9EA;
	border-radius: 31px;
	transition: background .25s;
}
.iosToggle .Slider::before {
	content: '';
	position: absolute; top: 2px; left: 2px;
	width: 27px; height: 27px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	transition: transform .25s;
}
.iosToggle input:checked + .Slider { background: #34C759; }
.iosToggle input:checked + .Slider::before { transform: translateX(20px); }
.iosToggle input:disabled + .Slider { opacity: 0.5; }

.SettingsToggleRow .SettingsHelp {
	flex: 1;
	font-size: 13px;
	color: #8E8E93;
	text-align: right;
	margin-right: 8px;
}

.SettingsAutosaveHint {
	text-align: center;
	font-size: 12px;
	color: #8E8E93;
	padding: 22px 16px 0;
}

.UserName {
	float:left;
	width:80%;
	font-weight:400;
	font-size:17px;
	text-align:left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* outline:1px dotted green; */
}

/* =============== CHATTERS =============== */

.ScrollWindow {
	overflow-y:auto;
	/* height:70vh; */
	/*height: calc(100vh - 121px); */
	height: 100%;
	clear:both;
	padding:0px 0px 20px 0px;
	/*outline:1px solid red; */
	/* overflow:auto; */
}

#ScrollNote {
	padding-bottom:0px;
}

.ScrollWindow .PartLeft, .ScrollWindow .PartRight {
	float:left;
	/* cursor:pointer; */
	width:50%;
	color:black;
}

.ScrollWindow .PartRight {
	text-align:right;
	color:var(--greytext);
}

#ScrollDataList, #ScrollGeneric {
	background-color: var(--lightgrey);
	padding: 5px 20px 5px 20px;
}
/* #ScrollMySettings draait z'n eigen card-margins (.SettingsCard heeft
   margin:0 16px), dus géén extra 20px op de scroll-wrap — anders 36px
   inset. Wel dezelfde achtergrond als de andere grouped-views. */
#ScrollMySettings {
	background-color: var(--lightgrey);
	padding: 0 0 24px;
}

.chatter {
	height:60px;
	width:100%;
	/*outline:1px solid brown; */
	cursor:pointer;
}

.chatter:hover {
	background-color:var(--panel-header-background);
}

.chatter .ChatterLeft {
	position:relative;
	float:left;
	padding-left:2%;
	width:18%;
	/* outline:1px solid green; */
	display: flex;
	justify-content: center;
	align-items: center;	
}

.chatter .ChatterRight {
	padding-right:2%;
	border-top:1px solid var(--panel-header-background);
	float:left;
	width:78%;
	/* outline:1px solid blue;*/
}

.ChatterTime {
	float:left;
	width:20%;
	color:var(--greytext);
	font-size:12px;
	color:rgba(0, 0, 0, 0.45);
	text-align:right;
	/* outline:1px dotted red; */
}

.chatter .Unseen {
	float:left;
	width:20%;
	color:var(--greytext);
	font-size:12px;
	color:rgba(0, 0, 0, 0.45);
	text-align:right;
	/* outline:1px dotted red; */
}

.chatter .OnlineIcon {
	position:absolute;
	border-radius:50%;
	background-color:red;
	width:12px;
	height:12px;
	bottom:4px;
	right:4px;
	border:2px solid white;
}

.chatter .UnseenIcon {
	float:right;
	display:flex;
	justify-content: center;
	align-items: center;	
	border-radius:50%;
	width:15px;
	height:15px;
	background-color:var(--lightgreen);
	font-size:9px;
	color:white;
}

.ChatterLastText {
	display:table-cell;
	float:left;
	width:80%;
	clear:both;
	/*color:rgba(0, 0, 0, 0.6); */
	color:var(--greytext);
	font-size:14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	
	/* outline:1px dotted brown; */
}

/* =============== CHATLINES =============== */

.ChatHist {
	text-align: center;
}

.chatballoon, .ChatMsg {
	background-color:white;
	position:relative;
	border-radius:7.5px;
	font-size:14px;
	box-shadow: 0 1px .5px rgba(0,0,0,.13);
	border:1px solid rgba(0,0,0,.13);
	max-width:60%;
	clear:both;
	color:rgb(48, 48, 48);
	/*outline:1px dotted red; */
	margin-bottom:10px;
	margin-left:10px;
	padding:5px 5px 14px 5px;
	max-height:200px;
	overflow:hidden;
	/*white-space: nowrap; */
	text-overflow: ellipsis;	
}

.ChatMsg .ChatNoteTitle {
	font-weight:600;
}

.ChatMsgText {
	/*overflow:hidden; */
	word-wrap: break-word;
	min-width:125px;
	overflow-x:auto;
}

/* Rich-text-content (HTML uit leermodule-editor) netjes binnen de chat-bubble. */
/* Bubble met rich-text mag breder zijn en wordt niet afgekapt */
.ChatMsg:has(.ChatRichText) {
	max-width: 92% !important;
	max-height: none !important;
	overflow: visible !important;
}
.ChatRichText { line-height: 1.4; display: block; }
.ChatRichText p { margin: 0 0 6px 0; }
.ChatRichText p:first-child { margin-top: 0; }
.ChatRichText p:last-child  { margin-bottom: 0; }
.ChatRichText br + br       { display: none; }
.ChatRichText ul,
.ChatRichText ol            { margin: 4px 0 6px 18px; padding-left: 4px; }
.ChatRichText li            { margin: 2px 0; }
.ChatRichText img           { max-width: 100%; height: auto; border-radius: 4px; margin: 4px 0; }
.ChatRichText a             { color: var(--maincolor, #198754); text-decoration: underline; word-break: break-word; }
.ChatRichText h1,
.ChatRichText h2,
.ChatRichText h3,
.ChatRichText h4            { margin: 6px 0 4px 0; line-height: 1.25; }
.ChatRichText pre,
.ChatRichText code          { white-space: pre-wrap; word-break: break-word; }
.ChatRichText table         { max-width: 100%; }

.ChatMsgLink {
	cursor:pointer;
	color:blue;
}

.ChatMsgTime {
	background-color: inherit;
	display: block;
	font-size: 11px;
	text-align: right;
	margin-top: 4px;
	line-height: 1;
}

.ChatMsgTime i {
	color:var(--bluecheck);
	font-size:9px;
	margin-left:5px;
}

.ChatDate {
    border-radius: 7px;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    /* background-color: #ccf; */
    background-color: #e1f3f7;
    color: black;
    font-size: 11px;
}

.ChatMsgMe {
	background-color:var(--outgoinggreen);
	margin-left:10px;
	margin-right:10px;
	float:right;
	/* overflow:auto; */
	overflow:hidden;
}

#chatinputplus {
	text-align:center;
	width:15%;
	float:left;
	cursor:pointer;
	padding-top:7px;
}

#chatinput {
	display:flex;
	float:left;
	width:85%;
}

#chatinput input {
	margin-right:10px;
	padding:10px 10px;
	border-radius:15px;
	border:1px solid rgba(0,0,0,.13);
	/* outline:1px dotted red; */
	/*width:100%; */
	flex-grow: 100;
}

#chatinput textarea {
	resize:none;
	height:38px;
	font-family:inherit;
	font-size:14px;
	outline:0;
	overflow-x:hidden;
    border: none;	
	margin-right:10px;
	padding:6px 6px;
	border-radius:15px;
	border:1px solid rgba(0,0,0,.13);
	/* outline:1px dotted red; */
	/*width:100%; */
	flex-grow: 100;
	width:100%;
}

#SendIcon {
	margin:2px 10px 0px 10px;
	display:flex;
	justify-content: center;
	align-items: center;	
	/*outline:1px dotted red; */
	float:left;
	border-radius:50%;
	width:35px;
	height:32px;
	background-color:var(--tealgreendark);
	/*display:none; */
}

#SendIcon .fas {
	color:white;
	transform: rotate(20deg);
}


#ScrollContainer textarea:focus, #ScrollContainer input:focus, #SendIcon:focus {
    outline: none;
	border:none;
}

#ScrollContainer {
	height: calc(100% - 121px);
}

/* Apple action-sheet stijl: witte sheet met top-radius en drag-indicator,
   sluit aan bij chat-input zonder witte strook. */
#ChatOverlay {
	position: fixed;       /* fixed t.o.v. viewport — sluit aan op floating pill */
	bottom: calc(60px + env(safe-area-inset-bottom) + 16px);  /* boven de pill */
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 420px;
	background: var(--ios-bg) !important;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
	padding: 14px 0 8px 0;
	display: none;
	z-index: 60;          /* boven Footer (z-index 50) */
}
#ChatOverlay::before {
	content: '';
	display: block;
	width: 36px; height: 4px;
	background: var(--ios-placeholder);
	border-radius: 2px;
	margin: 0 auto 12px auto;
	opacity: 0.6;
}
.ChatOverlayItem {
	display: flex !important;
	align-items: center;
	gap: 14px;
	padding: 14px 20px !important;
	cursor: pointer;
	font-size: 16px;
	color: var(--ios-label);
	border-bottom: 0.5px solid var(--ios-sep);
	transition: background 0.12s;
}
.ChatOverlayItem:last-child { border-bottom: none; }
.ChatOverlayItem:active { background: rgba(0,0,0,0.05); }
.ChatOverlayItem i.fal {
	font-size: 22px !important;
	color: var(--ios-accent) !important;
	flex: 0 0 24px;
}

/* =============== PROFILE =============== */

.profilesection {
	background-color:white;
	width:100%;
	padding:15px 10px;
	/*outline:1px dotted red; */
	border-bottom:1px solid var(--panel-header-background);
	/* cursor:pointer; */
}

.profilesection:hover {
	background-color:var(--panel-header-background);
}

.profilesection i {
	/*outline:1px dotted blue; */
	margin-right:10px;
	margin-left:10px;
}


/* =============== NOTE =============== */

#NoteTitle {
	width:100%;
}

#NoteText {
	width:100%;
	min-height:200px;
}

#NoteLabels {
	width:100%;
	border-top:1px solid var(--panel-header-background);
}

/* =============== FOOTER =============== */

#Footer {
	/* position:absolute;
	bottom:0px;
	left:0px;
	*/
	height: 60px;
	width:100%;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

#FooterButtonBar, #FooterChatInput {
	width:100%;
}

.footeritem {
	position:relative;
	width:33.333%;
	float:left;
	text-align:center;
	font-size: 13px;
	color:var(--greytext);
	cursor:pointer;
}

.footeritem i {
	color:green;
	color:var(--greytext);
	font-size: 15px;
}

.footeritem .TotalUnseen {
	position:absolute;
	display:none;
	top:-10px;
	right:30%;
	background-color:white;
	width:18px;
	height:18px;
	border-radius:50%;
	border:1px solid green;
	font-size:9px;
	color:green;
	overflow:hidden;
	justify-content:center;
	align-items:center;
}

#IframeLink {
	width:100%;
	height:100%;
	display:none;
}

#ScrollIframe {
	height:calc(100vh-60px) !important;
	padding:0px 0px;
}


#ScrollMySettings input, #ScrollMySettings select {
	margin-bottom:7px;
}

/* Remove Arrows/Spinners */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield; /* Firefox */
}

/* =============== SCROLL BAR =============== */

.MiniScrollBar::-webkit-scrollbar {
	width: 10px;
}

/* Track */
.MiniScrollBar::-webkit-scrollbar-track {
	/*background: #f1f1f1; */
	background: var(--lightgrey);
}

/* Handle */
.MiniScrollBar::-webkit-scrollbar-thumb {
	background: #888;
	background: var(--panel-header-background);
	border-radius: 10px;
}

#chatinput textarea::-webkit-scrollbar {
	width: 3px;
}

#chatinput textarea::-webkit-scrollbar-thumb {
	background: #888;
	background: grey;
	border-radius: 2px;
}


/* Handle on hover */
.MiniScrollBar::-webkit-scrollbar-thumb:hover {
	background: #555;
	background: var(--panel-header-background);
}

/* ------------- STANDARD STUFF ------------- */ 

#ScrollVideoCall {
	/*position:relative;
	outline:1px dotted green;
	*/
}

#videoElement {
	width: 500px;
	height: 375px;
	background-color: #666;
}

#CallControls {
	padding:20px 0px 20px 0px;
	background-color:blue;
	width:100%;
	/* position:absolute; */
}	

#RefuseButton, #AnswerButton {
	cursor:pointer;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-left:auto;
	margin-right:auto;
	border-radius:50%;
	width:50px;
	height:50px;
	background-color:red;
	color:white;
}

#AnswerButton {
	background-color:green;
}

.SaveButton {
	background-color:var(--panel-header-background) !important;
}	

.SaveButton:hover {
	background-color:white !important;
}	


/* ------------- FILE UPLOAD STUFF ------------- */ 

#CountDownOverlay {
	position: absolute;
	color:var(--healfiegreen);
	top: 50%;
	left: 50%;
	min-width:50vw;
	min-height:50vh;
	transform: translateX(-50%) translateY(-50%);
	background-color: white;
	padding: 15px;
	border: 1px solid black;
	border-radius:10px;
	z-index: 89;
	text-align:center;
	display:none;
}

#CountDownNumber {
	font-size:125px;
	/* color:green; */
	font-weight:bold;
}

.DialogOverlay {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 88;
}
.Dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background-color: white;
	padding: 15px;
	border: 1px solid black;
	z-index: 8889;
}
.MyBarP {
	width:90%;
	padding: 0;
	text-align:center;
	line-height: 30px;
}
#MyBar {
	width: 2%;height: 30px; 
	background-color:#aaf;
	overflow: hidden;
}


/* ------------- STANDARD STUFF ------------- */ 

.centercenter {
	display:flex;
	height:100%;
	justify-content:center;
	align-items:center;
}

.cursorpointer {
	cursor:pointer;	
}

.clearboth {
	clear:both !important;
}

.Shadow {
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
}

.outline  {
	outline:1px dotted red;
}

.bgcover {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.bg-panel-header {
	background-color:var(--panel-header-background) !important;
}

.bg-grey {
  background-color: #f6f6f6;
}

.bg-middlegrey {
	background-color: var(--middlegrey) !important;
}

.middlegrey {
	color: var(--pleasantgrey) !important;
}

.bgmaincolor {
	background-color: var(--maincolor);
}

.green {
	color:green !important;
}

.red {
	color:red !important;
}

.orange {
	color:orange !important;
}

.blue {
	color: var(--coolblue) !important;
}

.white {
  background-color: white;
}

.floatleft {
	float:left !important;
}

.floatright {
	float:right !important;
}

.textright {
	text-align:right !important;
}

.marginauto {
	margin-left:auto !important;
	margin-right:auto !important;
}

.black {
	color:black !important;
}

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	
}

.wordbreak {
	word-break: break-all !important;
}

/* ============================================================
   APPLE-STYLE THEME — global overlay over de bestaande styles.
   Staat onderaan zodat hij wint op de cascade. Verwijderen kan
   door het hele blok eruit te knippen — basis-app blijft werken.
   ============================================================ */

:root {
	/* iOS systeemkleuren (light) */
	--ios-blue:        #007AFF;
	--ios-green:       #34C759;
	--ios-red:         #FF3B30;
	--ios-orange:      #FF9500;
	--ios-yellow:      #FFCC00;
	--ios-purple:      #AF52DE;
	--ios-pink:        #FF2D55;

	/* Healfie-accent — brand-groen #00AF66 (matcht React/Laravel-versie) */
	--ios-accent:      #00AF66;
	--ios-accent-2:    #008F54;
	--ios-accent-light:#DCF5E5; /* zacht pastel-groen — own-bubbel WhatsApp-style */

	/* Achtergronden */
	--ios-bg:          #FFFFFF;
	--ios-bg-grouped:  #F2F2F7;
	--ios-bg-secondary:#F2F2F7;
	--ios-bg-tertiary: #FFFFFF;
	--ios-bg-blur:     rgba(255,255,255,0.82);

	/* Tekst */
	--ios-label:       #000000;
	--ios-label-2:     #3C3C43;
	--ios-label-3:     #6D6D72;
	--ios-label-4:     #8E8E93;
	--ios-placeholder: #C7C7CC;

	/* Separators */
	--ios-sep:         #C6C6C8;
	--ios-sep-opaque:  #D1D1D6;

	/* Vorm */
	--ios-radius-sm:   8px;
	--ios-radius:      10px;
	--ios-radius-lg:   14px;
	--ios-radius-xl:   18px;

	--ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@supports (color: color(display-p3 1 1 1)) {
	:root { --ios-blue: color(display-p3 0 0.478 1); }
}

/* ---- Globale typografie ---- */
html, body {
	font-family: var(--ios-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	letter-spacing: -0.01em;
	color: var(--ios-label);
}
body { background: var(--ios-bg); }
/* iOS-Safari/PWA: viewport-fit=cover zit in <meta>, dus body+html strekken
   onder de notch en home-indicator. Webkit paint canvas (safe-area zones)
   met BODY bg, niet html — dus body bg = wit zodat safe-area-top naadloos
   overloopt in de witte Header. De grijze "chats-list" achtergrond zit op
   #HealfieContainer (var(--ios-bg-grouped)), niet op body. */
html { background: #fff !important; }
body { background: #fff !important; }
* { box-sizing: border-box; }

/* ---- App-container ---- */
#HealfieContainer {
	background: var(--ios-bg-grouped) !important;
}

/* ============================================================
   iOS safe-area top — alle top-bars (.Header) krijgen padding-top
   env(safe-area-inset-top) zodat hun WITTE bg naadloos onder de iOS
   notch doorloopt. height:auto + min-height i.p.v. fixed 60px omdat
   border-box met padding-top env() de content area anders zou
   comprimeren binnen 60px.
   ============================================================ */
.Header {
	padding-top: env(safe-area-inset-top) !important;
	background: #fff !important;
	height: auto !important;
	min-height: calc(52px + env(safe-area-inset-top)) !important;
}

/* Search-inputs binnen .Header krijgen iOS-style (geen border, lichte
   grijze vulling, rounded). Voorheen werd de input-border (1px op
   rgba(0,0,0,0.10) ≈ #E5E5E5) als dunne grijze balk gerendert tussen
   safe-area-top en de input — visueel storend (#fcfcfe-effect).
   Match het :not-pattern uit .form-control (lijn 2292) voor hogere
   specificity dan de bestaande border-regel. */
.Header input.form-control,
.Header .form-control,
.Header .form-control:not(.SettingsCard *):not(.SettingsRow *) {
	border: none !important;
	background-color: #EFEFF0 !important;
	border-radius: 10px !important;
	margin-bottom: 0 !important;
	box-shadow: none !important;
	padding: 8px 12px !important;
}
.Header input.form-control:focus,
.Header .form-control:focus,
.Header .form-control:not(.SettingsCard *):not(.SettingsRow *):focus {
	border: none !important;
	background-color: #E5E5EA !important;
	box-shadow: none !important;
}
/* Desktop-only: subtiele drop-shadow rondom de centered mockup-kolom.
   Boven 420px viewport heeft de body witruimte naast de container; daar
   past een floating shadow. Op mobiel device (≤420px) is de container
   full-width en zou shadow onnodige randen geven — daarom media-query. */
@media (min-width: 481px) {
	#HealfieContainer {
		box-shadow: 0 0 32px rgba(0, 0, 0, 0.08);
	}
}

/* Network/Ontdek-resultaten in app-context: altijd 1 kolom ongeacht
   viewport. zoek.php gebruikt Bootstrap col-xs-12 / col-md-6 / col-lg-4
   waardoor desktop 3 kolommen krijgt — onleesbaar in de 420px mockup-
   kolom. Forceer hier 100% per result-item. Wanneer zoek.php standalone
   buiten #HealfieContainer wordt geopend blijft de oorspronkelijke
   responsive grid intact. */
#HealfieContainer #NetwerkResults > [class*="col-"] {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}

/* ---- Top header bar (HeaderContainer + childs) ---- */
/* Géén hairline onder headers — Apple iOS gebruikt 'm wel maar in deze
   app oogt 'ie te druk (dubbel met search-input borders, etc).
   Bg solid #fff (geen blur-translucentie) zodat de top-header naadloos
   overloopt in de wit-bge safe-area zone boven de iOS notch — anders
   geeft de blur-filter een lichte tint (#fcfcfe-effect). */
/* Container ZELF — geen padding, geen min-height; de hairline zit op de
   onderrand van de container zodat 'ie edge-to-edge loopt (zonder
   horizontale of verticale padding-gap). */
#HeaderContainer {
	background: #fff !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	border-bottom: 0.5px solid var(--ios-sep) !important;
}
/* Zichtbare .Header child — eigen padding voor content-layout */
#HeaderContainer > * {
	background: #fff !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border-bottom: none !important;       /* hairline zit op parent */
	min-height: 52px;
	display: flex;
	align-items: center;
	padding: 6px 12px;
	font-weight: 600;
	color: var(--ios-label);
}
#HeaderContainer h1,
#HeaderContainer h2,
#HeaderContainer .HeaderTitle {
	font-size: 17px;
	font-weight: 600;
	margin: 0;
	flex: 1;
	text-align: center;
	letter-spacing: -0.2px;
}

/* Back-chevron / leading buttons in header → grijs, geen rand */
#HeaderContainer i.fa-chevron-left,
#HeaderContainer i.fa-arrow-left,
#HeaderContainer .BackArrow,
#HeaderContainer .HfBack {
	color: var(--ios-label-3) !important;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	padding: 8px;
}

/* ---- Bottom tab bar ---- */
#FooterButtonBar {
	background: var(--ios-bg-blur) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-top: 0.5px solid var(--ios-sep);
	padding: 6px 0 max(40px, calc(env(safe-area-inset-bottom) + 10px)) 0;
	display: flex;
}
.footeritem {
	float: none !important;
	width: auto !important;
	flex: 1;
	padding: 6px 0 10px;
	color: var(--ios-label-3) !important;
	font-size: 10px !important;
	font-weight: 500;
	letter-spacing: 0.1px;
	transition: color 0.15s;
}
.footeritem i { color: inherit !important; font-size: 24px !important; line-height: 1; }
/* Default: HIDE de badge wanneer er geen content (= 0 ongelezen) is.
   Toon alleen wanneer JS er een count in geschreven heeft. CSS-driven
   via `:empty` zodat we niet afhankelijk zijn van inline-style toggles. */
.footeritem .TotalUnseen { display: none !important; }
.footeritem .TotalUnseen:not(:empty) { display: flex !important; }
.footeritem .TotalUnseen:not(:empty) {
	background: var(--ios-red) !important;
	color: #fff !important;
	border: 1.5px solid var(--ios-bg-blur) !important;
	font-weight: 700;
	font-size: 11px !important;
	min-width: 18px;
	height: 18px;
	border-radius: 9px;
	top: 0 !important;
	right: 28% !important;
	box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9);
}
.footeritem.HighLighted,
.footeritem.HighLighted i,
.footeritem:active,
.footeritem:active i {
	color: var(--ios-accent) !important;
}

/* ---- Chatters list (iOS contact-row style) ---- */
.Chatter {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 10px 16px !important;
	background: var(--ios-bg) !important;
	border: none !important;
	border-bottom: 0.5px solid var(--ios-sep) !important;
	min-height: 64px;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.Chatter:active { background: #E5E5EA !important; }
.Chatter .UserAvatar,
.Chatter .ChatterAvatar {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	flex: 0 0 48px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06);
}
.Chatter .ChatterRight {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.Chatter .UserName {
	float: none !important;
	font-size: 16px;
	font-weight: 600;
	color: var(--ios-label);
	letter-spacing: -0.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.Chatter .ChatterTime {
	float: right;
	font-size: 13px;
	color: var(--ios-label-3);
	font-weight: 400;
}
.Chatter .ChatterLastText {
	font-size: 14px;
	color: var(--ios-label-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 2px;
	-webkit-line-clamp: 2;
}
.Chatter .Unseen .UnseenIcon {
	background: var(--ios-accent) !important;
	color: #fff !important;
	font-weight: 700;
	border-radius: 11px;
	min-width: 22px;
	height: 22px;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
}

/* ---- iMessage- / WhatsApp-style chat bubbles. Bubbel van de andere
   partij = wit met subtiele schaduw zodat 'ie zichtbaar is op de grijze
   chat-achtergrond. Eigen bubbel (ChatMsgMe) is licht-groen accent. */
.chatballoon, .ChatMsg {
	background: #FFFFFF !important;
	border: none !important;
	border-radius: 18px !important;
	padding: 8px 12px !important;
	max-width: 75% !important;
	max-height: none !important;
	overflow: visible !important;
	color: var(--ios-label) !important;
	box-shadow: 0 1px 1px rgba(0,0,0,0.06) !important;
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: -0.1px;
	margin: 2px 10px !important;
	word-wrap: break-word;
}
.ChatMsg.ChatMsgMe,
.chatballoon.ChatMsgMe {
	background: var(--ios-accent) !important;   /* Healfie groen #00AF66 */
	color: #fff !important;                      /* witte tekst voor contrast */
	margin-left: auto !important;
	margin-right: 10px !important;
}
/* Anchors in own-bubbel — wit met underline voor contrast op groene bg.
   ZONDER !important, anders wint deze regel van inline `style="color:white"`
   op styled buttons (bv. de oranje "IK HEB GEOEFEND!"-knop in een
   leermodule-card). */
.ChatMsg.ChatMsgMe a:not([style*="color"]):not([style*="background"]),
.ChatMsg.ChatMsgMe .ChatMsgLink:not([style*="color"]) { color: #fff; text-decoration: underline; }
.ChatMsg .ChatMsgTime {
	font-size: 11px;
	color: var(--ios-label-4);
	font-weight: 400;
}
.ChatMsg.ChatMsgMe .ChatMsgTime { color: rgba(255,255,255,0.75) !important; }
.ChatMsg .ChatMsgLink {
	background: rgba(0,0,0,0.06) !important;
	color: var(--ios-blue) !important;
	border-radius: 12px;
	padding: 6px 12px;
	margin-top: 6px;
	font-weight: 500;
	display: inline-block;
}
.ChatMsg.ChatMsgMe .ChatMsgLink { background: rgba(255,255,255,0.20) !important; color: #fff !important; }

/* ============================================================
   ChatMsgSys — systeem-pills voor Activity (goal/datapoint/note events).
   Gecentreerd, kleine grijze pill, geen avatar/tijd/Me-styling.
   Inspiratie: voice/chats.php .cm-bubble--sys
   ============================================================ */
.ChatMsg.ChatMsgSys {
	background: rgba(0,0,0,0.06) !important;
	color: var(--ios-label-3) !important;
	font-size: 12px !important;
	padding: 4px 12px !important;
	border-radius: 999px !important;
	margin: 6px auto !important;       /* gecentreerd */
	max-width: 80% !important;
	box-shadow: none !important;
	display: block !important;
	width: fit-content !important;
	text-align: center !important;
	float: none !important;
	line-height: 1.4 !important;
}
.ChatMsg.ChatMsgSys .ChatMsgTime { display: none !important; }
.ChatMsg.ChatMsgSys .ChatMsgText { overflow: visible !important; min-width: 0 !important; }

/* ============================================================
   ChatLessonHead — grijze header-bar bovenaan een LearnMod-card.
   "📚 LearnModTitle — LessonTitle". Edge-to-edge in de card.
   Selectoren: .ChatMsgLM (expliciete class, primair) + :has(.ChatRichText)
   (backwards compat voor reeds gerenderde berichten zonder ChatMsgLM).
   ============================================================ */
.ChatMsg.ChatMsgLM .ChatLessonHead,
.ChatMsg:has(.ChatRichText) .ChatLessonHead {
	background: var(--ios-bg-grouped);
	color: var(--ios-label);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 14px;
	border-bottom: 0.5px solid var(--ios-sep);
	border-radius: 0;
	letter-spacing: -0.1px;
	margin: 0 !important;
	display: block !important;
}

/* Tijd-stempel onderaan een LearnMod-card: padding zodat 'ie niet
   tegen de tekst zit. Card heeft padding:0, dus we voegen 'm hier toe. */
.ChatMsg.ChatMsgLM .ChatMsgTime,
.ChatMsg:has(.ChatRichText) .ChatMsgTime {
	padding: 6px 14px 10px;
	margin-top: 0;
}

/* Leermodule-bubbel = card-stijl, NIET iMessage-stijl. De DOM is:
   .ChatMsg > .ChatMsgTime
           > .ChatMsgText > img (banner) + .ChatRichText + .ChatMsgLink
   Banners edge-to-edge, tekst gepadded binnenin, witte bg + hairline. */
.ChatMsg.ChatMsgLM,
.ChatMsg:has(.ChatRichText) {
	max-width: 92% !important;
	padding: 0 !important;
	background: #fff !important;
	overflow: hidden !important;
	box-shadow: 0 0 0 0.5px var(--ios-sep) !important;
	color: var(--ios-label) !important;
}
.ChatMsg.ChatMsgLM.ChatMsgMe,
.ChatMsg:has(.ChatRichText).ChatMsgMe {
	background: #fff !important;
	color: var(--ios-label) !important;
}
.ChatMsg.ChatMsgLM .ChatMsgText,
.ChatMsg:has(.ChatRichText) .ChatMsgText {
	overflow: visible !important;
	overflow-x: visible !important;
	min-width: 0 !important;
	padding: 0 !important;
}
/* Banner-image bovenaan de card (direct kind van .ChatMsgText) — edge-to-edge */
.ChatMsg.ChatMsgLM .ChatMsgText > img,
.ChatMsg:has(.ChatRichText) .ChatMsgText > img {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	max-width: 100% !important;
	height: auto !important;
}
.ChatMsg:has(.ChatRichText) .ChatRichText {
	padding: 12px 14px;
	font-size: 15px;
	line-height: 1.45;
}
/* Banner-blokken en images binnen BodyText breken via negatieve margin uit
   de tekst-padding zodat ze edge-to-edge in de card vullen. */
.ChatMsg:has(.ChatRichText) .ChatRichText > div[style*="background-color"],
.ChatMsg:has(.ChatRichText) .ChatRichText img {
	margin-left: -14px !important;
	margin-right: -14px !important;
	max-width: calc(100% + 28px) !important;
	width: calc(100% + 28px) !important;
	border-radius: 0 !important;
	box-sizing: border-box;
}
/* Knoppen / links binnen BodyText (orange "IK HEB GEOEFEND!" etc.) blijven
   wel binnen de tekst-padding en krijgen iOS pill-stijl. */
.ChatMsg:has(.ChatRichText) .ChatRichText a[href] {
	display: inline-block;
	color: var(--ios-blue);
	text-decoration: none;
	font-weight: 500;
}
.ChatMsg:has(.ChatRichText) .ChatRichText p > a[href]:only-child {
	background: var(--ios-bg-grouped);
	padding: 8px 16px;
	border-radius: 999px;
	margin: 6px 0;
}
.ChatMsg:has(.ChatRichText) .ChatMsgLink {
	margin: 0 14px 12px 14px !important;
	background: var(--ios-bg-grouped) !important;
	color: var(--ios-blue) !important;
	border-radius: 12px !important;
	padding: 10px 14px !important;
	text-align: center !important;
	font-weight: 500 !important;
	display: block !important;
}
.ChatMsg:has(.ChatRichText) .ChatMsgTime {
	position: static !important;
	padding: 8px 14px 6px !important;
	width: auto !important;
	color: var(--ios-label-4) !important;
	background: transparent !important;
	text-align: right !important;
	font-size: 11px;
}

/* ---- Chat-input (footer) ---- */
/* Alleen de OUTER #FooterChatInput krijgt de blur-bg + border-top.
   De inner #chatinput-wrapper had ook border-top → veroorzaakte een
   tweede grijze hairline-balk vlak boven textarea & send-icoon. */
#FooterChatInput {
	background: var(--ios-bg-blur) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-top: 0.5px solid var(--ios-sep);
	padding: 8px 10px max(40px, calc(env(safe-area-inset-bottom) + 10px));
}
#chatinput {
	background: transparent !important;
	border-top: none !important;
	padding: 0 !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ============================================================
   Chat-header (#HeaderChatting): chevron + avatar + naam + video
   netjes op 1 lijn; naam-lettertype op 17px ipv 20px+.
   GEEN `display:flex !important` — dat zou ShowPanel's inline
   `display:none` overrulen, waardoor HeaderChatting óók blijft
   staan op chats-overzicht en profiel-tab (twee headers naast
   elkaar). Layout-flex is per default ook op #HeaderContainer > *
   gezet, dus zonder !important werkt 't toch correct wanneer
   HeaderChatting actief is.
   ============================================================ */
#HeaderChatting {
	align-items: center !important;
	gap: 10px;
	padding: 6px 12px !important;
}
#HeaderChatting .IconBack,
#HeaderChatting .IconRight {
	float: none !important;
	width: 36px !important;
	height: 36px;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-size: 18px !important;
	color: var(--ios-label-3) !important;
	flex: 0 0 36px;
}
#HeaderChatting .IconRight {
	font-size: 24px !important;
	color: var(--ios-accent) !important;
}
#HeaderChatting .IconRight { color: var(--ios-accent) !important; }
#HeaderChatting .IconBack i.fal {
	font-weight: 300 !important;
	font-size: 18px !important;
	line-height: 1;
	color: inherit !important;
}
#HeaderChatting .IconRight i.fal {
	font-weight: 300 !important;
	font-size: 24px !important;
	line-height: 1;
	color: inherit !important;
}
#HeaderChatting .UserAvatar {
	float: none !important;
	width: 32px !important;
	height: 32px !important;
	flex: 0 0 32px;
	margin: 0 !important;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06);
}
#HeaderChatting .UserName {
	float: none !important;
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	font-size: 17px !important;
	font-weight: 600 !important;
	letter-spacing: -0.3px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--ios-label);
	line-height: 1.2;
}

/* ============================================================
   #HeaderMyProfile — Apple iOS nav-bar conventie:
   - Back-chevron + back-label uiterst LINKS
   - Titel ABSOLUUT gecentreerd in de nav-bar (niet in de
     resterende flex-ruimte) — blijft op zijn plek ook al groeit
     het back-label
   - Optionele edit-slot rechts
   ============================================================ */
#HeaderMyProfile {
	position: relative !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 6px 12px !important;
	gap: 0;
}

/* LINKS — IconBack (chevron + voornaam als back-label) */
#HeaderMyProfile > div:nth-child(1),
#HeaderMyProfile .IconBack {
	float: none !important;
	width: auto !important;
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 2px;
	padding: 0 !important;
	color: var(--ios-label-3) !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	cursor: pointer;
	z-index: 2;
	max-width: 38%;
}
#HeaderMyProfile .IconBack i.fal {
	padding: 0 !important;
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	color: var(--ios-label-3) !important;
	line-height: 1;
}
/* Voornaam naast back-chevron weghalen — alleen `<` chevron blijft. */
#HeaderMyProfile .IconBack .username {
	display: none !important;
}

/* ============================================================
   Healfie React-icon set — line-style SVGs uit dev.healfie.app
   gerenderd via mask-image zodat `currentColor` werkt en het
   icoon meeschaalt met de font-size (1.4em).
   Markup: <i class="hf-ic hf-ic-NAME"></i>
   ============================================================ */
.hf-ic {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask-image: var(--hf-ic-src);
	mask-image: var(--hf-ic-src);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	flex-shrink: 0;
}
.hf-ic-activity        { --hf-ic-src: url('/img/icons/activity.svg'); }
.hf-ic-allergy         { --hf-ic-src: url('/img/icons/allergy.svg'); }
.hf-ic-arrow-back      { --hf-ic-src: url('/img/icons/arrow-back.svg'); }
.hf-ic-arrow-left      { --hf-ic-src: url('/img/icons/arrow-left.svg'); }
.hf-ic-arrow-right     { --hf-ic-src: url('/img/icons/arrow-right.svg'); }
.hf-ic-attached-file   { --hf-ic-src: url('/img/icons/attached-file.svg'); }
.hf-ic-book            { --hf-ic-src: url('/img/icons/book.svg'); }
.hf-ic-calendar        { --hf-ic-src: url('/img/icons/calendar.svg'); }
.hf-ic-camera          { --hf-ic-src: url('/img/icons/camera.svg'); }
.hf-ic-chat            { --hf-ic-src: url('/img/icons/chat.svg'); }
.hf-ic-check           { --hf-ic-src: url('/img/icons/check.svg'); }
.hf-ic-clipboard-plus  { --hf-ic-src: url('/img/icons/clipboard-plus.svg'); }
.hf-ic-close           { --hf-ic-src: url('/img/icons/close.svg'); }
.hf-ic-cross           { --hf-ic-src: url('/img/icons/cross.svg'); }
.hf-ic-delete          { --hf-ic-src: url('/img/icons/delete.svg'); }
.hf-ic-diagnose        { --hf-ic-src: url('/img/icons/diagnose.svg'); }
.hf-ic-down            { --hf-ic-src: url('/img/icons/down.svg'); }
.hf-ic-edit            { --hf-ic-src: url('/img/icons/edit.svg'); }
.hf-ic-euro            { --hf-ic-src: url('/img/icons/euro.svg'); }
.hf-ic-eye             { --hf-ic-src: url('/img/icons/eye.svg'); }
.hf-ic-file            { --hf-ic-src: url('/img/icons/file.svg'); }
.hf-ic-folder          { --hf-ic-src: url('/img/icons/folder.svg'); }
.hf-ic-habits          { --hf-ic-src: url('/img/icons/habits.svg'); }
.hf-ic-heart           { --hf-ic-src: url('/img/icons/heart.svg'); }
.hf-ic-image           { --hf-ic-src: url('/img/icons/image.svg'); }
.hf-ic-info            { --hf-ic-src: url('/img/icons/info.svg'); }
.hf-ic-link            { --hf-ic-src: url('/img/icons/link.svg'); }
.hf-ic-list            { --hf-ic-src: url('/img/icons/list.svg'); }
.hf-ic-logboek         { --hf-ic-src: url('/img/icons/logboek.svg'); }
.hf-ic-logout          { --hf-ic-src: url('/img/icons/logout.svg'); }
.hf-ic-measurements    { --hf-ic-src: url('/img/icons/measurements.svg'); }
.hf-ic-medicine        { --hf-ic-src: url('/img/icons/medicine.svg'); }
.hf-ic-megaphone       { --hf-ic-src: url('/img/icons/megaphone.svg'); }
.hf-ic-mental          { --hf-ic-src: url('/img/icons/mental.svg'); }
.hf-ic-moon            { --hf-ic-src: url('/img/icons/moon.svg'); }
.hf-ic-no-smoke        { --hf-ic-src: url('/img/icons/no-smoke.svg'); }
.hf-ic-notes           { --hf-ic-src: url('/img/icons/notes.svg'); }
.hf-ic-nutrition       { --hf-ic-src: url('/img/icons/nutrition.svg'); }
.hf-ic-pencil          { --hf-ic-src: url('/img/icons/pencil.svg'); }
.hf-ic-plus            { --hf-ic-src: url('/img/icons/plus.svg'); }
.hf-ic-profile         { --hf-ic-src: url('/img/icons/profile.svg'); }
.hf-ic-profile-data    { --hf-ic-src: url('/img/icons/profile-data.svg'); }
.hf-ic-profile-info    { --hf-ic-src: url('/img/icons/profile-info.svg'); }
.hf-ic-profile-programs { --hf-ic-src: url('/img/icons/profile-programs.svg'); }
.hf-ic-results         { --hf-ic-src: url('/img/icons/results.svg'); }
.hf-ic-search          { --hf-ic-src: url('/img/icons/search.svg'); }
.hf-ic-send-message    { --hf-ic-src: url('/img/icons/send-message.svg'); }
.hf-ic-send-message-active { --hf-ic-src: url('/img/icons/send-message-active.svg'); }
.hf-ic-shield          { --hf-ic-src: url('/img/icons/shield.svg'); }
.hf-ic-sleep           { --hf-ic-src: url('/img/icons/sleep.svg'); }
.hf-ic-stress          { --hf-ic-src: url('/img/icons/stress.svg'); }
.hf-ic-success         { --hf-ic-src: url('/img/icons/success.svg'); }
.hf-ic-sun             { --hf-ic-src: url('/img/icons/sun.svg'); }
.hf-ic-symptoms        { --hf-ic-src: url('/img/icons/symptoms.svg'); }
.hf-ic-treatments      { --hf-ic-src: url('/img/icons/treatments.svg'); }
.hf-ic-user-settings   { --hf-ic-src: url('/img/icons/user-settings.svg'); }
.hf-ic-users           { --hf-ic-src: url('/img/icons/users.svg'); }
.hf-ic-vaccination     { --hf-ic-src: url('/img/icons/vaccination.svg'); }
.hf-ic-video           { --hf-ic-src: url('/img/icons/video.svg'); }
.hf-ic-weights         { --hf-ic-src: url('/img/icons/weights.svg'); }

/* =================================================================
   Universele Font Awesome → SVG hybride mapping (2026-05-21 refactor).
   PRIMARY: healfie-eigen line-icons in /img/icons/ (108 in-use classes).
   FALLBACK: Tabler outline-iconen in /img/icons/tabler/ (72 classes).

   Werkt op alle (tenant-)domeinen, geen Pro Kit-whitelist nodig.
   Per icon-class één --icon CSS-variable die de base-rule oppakt.
   ================================================================= */

i.fa, i.fas, i.fal, i.far, i.fab, i.fat, i.fad,
i.fa-solid, i.fa-regular, i.fa-light, i.fa-thin, i.fa-brands, i.fa-duotone,
.fal-mapped {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	font-size: inherit;
	line-height: 1;
	font-style: normal;
	background-color: currentColor;
	-webkit-mask: var(--icon, none) center / contain no-repeat;
	mask: var(--icon, none) center / contain no-repeat;
}
i.fa::before, i.fas::before, i.fal::before, i.far::before, i.fab::before, i.fat::before, i.fad::before,
i.fa-solid::before, i.fa-regular::before, i.fa-light::before, i.fa-thin::before, i.fa-brands::before, i.fa-duotone::before,
.fal-mapped::before {
	content: none !important;
}

/* ---- Per-class icon-mapping (108 healfie + 72 tabler = 180 classes) ---- */
i.fa-allergies { --icon: url('/img/icons/allergy.svg'); }
i.fa-archive { --icon: url('/img/icons/folder.svg'); }
i.fa-arrow-circle-left { --icon: url('/img/icons/arrow-back.svg'); }
i.fa-arrow-right-from-bracket { --icon: url('/img/icons/logout.svg'); }
i.fa-at { --icon: url('/img/icons/tabler/at.svg'); }
i.fa-balance-scale { --icon: url('/img/icons/tabler/scale.svg'); }
i.fa-ban { --icon: url('/img/icons/close.svg'); }
i.fa-ban-smoking { --icon: url('/img/icons/no-smoke.svg'); }
i.fa-battery-low { --icon: url('/img/icons/tabler/battery-1.svg'); }
i.fa-bed { --icon: url('/img/icons/sleep.svg'); }
i.fa-bell { --icon: url('/img/icons/bell.svg'); }
i.fa-bold { --icon: url('/img/icons/bold.svg'); }
i.fa-bolt { --icon: url('/img/icons/tabler/bolt.svg'); }
i.fa-bolt-lightning { --icon: url('/img/icons/tabler/bolt.svg'); }
i.fa-bone { --icon: url('/img/icons/tabler/bone.svg'); }
i.fa-book { --icon: url('/img/icons/book.svg'); }
i.fa-book-open { --icon: url('/img/icons/book.svg'); }
i.fa-book-open-reader { --icon: url('/img/icons/profile-programs.svg'); }
i.fa-books { --icon: url('/img/icons/book.svg'); }
i.fa-brain { --icon: url('/img/icons/mental.svg'); }
i.fa-briefcase { --icon: url('/img/icons/tabler/briefcase.svg'); }
i.fa-bullhorn { --icon: url('/img/icons/megaphone.svg'); }
i.fa-bullseye { --icon: url('/img/icons/tabler/target.svg'); }
i.fa-bullseye-arrow { --icon: url('/img/icons/tabler/target-arrow.svg'); }
i.fa-camera { --icon: url('/img/icons/camera.svg'); }
i.fa-capsules { --icon: url('/img/icons/medicine.svg'); }
i.fa-chart-line { --icon: url('/img/icons/measurements.svg'); }
i.fa-check { --icon: url('/img/icons/check.svg'); }
i.fa-chevron-down { --icon: url('/img/icons/down.svg'); }
i.fa-chevron-left { --icon: url('/img/icons/tabler/chevron-left.svg'); }
i.fa-chevron-right { --icon: url('/img/icons/tabler/chevron-right.svg'); }
i.fa-calendar-plus { --icon: url('/img/icons/calendly.svg'); }
i.fa-chevron-up { --icon: url('/img/icons/tabler/chevron-up.svg'); }
i.fa-circle { --icon: url('/img/icons/tabler/circle.svg'); }
i.fa-circle-euro { --icon: url('/img/icons/euro.svg'); }
i.fa-circle-plus { --icon: url('/img/icons/plus.svg'); }
i.fa-circle-user { --icon: url('/img/icons/profile.svg'); }
i.fa-circle-xmark { --icon: url('/img/icons/cross.svg'); }
i.fa-clapperboard-play { --icon: url('/img/icons/tabler/movie.svg'); }
i.fa-clipboard { --icon: url('/img/icons/clipboard-plus.svg'); }
i.fa-clipboard-check { --icon: url('/img/icons/tabler/clipboard-check.svg'); }
i.fa-clipboard-list { --icon: url('/img/icons/clipboard-plus.svg'); }
i.fa-clipboard-list-check { --icon: url('/img/icons/clipboard-plus.svg'); }
i.fa-clock { --icon: url('/img/icons/calendar.svg'); }
i.fa-clock-rotate-left { --icon: url('/img/icons/tabler/history.svg'); }
i.fa-cloud-bolt { --icon: url('/img/icons/tabler/cloud-bolt.svg'); }
i.fa-code { --icon: url('/img/icons/code.svg'); }
i.fa-coins { --icon: url('/img/icons/tabler/coins.svg'); }
i.fa-comment-dots { --icon: url('/img/icons/chat.svg'); }
i.fa-comments { --icon: url('/img/icons/chat.svg'); }
i.fa-compass { --icon: url('/img/icons/tabler/compass.svg'); }
i.fa-copy { --icon: url('/img/icons/tabler/copy.svg'); }
i.fa-credit-card { --icon: url('/img/icons/tabler/credit-card.svg'); }
i.fa-cube { --icon: url('/img/icons/tabler/cube.svg'); }
i.fa-dna { --icon: url('/img/icons/tabler/dna.svg'); }
i.fa-droplet { --icon: url('/img/icons/tabler/droplet.svg'); }
i.fa-dumbbell { --icon: url('/img/icons/weights.svg'); }
i.fa-ellipsis { --icon: url('/img/icons/tabler/dots.svg'); }
i.fa-ellipsis-vertical { --icon: url('/img/icons/tabler/dots-vertical.svg'); }
i.fa-envelope { --icon: url('/img/icons/paper-plane.svg'); }
i.fa-exchange-alt { --icon: url('/img/icons/tabler/arrows-exchange.svg'); }
i.fa-eye { --icon: url('/img/icons/eye.svg'); }
i.fa-face-smile { --icon: url('/img/icons/tabler/mood-smile.svg'); }
i.fa-face-tired { --icon: url('/img/icons/symptoms.svg'); }
i.fa-face-worried { --icon: url('/img/icons/stress.svg'); }
i.fa-facebook-f { --icon: url('/img/icons/tabler/brand-facebook.svg'); }
i.fa-file { --icon: url('/img/icons/file.svg'); }
i.fa-file-invoice-dollar { --icon: url('/img/icons/tabler/file-invoice.svg'); }
i.fa-file-lines { --icon: url('/img/icons/file.svg'); }
i.fa-file-medical-alt { --icon: url('/img/icons/file.svg'); }
i.fa-fire-flame-curved { --icon: url('/img/icons/tabler/flame.svg'); }
i.fa-fish { --icon: url('/img/icons/tabler/fish.svg'); }
i.fa-flask { --icon: url('/img/icons/diagnose.svg'); }
i.fa-folder-open { --icon: url('/img/icons/folder.svg'); }
i.fa-gauge-high { --icon: url('/img/icons/measurements.svg'); }
i.fa-gear { --icon: url('/img/icons/user-settings.svg'); }
i.fa-glass-water { --icon: url('/img/icons/tabler/glass-full.svg'); }
i.fa-graduation-cap { --icon: url('/img/icons/profile-programs.svg'); }
i.fa-grid-2 { --icon: url('/img/icons/profile-data.svg'); }
i.fa-grip-lines-vertical { --icon: url('/img/icons/tabler/grip-vertical.svg'); }
i.fa-hand-holding-heart { --icon: url('/img/icons/tabler/heart-handshake.svg'); }
i.fa-hand-holding-usd { --icon: url('/img/icons/tabler/cash.svg'); }
i.fa-hands-helping { --icon: url('/img/icons/tabler/friends.svg'); }
i.fa-hashtag { --icon: url('/img/icons/tabler/hash.svg'); }
i.fa-head-side-brain { --icon: url('/img/icons/mental.svg'); }
i.fa-heart { --icon: url('/img/icons/heart.svg'); }
i.fa-heart-crack { --icon: url('/img/icons/tabler/heart-broken.svg'); }
i.fa-heart-pulse { --icon: url('/img/icons/activity.svg'); }
i.fa-hockey-puck { --icon: url('/img/icons/tabler/circle.svg'); }
i.fa-hospital { --icon: url('/img/icons/tabler/building-hospital.svg'); }
i.fa-house { --icon: url('/img/icons/tabler/home.svg'); }
i.fa-id-card { --icon: url('/img/icons/profile-info.svg'); }
i.fa-image { --icon: url('/img/icons/image.svg'); }
i.fa-info-circle { --icon: url('/img/icons/info.svg'); }
i.fa-instagram { --icon: url('/img/icons/tabler/brand-instagram.svg'); }
i.fa-italic { --icon: url('/img/icons/italic.svg'); }
i.fa-key { --icon: url('/img/icons/tabler/key.svg'); }
i.fa-key-skeleton { --icon: url('/img/icons/tabler/key.svg'); }
i.fa-laptop-code { --icon: url('/img/icons/tabler/code.svg'); }
i.fa-laptop-medical { --icon: url('/img/icons/tabler/device-laptop.svg'); }
i.fa-laptop-mobile { --icon: url('/img/icons/tabler/device-laptop.svg'); }
i.fa-leaf { --icon: url('/img/icons/tabler/leaf.svg'); }
i.fa-lightbulb { --icon: url('/img/icons/tabler/bulb.svg'); }
i.fa-lightbulb-on { --icon: url('/img/icons/tabler/bulb.svg'); }
i.fa-link { --icon: url('/img/icons/link.svg'); }
i.fa-linkedin-in { --icon: url('/img/icons/tabler/brand-linkedin.svg'); }
i.fa-list { --icon: url('/img/icons/list.svg'); }
i.fa-list-check { --icon: url('/img/icons/list.svg'); }
i.fa-list-ol { --icon: url('/img/icons/ordered-list.svg'); }
i.fa-list-ul { --icon: url('/img/icons/unordered-list.svg'); }
i.fa-long-arrow-left { --icon: url('/img/icons/arrow-left.svg'); }
i.fa-magnifying-glass { --icon: url('/img/icons/search.svg'); }
i.fa-male { --icon: url('/img/icons/profile.svg'); }
i.fa-medal { --icon: url('/img/icons/tabler/medal.svg'); }
i.fa-microphone { --icon: url('/img/icons/tabler/microphone.svg'); }
i.fa-message-lines { --icon: url('/img/icons/chat.svg'); }
i.fa-microscope { --icon: url('/img/icons/diagnose.svg'); }
i.fa-minus { --icon: url('/img/icons/hyphen.svg'); }
i.fa-mobile-alt { --icon: url('/img/icons/tabler/device-mobile.svg'); }
i.fa-mobile-screen { --icon: url('/img/icons/tabler/device-mobile.svg'); }
i.fa-money-bill-wave { --icon: url('/img/icons/tabler/cash.svg'); }
i.fa-moon { --icon: url('/img/icons/moon.svg'); }
i.fa-note-sticky { --icon: url('/img/icons/notes.svg'); }
i.fa-notes-medical { --icon: url('/img/icons/notes.svg'); }
i.fa-om { --icon: url('/img/icons/tabler/yoga.svg'); }
i.fa-paper-plane { --icon: url('/img/icons/paper-plane.svg'); }
i.fa-pen { --icon: url('/img/icons/pencil.svg'); }
i.fa-pen-to-square { --icon: url('/img/icons/edit.svg'); }
i.fa-pencil { --icon: url('/img/icons/pencil.svg'); }
i.fa-pencil-alt { --icon: url('/img/icons/pencil.svg'); }
i.fa-people-group { --icon: url('/img/icons/users.svg'); }
i.fa-person-running { --icon: url('/img/icons/habits.svg'); }
i.fa-person-walking { --icon: url('/img/icons/tabler/walk.svg'); }
i.fa-phone { --icon: url('/img/icons/chat.svg'); }
i.fa-phone-slash { --icon: url('/img/icons/tabler/phone-off.svg'); }
i.fa-pills { --icon: url('/img/icons/medicine.svg'); }
i.fa-plate-utensils { --icon: url('/img/icons/nutrition.svg'); }
i.fa-plus { --icon: url('/img/icons/plus.svg'); }
i.fa-plus-circle { --icon: url('/img/icons/plus.svg'); }
i.fa-prescription-bottle-medical { --icon: url('/img/icons/medicine.svg'); }
i.fa-qrcode { --icon: url('/img/icons/tabler/qrcode.svg'); }
i.fa-right-to-bracket { --icon: url('/img/icons/logout.svg'); }
i.fa-robot { --icon: url('/img/icons/tabler/robot.svg'); }
i.fa-rocket { --icon: url('/img/icons/tabler/rocket.svg'); }
i.fa-ruler-vertical { --icon: url('/img/icons/tabler/ruler.svg'); }
i.fa-scale-balanced { --icon: url('/img/icons/tabler/scale.svg'); }
i.fa-school { --icon: url('/img/icons/profile-programs.svg'); }
i.fa-seedling { --icon: url('/img/icons/tabler/plant-2.svg'); }
i.fa-shield-alt { --icon: url('/img/icons/shield.svg'); }
i.fa-shield-check { --icon: url('/img/icons/shield.svg'); }
i.fa-shield-halved { --icon: url('/img/icons/shield.svg'); }
i.fa-shield-heart { --icon: url('/img/icons/shield.svg'); }
i.fa-shoe-prints { --icon: url('/img/icons/tabler/shoe.svg'); }
i.fa-sign-out-alt { --icon: url('/img/icons/logout.svg'); }
i.fa-spa { --icon: url('/img/icons/tabler/flower.svg'); }
i.fa-spinner-third { --icon: url('/img/icons/tabler/loader.svg'); }
i.fa-stethoscope { --icon: url('/img/icons/diagnose.svg'); }
i.fa-suitcase { --icon: url('/img/icons/tabler/briefcase-2.svg'); }
i.fa-sun-bright { --icon: url('/img/icons/sun.svg'); }
i.fa-sync { --icon: url('/img/icons/tabler/refresh.svg'); }
i.fa-sync-alt { --icon: url('/img/icons/tabler/refresh.svg'); }
i.fa-syringe { --icon: url('/img/icons/vaccination.svg'); }
i.fa-tasks { --icon: url('/img/icons/list.svg'); }
i.fa-thermometer { --icon: url('/img/icons/measurements.svg'); }
i.fa-thumbs-up { --icon: url('/img/icons/tabler/thumb-up.svg'); }
i.fa-times { --icon: url('/img/icons/close.svg'); }
i.fa-toggle-on { --icon: url('/img/icons/tabler/toggle-right.svg'); }
i.fa-toolbox { --icon: url('/img/icons/tabler/tools.svg'); }
i.fa-trash-alt { --icon: url('/img/icons/delete.svg'); }
i.fa-trophy { --icon: url('/img/icons/success.svg'); }
i.fa-user-doctor { --icon: url('/img/icons/profile.svg'); }
i.fa-user-friends { --icon: url('/img/icons/users.svg'); }
i.fa-user-group { --icon: url('/img/icons/users.svg'); }
i.fa-user-lock { --icon: url('/img/icons/profile.svg'); }
i.fa-user-shield { --icon: url('/img/icons/shield.svg'); }
i.fa-user-tie { --icon: url('/img/icons/profile.svg'); }
i.fa-users { --icon: url('/img/icons/users.svg'); }
i.fa-utensils { --icon: url('/img/icons/nutrition.svg'); }
i.fa-video { --icon: url('/img/icons/video.svg'); }
i.fa-wave-pulse { --icon: url('/img/icons/activity.svg'); }
i.fa-wpforms { --icon: url('/img/icons/tabler/forms.svg'); }
i.fa-xmark,
i.fa-times,
i.fa-close { --icon: url('/img/icons/tabler/x.svg'); }
i.fa-ban { --icon: url('/img/icons/tabler/ban.svg'); }
i.fa-circle-xmark,
i.fa-circle-x { --icon: url('/img/icons/tabler/circle-x.svg'); }


/* Speciaal-geval: PlusSign = ronde groene FAB. Het `<i>` is zelf de cirkel,
   het plus-icoon zit in een ::before pseudo-element zodat zowel de groene
   ronde achtergrond als het witte plus-icoon zichtbaar zijn (mask op de
   parent zou het hele vlak naar plus-vorm clippen → geen cirkel meer). */
i.fal.fa-plus.PlusSign {
	-webkit-mask-image: none !important;
	mask-image: none !important;
	background-color: var(--ios-accent) !important;
	color: #fff !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative;
}
i.fal.fa-plus.PlusSign::before {
	content: '' !important;
	display: block;
	width: 55%;
	height: 55%;
	background-color: #fff;
	-webkit-mask-image: url('/img/icons/plus.svg');
	mask-image: url('/img/icons/plus.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	transform: rotate(0deg) !important;
}
/* Micro-animatie: bij geopende menu (.is-open op de FAB-knop zelf)
   roteert het plus-icoon 45° → een X. Visuele hint dat dezelfde knop
   ook voor sluiten dient. JS toggle gebeurt via #ChatOverlay-observer
   in healfie.js. !important nodig omdat een latere CSS-regel anders
   transform: none op ::before pseudo-element zou kunnen forceren. */
i.fal.fa-plus.PlusSign.is-open::before {
	transform: rotate(45deg) !important;
}

/* Idem voor #chatinputplus (de plus die echt het ChatOverlay-menu opent
   in de chat-footer). Andere DOM-structuur: een <div id="chatinputplus">
   met een <i class="fal fa-plus"> erin (geen ::before-truc). */
#chatinputplus i.fal {
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	transform: rotate(0deg) !important;
}
#chatinputplus.is-open i.fal {
	transform: rotate(45deg) !important;
}

/* MIDDEN — "Profiel" titel absoluut gecentreerd in de nav-bar */
#HeaderMyProfile > div:nth-child(2) {
	float: none !important;
	width: auto !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%);
	text-align: center !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	letter-spacing: -0.3px;
	color: var(--ios-label) !important;
	pointer-events: none;
	max-width: 60%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 1;
	padding: 0 !important;
}

/* RECHTS — edit-slot, klein, rechts uitgelijnd */
#HeaderMyProfile > div:nth-child(3) {
	float: none !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 32px;
	padding: 0 !important;
	text-align: right;
	z-index: 2;
}
#chatinput textarea, #chatinput input[type="text"] {
	background: #fff !important;
	border: 1px solid var(--ios-sep) !important;
	border-radius: 18px !important;
	padding: 8px 14px !important;
	font-size: 16px !important;
	font-family: var(--ios-font) !important;
	color: var(--ios-label) !important;
	resize: none;
	outline: none;
	box-shadow: none !important;
}
#chatinput textarea:focus, #chatinput input:focus {
	border-color: var(--ios-accent) !important;
}
#chatinput button, #chatinput .SendButton, .SendBtn {
	background: var(--ios-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 50% !important;
	width: 32px; height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	box-shadow: none !important;
}
#chatinput button:disabled, #chatinput .SendButton:disabled {
	background: #C7C7CC !important;
	cursor: not-allowed;
}

/* ---- Avatars (boven vorige rules) ---- */
.UserAvatar, .UserAvatarBig {
	box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06);
	background-color: var(--ios-bg-grouped);
}

/* ---- Buttons (Bootstrap-overrides + iOS pill/link) ---- */
.btn {
	border-radius: 999px !important;
	font-family: var(--ios-font) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: -0.1px;
	padding: 11px 22px !important;
	border: none !important;
	box-shadow: none !important;
	transition: opacity 0.15s, transform 0.05s;
}
.btn:active { transform: scale(0.98); opacity: 0.85; }
.btn-primary, .btn-success {
	background: var(--ios-accent) !important;
	color: #fff !important;
}
.btn-primary:hover, .btn-success:hover { background: var(--ios-accent-2) !important; }
.btn-danger {
	background: var(--ios-red) !important;
	color: #fff !important;
}
.btn-secondary {
	background: var(--ios-bg-grouped) !important;
	color: var(--ios-label) !important;
}
.btn-link {
	background: transparent !important;
	color: var(--ios-accent) !important;
	font-weight: 500 !important;
	padding: 6px 8px !important;
}
.btn-sm { padding: 7px 14px !important; font-size: 14px !important; }
.btn-block, .btn.form-control { width: 100%; }

/* SaveButton was groot Bootstrap-block — maakt nu Apple-pill */
.SaveButton {
	background: var(--ios-accent) !important;
	color: #fff !important;
	border-radius: 999px !important;
	margin: 22px auto !important;
	max-width: 240px !important;
	font-weight: 600 !important;
}

/* ---- Form-control inputs (alleen waar Bootstrap nog actief is) ---- */
.form-control:not(.SettingsCard *):not(.SettingsRow *) {
	border: 1px solid var(--ios-sep) !important;
	border-radius: var(--ios-radius) !important;
	background: #fff !important;
	font-family: var(--ios-font) !important;
	font-size: 16px !important;
	padding: 11px 14px !important;
	color: var(--ios-label) !important;
	box-shadow: none !important;
	margin-bottom: 8px;
}
.form-control:focus { border-color: var(--ios-accent) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(25,135,84,0.15) !important; }

/* ---- Notes / list items (logboek) ---- */
.ListNote {
	background: var(--ios-bg) !important;
	border: none !important;
	border-bottom: 0.5px solid var(--ios-sep) !important;
	border-radius: 0 !important;
	padding: 12px 16px !important;
	box-shadow: none !important;
	font-size: 15px;
	color: var(--ios-label);
}
.ListNote:first-child { border-top: 0.5px solid var(--ios-sep); }

/* ---- Profielsectie (oude markup ondersteunen) ---- */
.profilesection {
	background: var(--ios-bg) !important;
	border-bottom: 0.5px solid var(--ios-sep) !important;
	padding: 14px 16px !important;
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 16px;
	color: var(--ios-label);
}
.profilesection i:not(.fa-chevron-right) {
	color: var(--ios-accent) !important;
	font-size: 18px !important;
	width: 24px;
	text-align: center;
}
.profilesection i.fa-chevron-right {
	color: var(--ios-placeholder) !important;
	font-size: 16px !important;
	margin-left: auto;
}

/* ---- Section header in panel ---- */
.bg-panel-header {
	background: var(--ios-bg-grouped) !important;
	color: var(--ios-label) !important;
	border-bottom: 0.5px solid var(--ios-sep);
}

/* ---- Modals (Bootstrap-overrides) ---- */
.modal-content {
	border: none !important;
	border-radius: var(--ios-radius-lg) !important;
	box-shadow: 0 20px 50px rgba(0,0,0,0.25) !important;
	background: #fff !important;
}
.modal-header {
	border-bottom: 0.5px solid var(--ios-sep) !important;
	padding: 14px 16px !important;
}
.modal-title {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.2px;
}
.modal-body { padding: 16px !important; font-size: 16px; color: var(--ios-label-2); }
.modal-footer {
	border-top: 0.5px solid var(--ios-sep) !important;
	padding: 8px 16px !important;
	gap: 8px;
}

/* iOS-style action sheet variant */
.ios-sheet {
	position: fixed; inset: auto 0 0 0;
	background: var(--ios-bg) !important;
	border-radius: var(--ios-radius-lg) var(--ios-radius-lg) 0 0;
	padding: 12px 16px max(16px, env(safe-area-inset-bottom));
	box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
}
.ios-sheet::before {
	content: ''; display: block;
	width: 36px; height: 5px;
	background: #C7C7CC; border-radius: 3px;
	margin: 0 auto 10px;
}

/* ---- Scrollbars (desktop) ---- */
.MiniScrollBar::-webkit-scrollbar { width: 6px; }
.MiniScrollBar::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.18);
	border-radius: 3px;
}
.MiniScrollBar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }
.MiniScrollBar::-webkit-scrollbar-track { background: transparent; }

/* ---- Utility ---- */
.ios-hairline { box-shadow: 0 0 0 0.5px var(--ios-sep); }
hr { border: none !important; border-top: 0.5px solid var(--ios-sep) !important; margin: 12px 0 !important; }

/* ---- LearnMod / programma-rij ---- */
.LearnModItem, .MyLearnModItem {
	background: var(--ios-bg) !important;
	border: none !important;
	border-bottom: 0.5px solid var(--ios-sep) !important;
	border-radius: 0 !important;
	padding: 12px 16px !important;
	display: flex;
	gap: 12px;
	align-items: center;
}

/* ---- Plus / FAB ---- */
.PlusSign {
	background: var(--ios-accent) !important;
	color: #fff !important;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 6px rgba(25,135,84,0.3);
	border: none !important;
	font-size: 16px !important;
	line-height: 1 !important;
	padding: 0 !important;
	font-weight: 400 !important;
	font-style: normal;
}

/* ---- Selection ---- */
::selection { background: rgba(25,135,84,0.18); color: var(--ios-label); }

/* ---- Tap-highlight uit op niet-interactieve items ---- */
button, a, .btn, .footeritem, .Chatter, .SettingsLink, .profilesection {
	-webkit-tap-highlight-color: transparent;
}

/* ---- Input zoom-fix iOS (≥16px voorkomt auto-zoom) ---- */
input, select, textarea { font-size: 16px; }

/* ---- Rich-text bubble cleanup binnen iMessage-stijl ---- */
.ChatRichText img { border-radius: var(--ios-radius-sm); }
.ChatRichText a { color: var(--ios-blue); }
.ChatMsg.ChatMsgMe .ChatRichText a { color: #fff; }

/* ---- Settings-rijen op blauw selectie ---- */
.SettingsRow:focus-within { background: rgba(0,122,255,0.04); }

/* ============================================================
   POLISH — typografie, iconen en LearnModStatus-card
   ============================================================ */

/* Globale icon-regel — alle FA Light icons in interactieve UI krijgen
   een consistent gewicht en lichte tracking voor een SF-Symbols-feel. */
i.fal { font-weight: 300; }
i.fas { font-weight: 600; }

/* Verfijning ProfileRowIcon (al gedefinieerd) — in light style mooier
   uitgelijnd, ietsje groter en in accent. */
.SettingsRow.SettingsLink > .ProfileRowIcon {
	font-size: 19px !important;
	font-weight: 300;
	flex: 0 0 32px !important;
	color: var(--ios-accent) !important;
}
.SettingsRow.Destructive > .ProfileRowIcon { color: var(--ios-red) !important; }

/* Section header — iets fijner letter-spacing en juiste case */
.SectionHeader {
	font-size: 12px !important;
	letter-spacing: 0.6px !important;
	font-weight: 500 !important;
	color: var(--ios-label-3);
	padding: 26px 16px 6px !important;
}

/* Settings-row: label-regel groter en welk-getypte tekst lichter */
.SettingsRow > label {
	font-weight: 400 !important;
	letter-spacing: -0.2px;
}
.SettingsRow > input,
.SettingsRow > select,
.SettingsRow > textarea {
	color: var(--ios-label-2) !important;
	font-weight: 400 !important;
	letter-spacing: -0.2px;
}

/* Identity-card refinement */
.ProfileName {
	font-size: 24px !important;
	font-weight: 700 !important;
	letter-spacing: -0.4px;
}
.ProfileSubtitle {
	font-size: 15px !important;
	letter-spacing: -0.1px;
}
.ProfileAvatarEdit {
	font-size: 12px !important;
	color: var(--ios-label-3) !important;
	width: 28px !important; height: 28px !important;
}

/* Auto-save hint — minder "blob", subtieler */
.SettingsAutosaveHint {
	padding: 28px 16px 0 !important;
	font-size: 12px !important;
	letter-spacing: 0.1px;
	color: var(--ios-label-4);
}

/* Toggle-row — beschrijving rechts duidelijker */
.SettingsToggleRow .SettingsHelp {
	color: var(--ios-label-4);
	font-size: 14px !important;
	font-weight: 400;
	letter-spacing: -0.1px;
}

/* Bottom-tab caption en icoon iets verfijnd */
.footeritem {
	font-size: 10.5px !important;
	letter-spacing: -0.05px;
	gap: 2px;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.footeritem i.fal { font-size: 26px !important; line-height: 1; font-weight: 300 !important; }
.footeritem div { line-height: 1.2; }

/* HighLighted footer-item iets sterker */
.footeritem.HighLighted i { font-weight: 400 !important; }

/* LearnModStatus card — Apple-stijl in plaats van Bootstrap-side-border */
.LearnModStatusCard {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 14px;
	background: var(--ios-bg);
	border-radius: var(--ios-radius);
	box-shadow: 0 0 0 0.5px var(--ios-sep);
	margin: 4px 0;
}
.LearnModStatusCard .LMSIcon {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(52,199,89,0.1);
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 36px;
	font-size: 16px;
}
.LearnModStatusCard .LMSBody { flex: 1; min-width: 0; }
.LearnModStatusCard .LMSTitle {
	font-size: 15px;
	font-weight: 600;
	color: var(--ios-label);
	letter-spacing: -0.2px;
}
.LearnModStatusCard .LMSSub {
	font-size: 13px;
	color: var(--ios-label-3);
	margin-top: 1px;
	letter-spacing: -0.1px;
}
.LearnModStatusCard .LMSProgress {
	font-size: 12px;
	color: var(--ios-label-4);
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}
/* LearnModStatus zit in een ChatMsg — neutraliseer de iMessage-bg/padding
   zodat alleen de card-binnenkant zichtbaar is. */
.ChatMsg:has(.LearnModStatusCard) {
	background: transparent !important;
	box-shadow: none !important;
	max-width: 92% !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.ChatMsg:has(.LearnModStatusCard) .ChatMsgTime {
	color: var(--ios-label-4) !important;
}

/* ---- Chatter row polish ---- */
.Chatter .UserName { font-weight: 600; letter-spacing: -0.3px; }
.Chatter .ChatterTime { font-variant-numeric: tabular-nums; }
.Chatter .ChatterLastText { letter-spacing: -0.1px; line-height: 1.3; }

/* ---- Headers — titel sharper ---- */
#HeaderContainer h1, #HeaderContainer h2, #HeaderContainer .HeaderTitle {
	letter-spacing: -0.4px;
	font-weight: 600;
}

/* ---- Chat input area — paperclip + send refined ---- */
#chatinput .fa-paperclip,
#chatinput .fa-plus {
	font-weight: 300 !important;
	color: var(--ios-label-3) !important;
	font-size: 22px !important;
}
#chatinput button .fa-paper-plane,
#chatinput .SendBtn .fa-paper-plane,
#chatinput button .fa-arrow-up {
	font-weight: 300 !important;
	font-size: 14px !important;
}

/* ---- Chat-bubble paragrafen — iets ruimer ---- */
.ChatMsg p { margin: 0 0 6px 0; }
.ChatMsg p:last-child { margin-bottom: 0; }

/* ---- ChatRichText typografie binnen card ---- */
.ChatMsg:has(.ChatRichText) .ChatRichText {
	letter-spacing: -0.15px;
	color: var(--ios-label) !important;
}
/* Typografie alleen op DIRECTE p-children van ChatRichText — dat zijn de
   gewone alinea's. Geneste <p> binnen gekleurde banner-divs (bv. de blauwe
   "1. BEKIJK DE VIDEO"-strip met inline color:white) erven hun kleur via
   inline-style en blijven dus correct wit. */
.ChatMsg:has(.ChatRichText) .ChatRichText > p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ios-label-2);
}
.ChatMsg:has(.ChatRichText) .ChatRichText strong { font-weight: 600; }
/* Strong erft eigen kleur via parent (banner=wit, body=donker), niet hardcoden. */

/* Banner-blok styling: blauwe balk → iOS-blue gradient. color:white blijft
   geldig voor de binnen-content (paragrafen inherit kleur van deze div). */
.ChatMsg:has(.ChatRichText) .ChatRichText > div[style*="background-color:blue"],
.ChatMsg:has(.ChatRichText) .ChatRichText > div[style*="background-color:#08"],
.ChatMsg:has(.ChatRichText) .ChatRichText > div[style*="background-color: blue"] {
	background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%) !important;
	color: #fff !important;
	font-weight: 600 !important;
	letter-spacing: -0.2px;
	padding: 12px 16px !important;
	margin-top: 14px !important;
}
/* Donkere "Kleine stappen, elke dag beter!"-footer blijft donkerblauw maar
   tekst expliciet wit zodat eventuele <p> binnen erin niet door andere
   regels grijs wordt. */
.ChatMsg:has(.ChatRichText) .ChatRichText > div[style*="background-color:#082b63"],
.ChatMsg:has(.ChatRichText) .ChatRichText > div[style*="background-color: #082b63"],
.ChatMsg:has(.ChatRichText) .ChatRichText > div[style*="background:#082b63"] {
	color: #fff !important;
}
/* Vangnet: ALLE p's en strong's binnen een gekleurd banner-div erven kleur
   van de div, ook als ze geen inline-style hebben. */
.ChatMsg:has(.ChatRichText) .ChatRichText > div[style*="background"] p,
.ChatMsg:has(.ChatRichText) .ChatRichText > div[style*="background"] strong,
.ChatMsg:has(.ChatRichText) .ChatRichText > div[style*="background"] span {
	color: inherit !important;
}

/* ============================================================
   FINAL POLISH — eigen-bubbel, chat-input, select-fields
   ============================================================ */

/* Own message bubble: witte tekst op Healfie-groen bg (--ios-accent).
   Rich-content cards behouden hun eigen kleuren (witte card-bg). */
.ChatMsg.ChatMsgMe:not(:has(.ChatRichText)):not(:has(.LearnModStatusCard)),
.chatballoon.ChatMsgMe:not(:has(.ChatRichText)):not(:has(.LearnModStatusCard)) {
	color: #fff !important;
}
.ChatMsg.ChatMsgMe:not(:has(.ChatRichText)):not(:has(.LearnModStatusCard)) .ChatMsgText,
.ChatMsg.ChatMsgMe:not(:has(.ChatRichText)):not(:has(.LearnModStatusCard)) p,
.ChatMsg.ChatMsgMe:not(:has(.ChatRichText)):not(:has(.LearnModStatusCard)) span,
.ChatMsg.ChatMsgMe:not(:has(.ChatRichText)):not(:has(.LearnModStatusCard)) div:not([style*="background-color"]):not(.ChatMsgLink) {
	color: #fff !important;
}

/* Rich-content cards in eigen bubbel: respect oorspronkelijke kleuren.
   Bubbel zelf is al transparant/wit via :has-rules eerder, maar de globale
   `color:#fff` mag de inhoud niet overrulen. */
.ChatMsg.ChatMsgMe:has(.ChatRichText),
.ChatMsg.ChatMsgMe:has(.ChatRichText) .ChatMsgText,
.ChatMsg.ChatMsgMe:has(.ChatRichText) .ChatRichText {
	color: var(--ios-label) !important;
}
.ChatMsg.ChatMsgMe:has(.ChatRichText) .ChatRichText > p {
	color: var(--ios-label-2) !important;
}
.ChatMsg.ChatMsgMe:has(.LearnModStatusCard),
.ChatMsg.ChatMsgMe:has(.LearnModStatusCard) .ChatMsgText,
.ChatMsg.ChatMsgMe:has(.LearnModStatusCard) .LearnModStatusCard {
	color: var(--ios-label) !important;
}
.ChatMsg.ChatMsgMe:has(.LearnModStatusCard) .LMSTitle { color: var(--ios-label) !important; }
.ChatMsg.ChatMsgMe:has(.LearnModStatusCard) .LMSSub { color: var(--ios-label-3) !important; }
.ChatMsg.ChatMsgMe:has(.LearnModStatusCard) .LMSProgress { color: var(--ios-label-4) !important; }
/* Tijdstempel onderaan een rich-content card moet ook donker zijn — niet
   het 85%-witte ChatMsgMe-default. */
.ChatMsg.ChatMsgMe:has(.ChatRichText) .ChatMsgTime,
.ChatMsg.ChatMsgMe:has(.LearnModStatusCard) .ChatMsgTime {
	color: var(--ios-label-4) !important;
}
.ChatMsg.ChatMsgMe:has(.ChatRichText) .ChatMsgTime i.fal,
.ChatMsg.ChatMsgMe:has(.LearnModStatusCard) .ChatMsgTime i.fal {
	color: var(--ios-label-4) !important;
}
/* Anchor-tags binnen een Jip-card: alleen NAAKTE links (zonder inline
   color/background) krijgen iOS-blue — ZONDER !important, zodat inline
   `style="color:white"` op styled-buttons (bv. oranje "IK HEB GEOEFEND!")
   altijd wint. Inline-style vs CSS zonder !important: inline wint. */
.ChatMsg.ChatMsgMe:has(.ChatRichText) .ChatRichText a:not([style*="color"]):not([style*="background"]) {
	color: var(--ios-blue);
}
/* Banner-divs binnen ChatRichText behouden hun inline `color:white` — die
   blijft door inheritance werken omdat we hierboven alleen .ChatRichText
   en directe `> p` overschrijven, niet de banner-divs. */
/* ChatMsgTime — uit absolute positionering, inline rechtsonder voor zowel
   eigen als ontvangen berichten. Zo overlapt-ie nooit meer de body-tekst. */
.ChatMsg .ChatMsgTime {
	position: static !important;
	display: block;
	width: auto !important;
	text-align: right;
	margin: 4px 0 0 0 !important;
	padding: 0 !important;
	font-size: 10px !important;
	color: var(--ios-label-4);
	background: transparent !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1px;
}
.ChatMsg.ChatMsgMe .ChatMsgTime { color: rgba(255,255,255,0.85) !important; }
.ChatMsg .ChatMsgTime i.fal {
	font-size: 10px !important;
	margin-left: 4px;
	color: inherit !important;
	font-weight: 300 !important;
}
/* Korte bubbels: zorg dat de inhoud minstens een paar px hoog is */
.ChatMsg.ChatMsgMe { padding: 6px 12px !important; }

/* ---- Chat input area refined ---- */
/* Display ZONDER !important — anders blokkeert het ShowPanel's inline
   `style.display="none"` om de input-bar te verbergen op andere panels
   (chats-overzicht, netwerk → resulteert in twee navbars naast elkaar). */
#FooterChatInput {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px max(40px, calc(env(safe-area-inset-bottom) + 10px)) !important;
	background: var(--ios-bg-blur) !important;
	min-height: 60px;
}
#chatinputplus {
	width: 36px !important; height: 36px !important;
	flex: 0 0 36px !important;
	float: none !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: var(--ios-label-3) !important;
	border-radius: 50%;
	transition: background 0.15s;
}
#chatinputplus:active { background: rgba(0,0,0,0.05); }
#chatinputplus i.fal { font-size: 24px !important; line-height: 1; font-weight: 300 !important; color: var(--ios-label-3) !important; }
/* Lege spacer-versie als de gebruiker geen overlay heeft */
#chatinputplus:empty { display: none !important; }

#chatinput {
	display: flex !important;
	float: none !important;
	width: 100% !important;
	flex: 1 1 auto;
	gap: 8px;
	align-items: center;
}
#chatinput form { width: 100%; display: flex; align-items: center; gap: 8px; }
#chatinput textarea, #chatinput input[type="text"] {
	flex: 1;
	margin: 0 !important;
	height: 36px !important;
	min-height: 36px;
	max-height: 100px;
	padding: 8px 14px !important;
	border-radius: 18px !important;
	border: 1px solid var(--ios-sep) !important;
	background: var(--ios-bg) !important;
	font-size: 16px !important;
	line-height: 1.25;
	font-family: var(--ios-font) !important;
	resize: none;
	outline: none;
	box-shadow: none !important;
	/* Verberg de native scrollbar/caret-strip die als grijs "|" rechts in
	   de input verscheen op desktop-WebKit. */
	overflow: hidden;
	scrollbar-width: none;
}
#chatinput textarea::-webkit-scrollbar,
#chatinput input[type="text"]::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; }
#chatinput textarea:focus, #chatinput input:focus {
	border-color: var(--ios-accent) !important;
	overflow: auto; /* alleen tijdens typen scrollen toestaan als content overloopt */
}
#chatinput .MiniScrollBar { overflow: hidden; }

/* Send-knop: paper-plane mooi gecentreerd in groene cirkel. */
#SendIcon, #chatinput button[type="submit"] {
	width: 36px !important; height: 36px !important;
	flex: 0 0 36px;
	border: none !important;
	border-radius: 50% !important;
	background: var(--ios-accent) !important;
	color: #fff !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
}
/* Glyph: targets zowel .fal (Light) als .fas (Solid) — html gebruikt fas */
#SendIcon i, #chatinput button i {
	font-size: 22px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	color: #fff !important;
	margin: 0 !important;
	transform: translate(-1px, 1px); /* optische centrering paper-plane glyph */
}
#SendIcon:active, #chatinput button:active { background: var(--ios-accent-2) !important; }

/* Voor het geval er een "echo-bar" onder de input zit (legacy lege div) */
#FooterChatInput + *:empty,
#FooterChatInput ~ div:empty { display: none !important; }

/* ---- Select-fields: tekst niet meer wegvallen achter chevron ---- */
select.form-control,
select.form-control.float-left,
select.form-control.float-right {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	padding: 11px 36px 11px 14px !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238E8E93'><path d='M4.293 6.293a1 1 0 011.414 0L8 8.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 16px !important;
	background-color: #fff !important;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
select.form-control:focus { border-color: var(--ios-accent) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(25,135,84,0.15) !important; }

/* ShowLearnModule form-row: float:left/right naast elkaar zonder breuken */
form[name="LearnModule"] select[name="StartDay"],
form[name="LearnModule"] select[name="StartMonth"] {
	min-width: 0;
}

/* Groene + FAB overal verbergen (2026-05-11 — vervangen door context-specifieke
   tap-rows binnen de pagina's zelf). Match alle bestaande PlusSign-selectors
   qua specificiteit, anders winnen i.fal.fa-plus.PlusSign / #HeaderGeneric .PlusSign. */
.PlusSign,
i.fal.fa-plus.PlusSign,
#HeaderGeneric .PlusSign,
#HeaderGeneric .IconRight { display: none !important; }
/* PlusSign / FAB-iconen optisch gecentreerd (regels behouden voor het geval
   de FAB ooit weer in beeld moet komen) */
.PlusSign-disabled-style {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	font-style: normal;
	line-height: 1 !important;
}
.PlusSign::before {
	font-family: inherit;
}
i.fal.fa-plus.PlusSign { font-size: 16px !important; }
/* FA-glyph stretching reset — nodig op `<i>`-elementen die default italic zijn */
i.fal { font-style: normal; }

/* ---- ScrollLearnMod (lijst leermodules per persoon) — grouped list ---- */
#ScrollLearnMod {
	background: var(--ios-bg-grouped) !important;
	padding-bottom: 32px;
}
#ScrollLearnMod > .ListItem.bg-panel-header,
#ScrollLearnMod > .ListItem {
	background: var(--ios-bg) !important;
	margin: 0 16px 8px 16px !important;
	border-radius: var(--ios-radius) !important;
	padding: 14px 16px !important;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
	border: none !important;
	display: block;
	font-size: 16px;
	color: var(--ios-label);
}
#ScrollLearnMod > .ListItem.text-center {
	background: transparent !important;
	box-shadow: none !important;
	margin: 8px 16px 12px !important;
	padding: 0 !important;
	font-size: 13px !important;
	color: var(--ios-label-3) !important;
	letter-spacing: -0.1px;
}
#ScrollLearnMod > .ListItem strong {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.3px;
}
#ScrollLearnMod > .ListItem > i.fal.fa-books {
	color: var(--ios-accent) !important;
	font-size: 18px;
	font-weight: 300 !important;
	margin-right: 8px;
}
#ScrollLearnMod > .ListItem > i.fa-chevron-down {
	color: var(--ios-placeholder) !important;
	font-size: 15px;
	font-weight: 300 !important;
}
.LearnModStatusBlock { font-size: 13px !important; color: var(--ios-label-3); margin-top: 8px !important; }
.LearnModStatusBlock .badge,
.LearnModStatusBlock [class*="status"] {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.2px;
}

/* Chat-input plus krijgt subtiel grijs vlak voor visuele context */
#chatinputplus {
	background: rgba(0,0,0,0.04);
}
#chatinputplus:active { background: rgba(0,0,0,0.10); }
#chatinputplus:empty { background: transparent !important; }

/* ============================================================
   Note-list & Note-form polish (screenshots 9, 10, 11)
   ============================================================ */

/* ListNote — Apple disclosure-card. Default collapsed: titel-rij + één
   detail-regel zichtbaar (~2 regels totaal); bij klik klapt-ie open via
   .Expanded class. Padding-bottom is bewust groter zodat de tweede
   regel volledig leesbaar is en niet half wordt afgekapt. */
.ListNote {
	height: auto !important;
	max-height: 78px;
	min-height: 60px;
	overflow: hidden;
	transition: max-height 0.28s ease;
	cursor: pointer;
	position: relative;
	padding: 12px 40px 12px 16px !important; /* +24px right voor chevron */
}
.ListNote.Expanded {
	max-height: 2000px; /* groot genoeg voor langste content; transition werkt */
	overflow: visible;
}
/* Subtle "tap-to-expand" hint: chevron rechts gepositioneerd op de
   eerste-regel-hoogte zodat hij in collapsed state op één lijn staat
   met de titel. */
.ListNote::after {
	content: '\203A';
	position: absolute;
	right: 14px;
	top: 18px;
	color: var(--ios-placeholder);
	font-size: 20px;
	line-height: 1;
	transition: transform 0.28s ease;
	transform: rotate(90deg);
	transform-origin: center;
	pointer-events: none;
}
.ListNote.Expanded::after {
	transform: rotate(-90deg);
}
.ListNote .NoteResults { padding: 0 !important; }
.ListNote .NoteResults .Details { color: var(--ios-label-3); font-size: 14px; }

/* Note-form: pad rond, expliciet inputs in card-stijl, trash rechtsboven. */
#NoteForm {
	padding: 16px !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
#NoteForm > div { margin: 0 !important; padding: 0 !important; border: none !important; }
#NoteTitle {
	width: 100%;
	border: 1px solid var(--ios-sep) !important;
	border-radius: var(--ios-radius) !important;
	padding: 11px 14px !important;
	font-size: 16px !important;
	font-family: var(--ios-font) !important;
	background: #fff !important;
	box-shadow: none !important;
	outline: none;
}
#NoteText {
	width: 100%;
	min-height: 180px !important;
	border: 1px solid var(--ios-sep) !important;
	border-radius: var(--ios-radius) !important;
	padding: 11px 14px !important;
	font-size: 16px !important;
	font-family: var(--ios-font) !important;
	background: #fff !important;
	box-shadow: none !important;
	outline: none;
	resize: vertical;
}
#NoteTitle:focus, #NoteText:focus, #NoteCategoryID:focus { border-color: var(--ios-accent) !important; box-shadow: 0 0 0 3px rgba(25,135,84,0.15) !important; }

#notelabels {
	width: 100%;
	border-top: none !important;
	display: flex;
	align-items: center;
	gap: 12px;
}
#notelabels select.form-control,
#NoteCategoryID {
	flex: 1;
	height: 44px !important;
	min-height: 44px;
	margin: 0 !important;
}
#DeleteNoteIcon {
	float: none !important;
	margin: 0 !important;
	color: var(--ios-red) !important;
	font-size: 20px !important;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
}
#DeleteNoteIcon:active { background: rgba(255,59,48,0.1); }

/* Note-form parent (#ScrollNote) krijgt grouped grijs */
#ScrollNote { background: var(--ios-bg-grouped); }
/* Numeric prefix (1./2./3./4.) iets bold */
.ChatMsg:has(.ChatRichText) .ChatRichText > div > strong { font-weight: 700; }

/* ---- iOS-style "noisy" emoji in tekst — geen extra style ---- */

/* ---- ChatHist link styling ---- */
.ChatHist a {
	color: var(--ios-blue) !important;
	font-weight: 500;
	text-decoration: none;
	font-size: 13px;
}
/* WhatsApp-stijl dag-divider: zwevende capsule gecentreerd in chat-flow.
   De ::before <span> krijgt de pill-styling; outer .ChatDate is alleen
   layout-wrapper (geen border-radius op zichzelf zodat de breedte zich
   aanpast aan de tekst en niet aan de hele breedte). */
.ChatDate {
	display: flex !important;
	justify-content: center !important;
	align-items: center;
	margin: 18px 0 10px !important;
	padding: 0 !important;
	background: transparent !important;
	width: auto !important;
	border-radius: 0 !important;
	pointer-events: none;
}
.ChatDate > span,
.ChatDate {
	color: #54656F;
}
.ChatDate > span {
	display: inline-block;
	background: rgba(225, 245, 254, 0.92);
	box-shadow: 0 1px 1px rgba(0,0,0,0.08);
	color: #54656F;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
/* Fallback voor oude markup (zonder <span> erin): style de ChatDate zelf
   ook als pill. */
.ChatDate:not(:has(> span)) {
	display: inline-block !important;
	background: rgba(225, 245, 254, 0.92) !important;
	box-shadow: 0 1px 1px rgba(0,0,0,0.08);
	color: #54656F !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 5px 12px !important;
	border-radius: 999px !important;
	margin: 18px auto 10px !important;
}

/* ============================================================
   Polish for ListSection / ListItem / ListHeader (gegevens-screen)
   ============================================================ */

#ScrollDataList { background: var(--ios-bg-grouped) !important; padding-bottom: 24px; }
#ScrollDataList .ListSection {
	background: var(--ios-bg) !important;
	border-radius: var(--ios-radius) !important;
	margin: 0 !important; /* container heeft al 20px padding — geen dubbele inset */
	padding: 0 !important;
	overflow: hidden;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
}
#ScrollDataList .ListHeader {
	font-size: 12px !important;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	font-weight: 500 !important;
	color: var(--ios-label-3) !important;
	text-align: left !important;
	padding: 24px 16px 6px !important;
	background: transparent !important;
}
#ScrollDataList .ListItem {
	display: flex !important;
	align-items: center;
	gap: 14px;
	padding: 12px 16px !important;
	border: none !important;
	border-bottom: 0.5px solid var(--ios-sep) !important;
	background: transparent !important;
	min-height: 48px;
	font-size: 16px;
	color: var(--ios-label) !important;
	font-weight: 400;
	letter-spacing: -0.2px;
	cursor: pointer;
}
#ScrollDataList .ListSection .ListItem:last-child { border-bottom: none !important; }
#ScrollDataList .ListItem:active { background: rgba(0,0,0,0.04) !important; }
#ScrollDataList .ListItem > i {
	flex: 0 0 30px;
	font-size: 19px;
	color: var(--ios-accent);
	text-align: center;
	margin-right: 0 !important;
	font-weight: 300 !important;
}
#ScrollDataList .ListItem > span { flex: 1; }
#ScrollDataList .ListItem::after {
	content: '\203A';
	color: var(--ios-placeholder);
	font-size: 22px;
	line-height: 1;
	margin-left: 8px;
}

/* HeaderGeneric "Plus"-FAB (de groene knop rechtsboven in screenshot 2) — hou
   ronde knop maar verklein, geen overflow buiten header. */
#HeaderGeneric .PlusSign {
	width: 32px !important;
	height: 32px !important;
	font-size: 16px;
	box-shadow: 0 1px 4px rgba(25,135,84,0.3);
}
/* In settings-context is de plus irrelevant. Override de !important van
   de FAB-specificiteit hierboven (display:inline-flex !important). */
body.settings-no-plus #HeaderGeneric .PlusSign,
body.settings-no-plus #HeaderGeneric .IconRight { display: none !important; }

/* Apple-stijl header layout voor HeaderGeneric: icons absolute aan de
   randen, titel absolute-gecentreerd op de viewport (niet afhankelijk
   van het wel/niet zichtbaar zijn van de right-action). */
#HeaderGeneric { position: relative; }
#HeaderGeneric .IconBack {
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: auto !important;
	padding: 8px 12px !important;
	justify-content: flex-start !important;
	float: none !important;
}
#HeaderGeneric .IconRight {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: auto !important;
	padding: 0 !important;
	justify-content: flex-end !important;
	float: none !important;
}
#HeaderGeneric .HeaderTitle {
	width: 100% !important;
	text-align: center !important;
	padding: 0 60px;     /* houd ruimte voor de absolute-iconen */
	box-sizing: border-box;
}

/* ============================================================
   Network "Zoek & Vind" — Tag-bar pills + person-detail polish
   ============================================================ */

#TagBar { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 0; }
#TagBar::-webkit-scrollbar { display: none; }
.Tag {
	background: var(--ios-bg) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 7px 14px !important;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
	color: var(--ios-label-2);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.1px;
	cursor: pointer;
	transition: background 0.15s;
}
.Tag i { color: var(--ios-accent); font-size: 14px; }
.Tag.TagSelected,
.Tag:active {
	background: var(--ios-accent) !important;
	color: #fff !important;
	box-shadow: none;
}
.Tag.TagSelected i { color: #fff; }
.Tag .TagCaption { color: inherit; }

/* Scroll-buttons om de tag-bar */
.ScrollButton .ScrollIcon {
	color: var(--ios-label-3);
	font-size: 16px;
	font-weight: 300;
	width: 28px; height: 28px;
	padding: 0;
	border: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	cursor: pointer;
}
.ScrollButton .ScrollIcon:active { background: rgba(0,0,0,0.05); }

/* "Terug naar overzicht" — Apple back-link met blue chevron */
#PersonDetail [onclick*="BackToResults"] {
	color: var(--ios-blue) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	padding: 10px 0 !important;
	letter-spacing: -0.2px;
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
}
#PersonDetail [onclick*="BackToResults"] i {
	color: var(--ios-blue) !important;
	font-weight: 300 !important;
	font-size: 16px !important;
}

/* Person-detail card: avatar + name + tag-line + connect button */
#PersonDetail {
	background: var(--ios-bg) !important;
	border-radius: 0 !important;
	padding: 14px 16px !important;
}
#PersonDetail h2,
#PersonDetail h3 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--ios-label);
	margin: 8px 0 2px;
}
#PersonDetail .UserName,
#PersonDetail .PersonName { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
#PersonDetail .JobTitle,
#PersonDetail .HeadLine,
#PersonDetail .PersonHeadLine {
	font-size: 14px;
	color: var(--ios-label-3);
	font-weight: 400;
	letter-spacing: -0.1px;
	line-height: 1.4;
	margin-bottom: 6px;
}
#PersonDetail [onclick*="Connect"],
#PersonDetail .ConnectBtn,
#PersonDetail button.btn {
	background: var(--ios-accent) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 8px 18px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	box-shadow: none !important;
}

/* "Over X" / sectie-headers in person-detail */
#PersonDetail .DetailSectionHeader,
#PersonDetail h4 {
	text-align: center !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: -0.3px;
	color: var(--ios-label) !important;
	padding: 18px 0 10px !important;
	margin: 18px 0 0 !important;
	border-top: 0.5px solid var(--ios-sep);
}

/* Body-tekst in person-detail iets lichter en ruimer */
#PersonDetail p,
#PersonDetail .DetailBody {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ios-label-2);
	letter-spacing: -0.1px;
}

/* ---- Dark-mode hint (alleen iOS Mail/SF native dark — opt-in) ---- */
@media (prefers-color-scheme: dark) {
	body.HfDarkOptIn {
		--ios-bg:          #000000;
		--ios-bg-grouped:  #000000;
		--ios-bg-secondary:#1C1C1E;
		--ios-bg-tertiary: #2C2C2E;
		--ios-bg-blur:     rgba(28,28,30,0.85);
		--ios-label:       #FFFFFF;
		--ios-label-2:     #EBEBF5;
		--ios-label-3:     #98989F;
		--ios-label-4:     #8E8E93;
		--ios-sep:         rgba(84,84,88,0.65);
		--ios-sep-opaque:  #38383A;
		--ios-placeholder: #48484A;
	}
}
/* ============================================================
   Datapoint-sheet — Apple action-sheet voor "Meting toevoegen"
   ============================================================ */
#DatapointSheet {
	/* absolute t.o.v. #HealfieContainer (position:relative) — zo
	   blijft de overlay binnen de app-breedte op desktop.
	   z-index 110 > .dp-sheet-overlay (100) zodat de Toevoegen-modal
	   ook boven GoalsSheet/DashOptionsSheet komt te liggen wanneer
	   die als picker-bron dienen. */
	position: absolute;
	inset: 0;
	z-index: 110;
	background: rgba(0,0,0,0.35);
	display: none;
	animation: dpFadeIn 0.18s ease-out;
	overflow: hidden;
	border-radius: inherit;
}
@keyframes dpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dpSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.dp-sheet-card {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: var(--ios-bg-grouped);
	border-radius: 16px 16px 0 0;
	max-height: 88vh;
	overflow-y: auto;
	animation: dpSlideUp 0.25s ease-out;
	padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.dp-sheet-handle {
	width: 36px;
	height: 4px;
	background: var(--ios-placeholder);
	border-radius: 2px;
	margin: 8px auto 4px;
	opacity: 0.6;
}
.dp-sheet-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px 6px;
	gap: 10px;
}
.dp-sheet-title {
	flex: 1;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	color: var(--ios-label);
	letter-spacing: -0.3px;
}
.dp-sheet-back, .dp-sheet-close {
	background: transparent;
	border: none;
	width: 32px; height: 32px;
	color: var(--ios-label-3);
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.dp-sheet-close { color: var(--ios-label-3); }
.dp-sheet-body { padding: 4px 0 16px; }
.dp-sheet-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--ios-label-3);
	font-size: 14px;
}

/* Section-headers binnen de sheet */
.dp-section-header {
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--ios-label-3);
	font-weight: 500;
	padding: 18px 16px 6px;
}
.dp-section-card {
	background: var(--ios-bg);
	border-radius: 10px;
	margin: 0 16px;
	overflow: hidden;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
}
/* Apple Health-style minus-circle links naast meting in pinned-manager.
   Grijs cirkel met − teken; tap = uit de manager-lijst verwijderen. */
.dp-row-remove {
	flex: 0 0 28px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #C7C7CC;
	color: #fff;
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 13px;
	margin-right: 6px;
	-webkit-tap-highlight-color: transparent;
}
.dp-row-remove:active { transform: scale(0.92); background: var(--ios-red); }
.dp-row-remove > i.fal { font-size: 13px; line-height: 1; }
/* Up/Down knoppen in de Volgorde-wijzigen view */
.dp-reorder-row { gap: 6px; }
/* Label rekt op zodat de knoppen rechts uitgelijnd zijn (override van
   de generieke `.SettingsRow > label:not(.iosToggle) { flex: 0 0 38% }`). */
.dp-reorder-row > label:not(.iosToggle) { flex: 1 1 auto; }
.dp-reorder-btn {
	flex: 0 0 32px;
	width: 32px; height: 32px;
	border-radius: 8px;
	background: var(--ios-bg-3, #EFEFF4);
	color: var(--ios-label);
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.dp-reorder-btn[disabled] { opacity: 0.35; cursor: default; }
.dp-reorder-btn:not([disabled]):active { background: var(--ios-accent-light); color: var(--ios-accent); }
.dp-reorder-btn > i.fal { font-size: 14px; line-height: 1; }
/* Subtiele "eigen"-pill achter een meting-naam in de Vastgemaakt-manager. */
.dp-tag-extra {
	display: inline-block;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ios-accent);
	background: var(--ios-accent-light);
	padding: 1px 6px;
	border-radius: 4px;
	margin-left: 6px;
	vertical-align: 1px;
}

/* Rij in de definition-lijst */
.dp-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 0.5px solid var(--ios-sep);
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.dp-section-card .dp-row:last-child { border-bottom: none; }
.dp-row:active { background: rgba(0,0,0,0.04); }
.dp-row > i.fal {
	flex: 0 0 28px;
	font-size: 20px;
	text-align: center;
}
.dp-row-label { flex: 1; min-width: 0; }
.dp-row-name { font-size: 16px; color: var(--ios-label); letter-spacing: -0.2px; font-weight: 400; }
.dp-row-meta { font-size: 13px; color: var(--ios-label-3); margin-top: 1px; }
.dp-row-chev { color: var(--ios-placeholder) !important; font-size: 14px !important; }

/* =================================================================
   Toevoegen-modal — search + categorieën + meest gebruikt + A-Z + rail
   ================================================================= */
.dp-add-shell {
	position: relative;
	display: flex;
	min-height: 60vh;
}
.dp-add-content { flex: 1; min-width: 0; }
.dp-add-search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ios-bg-3, #EFEFF4);
	border-radius: 10px;
	margin: 8px 16px 12px;
	padding: 8px 12px;
}
.dp-add-search > i.fal { color: var(--ios-label-3); font-size: 16px; }
.dp-add-search > input {
	flex: 1;
	border: 0;
	background: transparent;
	font-size: 15px;
	color: var(--ios-label);
	outline: none;
	-webkit-appearance: none;
}
.dp-add-clear {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--ios-label-3);
	font-size: 16px;
}
.dp-add-categories {
	background: var(--ios-bg);
	border-radius: 10px;
	margin: 0 16px 12px;
	overflow: hidden;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
}
.dp-cat-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 0.5px solid var(--ios-sep);
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.dp-add-categories .dp-cat-row:last-child { border-bottom: none; }
.dp-cat-row:active { background: rgba(0,0,0,0.04); }
.dp-cat-row-sel { background: var(--ios-accent-light); }
.dp-cat-row > i.fal:first-child {
	flex: 0 0 28px;
	font-size: 20px;
	text-align: center;
}
.dp-cat-label { flex: 1; font-size: 16px; color: var(--ios-label); }
.dp-cat-chev { color: var(--ios-placeholder); font-size: 14px; }

.dp-az-header {
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--ios-label-3);
	font-weight: 500;
	padding: 14px 16px 6px;
	background: transparent;
}
.dp-az-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 16px;
	cursor: pointer;
	border-bottom: 0.5px solid var(--ios-sep);
	background: var(--ios-bg);
	margin: 0 16px;
}
.dp-az-row:active { background: rgba(0,0,0,0.04); }
.dp-az-row > i.fal:first-child { flex: 0 0 24px; font-size: 18px; text-align: center; }
.dp-az-name { flex: 1; font-size: 15px; color: var(--ios-label); }
.dp-az-unit { font-size: 12px; color: var(--ios-label-3); }
.dp-add-emptyresult {
	text-align: center;
	padding: 30px 20px 16px;
	color: var(--ios-label-3);
	font-size: 14px;
}
/* A-Z rail rechts (sticky-feel via position:sticky binnen scroll-context) */
.dp-az-rail {
	position: sticky;
	top: 0;
	flex: 0 0 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 4px;
	font-size: 10px;
	font-weight: 600;
	user-select: none;
	height: 100vh;
	max-height: 70vh;
}
.dp-az-rail-item {
	color: var(--ios-accent);
	line-height: 1.05;
	cursor: pointer;
	padding: 1px 2px;
	-webkit-tap-highlight-color: transparent;
}
.dp-az-rail-dim { color: var(--ios-label-3); opacity: 0.45; }
.dp-az-rail-item:active { background: var(--ios-accent-light); border-radius: 3px; }

/* Entry-form per definition */
.dp-entry { padding: 18px 16px; }
.dp-desc {
	font-size: 14px;
	color: var(--ios-label-2);
	margin-bottom: 14px;
	line-height: 1.4;
}
.dp-help {
	font-size: 12px;
	color: var(--ios-label-3);
	margin-top: 8px;
	text-align: center;
	letter-spacing: -0.1px;
}

/* Slider-control */
.dp-entry-slider {
	background: var(--ios-bg);
	border-radius: 12px;
	padding: 18px 16px;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
}
.dp-slider-value {
	font-size: 48px;
	font-weight: 700;
	color: var(--ios-accent);
	text-align: center;
	letter-spacing: -1px;
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}
.dp-entry-slider input[type="range"] {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	height: 32px;
}
.dp-entry-slider input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	background: linear-gradient(to right, var(--ios-accent), var(--ios-accent));
	border-radius: 2px;
}
.dp-entry-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 28px; height: 28px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0,0,0,0.25);
	margin-top: -12px;
	cursor: pointer;
}
.dp-entry-slider input[type="range"]::-moz-range-track {
	height: 4px;
	background: var(--ios-accent);
	border-radius: 2px;
}
.dp-entry-slider input[type="range"]::-moz-range-thumb {
	width: 28px; height: 28px;
	background: #fff;
	border: none;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0,0,0,0.25);
	cursor: pointer;
}
.dp-slider-bounds {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--ios-label-3);
	margin-top: 4px;
}

/* Stepper-control */
.dp-entry-stepper {
	display: flex;
	align-items: center;
	background: var(--ios-bg);
	border-radius: 12px;
	padding: 8px 12px;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
	gap: 8px;
}
.dp-stepper-btn {
	width: 36px; height: 36px;
	background: var(--ios-bg-grouped);
	border: none;
	border-radius: 50%;
	font-size: 24px;
	font-weight: 400;
	color: var(--ios-label);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.dp-stepper-btn:active { background: var(--ios-sep); }
.dp-entry-stepper input[type="number"] {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 22px;
	font-weight: 600;
	color: var(--ios-label);
	text-align: center;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.3px;
	-moz-appearance: textfield;
}
.dp-entry-stepper input[type="number"]::-webkit-inner-spin-button,
.dp-entry-stepper input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none; margin: 0;
}
.dp-stepper-unit {
	font-size: 14px;
	color: var(--ios-label-3);
	flex: 0 0 auto;
	padding: 0 4px;
}
/* Free-text entry (Reflectie, Notitie, …) */
.dp-entry-text {
	width: 100%;
	border: 0.5px solid var(--ios-sep);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	color: var(--ios-label);
	background: var(--ios-bg);
	box-sizing: border-box;
	resize: vertical;
	min-height: 100px;
	outline: none;
	margin-bottom: 12px;
}
.dp-entry-text:focus { border-color: var(--ios-accent); }
/* Boolean toggle entry (Acties zoals "Medicatie genomen") */
.dp-entry-toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 4px;
	margin-bottom: 12px;
}
.dp-toggle-label {
	font-size: 16px;
	color: var(--ios-label);
}

/* Notitie + Save-knop */
.dp-notitie {
	width: 100%;
	margin-top: 14px;
	padding: 11px 14px;
	border: 1px solid var(--ios-sep);
	border-radius: 10px;
	background: var(--ios-bg);
	font-size: 15px;
	color: var(--ios-label);
	font-family: var(--ios-font);
	resize: none;
	outline: none;
	box-sizing: border-box;
}
.dp-notitie:focus { border-color: var(--ios-accent); }
.dp-save-btn {
	display: block;
	width: 100%;
	margin-top: 18px;
	padding: 13px 22px;
	background: var(--ios-accent);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.05s;
}
.dp-save-btn:active { transform: scale(0.98); opacity: 0.85; }

/* ============================================================
   Dashboard "Ik"-tab — generiek coach-platform
   ============================================================ */
#ScrollDashboard {
	background: var(--ios-bg-grouped);
	padding-bottom: 60px;
}
.dash-loading, .dash-empty, .dash-goals-empty {
	text-align: center;
	padding: 24px 16px;
	color: var(--ios-label-3);
	font-size: 14px;
	letter-spacing: -0.1px;
	background: var(--ios-bg);
	margin: 0 16px;
	border-radius: 10px;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
}
.dash-empty { margin-top: 4px; }

/* Identity-strip header */
.dash-identity {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 10px;
}
.dash-id-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background-color: var(--ios-bg-grouped);
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 0 0.5px rgba(0,0,0,0.06);
	cursor: pointer;
	flex: 0 0 44px;
}
.dash-id-text { flex: 1; min-width: 0; }
.dash-id-greeting { font-size: 13px; color: var(--ios-label-3); letter-spacing: -0.1px; }
.dash-id-name {
	font-size: 20px; font-weight: 700; color: var(--ios-label);
	letter-spacing: -0.4px; line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-id-cog {
	background: transparent; border: none;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ios-label-3); font-size: 22px;
	cursor: pointer; padding: 0;
}
.dash-id-cog:active { color: var(--ios-label); }

/* Section-headers in dashboard */
.dash-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 22px 16px 8px;
}
.dash-section-head > span {
	font-size: 13px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--ios-label-3);
	font-weight: 500;
}
.dash-section-edit,
.dash-section-edit:hover,
.dash-section-edit:visited,
.dash-section-edit:active {
	font-size: 14px;
	color: var(--ios-accent);
	cursor: pointer;
	font-weight: 400;
	text-decoration: none;
}

/* ---- Mijn doelen ---- */
.dash-goals {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 0 16px;
	scrollbar-width: none;
}
.dash-goals::-webkit-scrollbar { display: none; }
.dash-goal-card {
	flex: 0 0 47%;
	min-width: 47%;
	background: var(--ios-bg);
	border-radius: 12px;
	padding: 14px;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
}
.dash-goal-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--ios-label);
	letter-spacing: -0.2px;
	margin-bottom: 4px;
}
.dash-goal-val {
	font-size: 18px;
	font-weight: 700;
	color: var(--ios-accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.3px;
	margin-bottom: 8px;
}
.dash-goal-bar {
	height: 6px;
	background: var(--ios-bg-grouped);
	border-radius: 3px;
	overflow: hidden;
}
.dash-goal-bar-fill {
	height: 100%;
	background: linear-gradient(to right, var(--ios-accent), #34C759);
	border-radius: 3px;
}

/* ---- Vastgemaakt cards ---- */
.dash-pinned {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 16px;
}
.dash-pinned-card {
	background: var(--ios-bg);
	border-radius: 12px;
	padding: 12px 14px;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.dash-pinned-card:active { background: rgba(0,0,0,0.02); }
.dash-pinned-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}
.dash-pinned-head > i.fal:first-child {
	font-size: 18px;
	width: 22px;
	text-align: center;
}
.dash-pinned-name {
	flex: 1;
	font-size: 15px;
	font-weight: 500;
	color: var(--ios-label);
	letter-spacing: -0.2px;
}
.dash-pinned-when {
	font-size: 12px;
	color: var(--ios-label-3);
	font-weight: 400;
}
.dash-pinned-chev {
	font-size: 14px !important;
	color: var(--ios-placeholder) !important;
}
.dash-pinned-body {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-left: 32px;
}
.dash-pinned-val {
	font-size: 24px;
	font-weight: 700;
	color: var(--ios-label);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.5px;
	flex: 0 0 auto;
}
.dash-pinned-unit {
	font-size: 13px;
	font-weight: 400;
	color: var(--ios-label-3);
	margin-left: 2px;
}
.dash-pinned-spark {
	flex: 1;
	height: 24px;
	display: flex;
	align-items: center;
}
.dash-pinned-spark .dash-spark-svg {
	width: 100%;
	height: 24px;
	overflow: visible;
}

/* ---- Recente activiteit ---- */
.dash-activity {
	background: var(--ios-bg);
	border-radius: 10px;
	margin: 0 16px;
	overflow: hidden;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
}
.dash-activity-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-bottom: 0.5px solid var(--ios-sep);
}
.dash-activity-row:last-child { border-bottom: none; }
.dash-activity-row > i.fal:first-child {
	font-size: 18px;
	flex: 0 0 22px;
	text-align: center;
}
.dash-act-text { flex: 1; min-width: 0; }
.dash-act-name {
	font-size: 14px;
	color: var(--ios-label);
	letter-spacing: -0.1px;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dash-act-val { color: var(--ios-label-2); font-weight: 500; }
.dash-act-note {
	font-size: 12px;
	color: var(--ios-label-3);
	margin-top: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dash-act-when {
	font-size: 12px;
	color: var(--ios-label-3);
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}
.dash-act-more {
	padding: 6px 16px 4px;
	text-align: center;
}
.dash-act-more a,
.dash-act-more a:hover,
.dash-act-more a:visited,
.dash-act-more a:active {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ios-accent);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	padding: 6px 10px;
	-webkit-tap-highlight-color: transparent;
	text-decoration: none;
}
.dash-act-more a > i.fal { font-size: 11px; }
.dash-act-more a:active { opacity: 0.6; }
.dash-act-add { padding: 10px 16px 0; }
.dash-act-add button,
.dash-act-add button:hover,
.dash-act-add button:focus {
	width: 100%;
	background: var(--ios-bg);
	border: 1px dashed var(--ios-sep);
	border-radius: 10px;
	padding: 12px;
	color: var(--ios-accent);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
}
.dash-act-add button:active { background: rgba(0,0,0,0.02); }

/* ---- Snelkoppelingen ---- */
.dash-shortcuts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 0 16px;
}
.dash-shortcut {
	background: var(--ios-bg);
	border: none;
	border-radius: 12px;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
	padding: 16px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: var(--ios-label);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: -0.1px;
}
.dash-shortcut:active { background: rgba(0,0,0,0.03); }
.dash-shortcut > i.fal {
	font-size: 22px;
	color: var(--ios-accent);
}
.dash-shortcut > span { line-height: 1.2; text-align: center; }

/* ============================================================
   HeaderDashboard — eigen header voor "Ik"-tab
   Title links, search-icon + avatar rechts.
   ============================================================ */
#HeaderDashboard {
	/* GEEN `display:flex !important` — anders blokkeert het ShowPanel's
	   inline display:none waardoor de header óók op andere tabs blijft. */
	display: flex;
	align-items: center !important;
	padding: 6px 12px !important;
	gap: 8px;
	position: relative;
}
/* Centered title in iOS-nav-bar conventie (zelfde als chats/instellingen):
   17px / 600, gecentreerd via absolute positioning zodat-ie altijd
   pixel-perfect in het midden staat ongeacht de breedte van de
   left/right buttons. */
#HeaderDashboard .HeaderTitle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 17px !important;
	font-weight: 600 !important;
	letter-spacing: -0.3px !important;
	color: var(--ios-label) !important;
	text-align: center;
	pointer-events: none;
	max-width: 60%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Three-dots options-cirkel uiterst links */
#HeaderDashboard .header-options-btn {
	width: 36px; height: 36px;
	border: none;
	background: var(--ios-bg-grouped);
	color: var(--ios-label-2);
	font-size: 16px;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex: 0 0 36px;
	z-index: 2;
}
#HeaderDashboard .header-options-btn:active {
	background: var(--ios-sep);
	color: var(--ios-label);
}
/* Avatar uiterst rechts via margin-left:auto (i.p.v. justify-content) */
#HeaderDashboard #HeaderDashAvatar {
	width: 32px; height: 32px;
	border-radius: 50%;
	background-color: var(--ios-bg-grouped);
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08);
	cursor: pointer;
	flex: 0 0 32px;
	margin-left: auto;
	z-index: 2;
}
#HeaderDashboard #HeaderDashAvatar:active { transform: scale(0.96); }

/* Goal-cards verfijning (icoon + percent-label) */
.dash-goal-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}
.dash-goal-head > i.fal {
	font-size: 14px;
}
.dash-goal-target {
	font-size: 13px;
	font-weight: 400;
	color: var(--ios-label-3);
	margin-left: 2px;
}
.dash-goal-pct {
	font-size: 11px;
	color: var(--ios-label-3);
	text-align: right;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   DashOptionsSheet (drie-puntjes-knop op dashboard) — hergebruikt
   de DatapointSheet-styling via een eigen overlay-class.
   ============================================================ */
.dp-sheet-overlay {
	position: absolute;
	inset: 0;
	z-index: 100;
	background: rgba(0,0,0,0.35);
	display: none;
	overflow: hidden;
	border-radius: inherit;
}
.dp-sheet-overlay .dp-sheet-card {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: var(--ios-bg-grouped);
	max-height: 88%;
	overflow-y: auto;
	padding-bottom: max(16px, env(safe-area-inset-bottom));
	animation: dpSlideUp 0.22s ease-out;
}
.dp-sheet-overlay .dp-sheet-handle {
	width: 36px; height: 4px;
	background: var(--ios-placeholder);
	border-radius: 2px;
	margin: 8px auto 4px;
	opacity: 0.6;
}
.dp-sheet-overlay .dp-sheet-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 14px 6px; gap: 10px;
}
.dp-sheet-overlay .dp-sheet-title {
	flex: 1; text-align: center; font-size: 17px; font-weight: 600;
	color: var(--ios-label); letter-spacing: -0.3px;
}
.dp-sheet-overlay .dp-sheet-close {
	background: transparent; border: none; width: 32px; height: 32px;
	color: var(--ios-label-3); font-size: 18px;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0;
}

/* Dichtheid-varianten op #ScrollDashboard */
#ScrollDashboard.dash-density-compact .dash-section-head     { padding: 12px 16px 4px; }
#ScrollDashboard.dash-density-compact .dash-pinned-card      { padding: 8px 12px; }
#ScrollDashboard.dash-density-compact .dash-pinned-val       { font-size: 20px; }
#ScrollDashboard.dash-density-compact .dash-activity-row     { padding: 8px 14px; }
#ScrollDashboard.dash-density-compact .dash-shortcut         { padding: 12px 6px; }

#ScrollDashboard.dash-density-spacious .dash-section-head    { padding: 28px 16px 10px; }
#ScrollDashboard.dash-density-spacious .dash-pinned-card     { padding: 16px 16px; }
#ScrollDashboard.dash-density-spacious .dash-activity-row    { padding: 14px 16px; }
#ScrollDashboard.dash-density-spacious .dash-shortcut        { padding: 20px 8px; }

/* ============================================================
   Streaks + Badges secties op het Overzicht-dashboard
   ============================================================ */
.dash-streaks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 16px;
}
.dash-streak-card {
	background: var(--ios-bg);
	border-radius: 12px;
	padding: 12px 14px;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
	display: flex;
	align-items: center;
	gap: 14px;
}
.dash-streak-card > i.fal:first-child {
	font-size: 22px;
	width: 28px;
	text-align: center;
}
.dash-streak-info { flex: 1; min-width: 0; }
.dash-streak-name {
	font-size: 15px;
	font-weight: 500;
	color: var(--ios-label);
	letter-spacing: -0.2px;
}
.dash-streak-meta {
	font-size: 12px;
	color: var(--ios-label-3);
	margin-top: 1px;
}
.dash-streak-num {
	font-size: 28px;
	font-weight: 700;
	color: var(--ios-accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.6px;
	flex: 0 0 auto;
}
.dash-streak-unit {
	font-size: 13px;
	font-weight: 500;
	color: var(--ios-label-3);
	margin-left: 2px;
}

.dash-badges {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 0 16px;
}
.dash-badge {
	position: relative; /* anchor voor .dash-badge-cnt counter-pill */
	background: var(--ios-bg);
	border-radius: 12px;
	padding: 14px 8px 10px;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	transition: transform 0.1s;
}
/* +N pill rechtsboven op de badge — toont aantal extra keren behaald
   (2x = +1, 3x = +2, …). Alleen voor earned-badges met Count > 1. */
.dash-badge-cnt {
	position: absolute;
	top: 6px;
	right: 6px;
	min-width: 22px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	letter-spacing: 0.2px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
	box-sizing: border-box;
}
.dash-badge-ico {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--ios-bg-grouped);
	color: var(--ios-placeholder);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}
.dash-badge-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--ios-label);
	letter-spacing: -0.1px;
}
.dash-badge-desc {
	font-size: 10px;
	color: var(--ios-label-3);
	line-height: 1.25;
}
.dash-badge-locked {
	opacity: 0.55;
}
.dash-badge-locked .dash-badge-name {
	color: var(--ios-label-3);
	font-weight: 500;
}
.dash-badge-earned:active { transform: scale(0.97); }

/* Density-tweak voor de nieuwe secties */
#ScrollDashboard.dash-density-compact .dash-streak-card  { padding: 8px 12px; }
#ScrollDashboard.dash-density-compact .dash-badges       { gap: 6px; }
#ScrollDashboard.dash-density-spacious .dash-streak-card { padding: 16px 16px; }
#ScrollDashboard.dash-density-spacious .dash-badges      { gap: 12px; }

/* Goals-editor delete-knop */
.dp-delete-btn {
	display: block;
	width: 100%;
	padding: 13px 22px;
	background: transparent;
	color: var(--ios-red);
	border: 1px solid var(--ios-red);
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.1px;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.05s;
}
.dp-delete-btn:active { transform: scale(0.98); opacity: 0.85; }

/* ============================================================
   Uitlog-knop onderaan Instellingen-pagina
   ============================================================ */
.SettingsLogoutWrap {
	margin: 28px 16px 32px;
	display: flex;
	flex-direction: column;
}
.SettingsLogoutBtn {
	background: var(--ios-bg);
	color: var(--ios-red);
	border: none;
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.1px;
	cursor: pointer;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--ios-font);
	transition: background 0.12s;
}
.SettingsLogoutBtn:active {
	background: rgba(255,59,48,0.08);
}
.SettingsLogoutBtn i.fal {
	font-size: 16px;
	color: var(--ios-red);
}

/* ============================================================
   Settings hub + drilldown (2026-05-11 redesign)
   ============================================================ */
/* Camera-badge op de avatar in de hub. (.ProfileAvatarEdit bestaat al
   met juiste positionering — hier alleen accentueren als klikbaar.) */
.SettingsHub .ProfileAvatarWrap { cursor: pointer; }
.SettingsHub .ProfileAvatarEdit {
	background: var(--ios-accent);
	color: #fff;
}
.SettingsHub .ProfileAvatarEdit i.fal { color: #fff; }

/* Sub-view header met chevron-back */
.SettingsDetailBar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px 12px;
	border-bottom: 0.5px solid var(--ios-sep);
	background: var(--ios-bg-grouped, #F2F2F7);
	position: sticky;
	top: 0;
	z-index: 1;
}
.SettingsBackBtn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: 0;
	padding: 6px 4px;
	color: var(--ios-blue, #007AFF);
	font-size: 16px;
	cursor: pointer;
	font-family: var(--ios-font);
}
.SettingsBackBtn i.fal { font-size: 14px; }
.SettingsDetailTitle {
	flex: 1;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	color: var(--ios-label, #000);
	margin-right: 64px; /* compenseer voor back-button breedte → titel-centrering */
}

/* Hint-blok voor uitleg-tekst boven cards (bv. "Mijn data, mijn regels") */
.SettingsHint { padding: 14px 20px; color: var(--ios-label-2); font-size: 14px; line-height: 1.55; }
.SettingsHint strong { color: var(--ios-label); }
/* Rechts uitgelijnde waarde naast een SettingsLink-label (bv. e-mailadres) */
.SettingsRow .SettingsValue {
	margin-left: auto;
	margin-right: 8px;
	color: var(--ios-label-2);
	font-size: 15px;
	max-width: 55%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.SettingsRow .SettingsValueMuted { color: var(--ios-placeholder, #C7C7CC); font-style: italic; }

/* ============================================================
   Sharing-rules — Apple-stijl lijst + drilldown
   ============================================================ */
/* Rules-pagina: alleen aan de linkerkant wat ademruimte toevoegen
   voor de hint-tekst — cards/lijst staan al netjes op 16px door hun
   eigen margin. Rechts geen extra padding, A-Z rail komt direct na
   de card-rand met minimale gap. */
.RulesPage .dp-add-shell { padding: 0; }
.RulesPage .dp-add-content { padding: 0; min-width: 0; }
.RulesPage .dp-az-rail { padding-left: 2px; padding-right: 4px; flex: 0 0 14px; }
.SharingRulesList { padding: 0; }
.RulesPage .dp-section-header { padding-top: 18px; }
/* Op de rules-pagina mag de card-margin rechts iets kleiner — anders
   te veel witruimte tussen card-rand en A-Z rail. */
.RulesPage .dp-section-card { margin: 0 8px 0 16px; }
.RulesPage .dp-add-search { margin: 8px 8px 12px 16px; }
.RulesPage .dp-section-header { padding-left: 16px; padding-right: 8px; }
.RulesPage .SettingsHint { padding-left: 20px; padding-right: 12px; }

/* Connectie-rij in de lijst (drilldown-tap). Geen eigen background — de
   omhullende .dp-section-card draagt 'm; rijen onderling gescheiden door
   een dunne separator die de card-overflow afkapt. */
.sr-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
	cursor: pointer;
	border-bottom: 0.5px solid var(--ios-sep);
}
.dp-section-card .sr-row:last-child { border-bottom: none; }
.sr-row:active { background: rgba(0,0,0,0.04); }
.sr-avatar {
	width: 40px; height: 40px;
	border-radius: 50%;
	background-size: cover; background-position: center;
	flex: 0 0 40px;
}
.sr-avatar-init {
	background: var(--ios-accent);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 15px;
}
.sr-name-wrap { flex: 1; min-width: 0; }
.sr-name { font-size: 15px; font-weight: 500; color: var(--ios-label); }
.sr-sub  { font-size: 12px; color: var(--ios-label-3); margin-top: 1px; }
.sr-row-chev { color: var(--ios-placeholder, #C7C7CC); font-size: 14px; }

/* Detail-header (grote avatar bovenaan) */
.sr-detail-head {
	display: flex; flex-direction: column; align-items: center;
	padding: 24px 16px 12px;
	position: relative;
}
.sr-avatar-xl {
	width: 84px; height: 84px;
	border-radius: 50%;
	background-size: cover; background-position: center;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.sr-avatar-xl.sr-avatar-init {
	background: var(--ios-accent);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 28px;
}
.sr-name-big {
	margin-top: 10px;
	font-size: 20px; font-weight: 600;
	color: var(--ios-label);
}
.sr-sub-big {
	margin-top: 2px;
	font-size: 13px; color: var(--ios-label-3);
}
.sr-status-slot-xl {
	position: absolute;
	top: 16px; right: 20px;
	width: 22px; text-align: center;
}
.sr-status { font-size: 16px; }
.sr-status-spin, .sr-status-ok { color: var(--ios-accent); }

/* Rechten-rij (in detail-view, binnen .dp-section-card) */
.sr-perm {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 0.5px solid var(--ios-sep);
}
.dp-section-card .sr-perm:last-child { border-bottom: none; }
.sr-perm-text { flex: 1; min-width: 0; }
.sr-perm-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--ios-label);
	line-height: 1.35;
}
.sr-perm-desc {
	font-size: 12px;
	color: var(--ios-label-3);
	margin-top: 2px;
	line-height: 1.4;
}
.sr-perm .iosToggle { flex: 0 0 51px; }

/* Tijdelijke toegangslinks (rules-temp) */
.SharingTokensList { padding: 0; }
.st-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 0.5px solid var(--ios-sep);
}
.dp-section-card .st-row:last-child { border-bottom: none; }
.st-row-text { flex: 1; min-width: 0; }
.st-row-head { display:flex; align-items:center; gap:8px; }
.st-row-label { font-size:15px; font-weight:500; color: var(--ios-label); }
.st-row-meta { font-size:12px; color: var(--ios-label-3); margin-top: 2px; }
.st-badge {
	font-size: 10px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 1px 7px;
	border-radius: 6px;
	font-weight: 600;
}
.st-badge-active { background: var(--ios-accent-light, #DCF5E5); color: var(--ios-accent, #00AF66); }
.st-badge-dim    { background: rgba(0,0,0,0.06); color: var(--ios-label-3); }
.st-badge-ro     { background: rgba(0,122,255,0.10); color: var(--ios-blue, #007AFF); margin-left:4px; }
/* ============================================================
   Apple-style toast + confirm — vervangt browser alert/confirm
   ============================================================ */
.hf-toast-stack {
	position: absolute;
	left: 0; right: 0;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
	display: flex; flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
	z-index: 9000;
}
.hf-toast {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(28,28,30,0.92);
	color: #fff;
	border-radius: 22px;
	padding: 10px 18px 10px 14px;
	font-size: 14px;
	font-weight: 500;
	max-width: 88%;
	box-shadow: 0 6px 20px rgba(0,0,0,0.20);
	pointer-events: auto;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.18s ease-out, transform 0.18s ease-out;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.hf-toast i.fal { font-size: 16px; }
.hf-toast-in  { opacity: 1; transform: translateY(0); }
.hf-toast-out { opacity: 0; transform: translateY(8px); }
.hf-toast-success { background: rgba(34,199,89,0.95); }
.hf-toast-error   { background: rgba(255,59,48,0.95); }

/* Confirm-modal (Apple iOS-style dialog) */
.hf-confirm-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	z-index: 9500;
	opacity: 0;
	transition: opacity 0.16s ease-out;
}
.hf-confirm-in  { opacity: 1; }
.hf-confirm-out { opacity: 0; }
.hf-confirm-card {
	background: rgba(245,245,247,0.98);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-radius: 14px;
	width: 270px;
	max-width: 100%;
	overflow: hidden;
	box-shadow: 0 10px 36px rgba(0,0,0,0.22);
	transform: scale(0.96);
	transition: transform 0.16s ease-out;
	font-family: var(--ios-font, -apple-system, BlinkMacSystemFont, system-ui);
}
.hf-confirm-in .hf-confirm-card { transform: scale(1); }
.hf-confirm-title {
	padding: 16px 16px 4px;
	font-size: 17px;
	font-weight: 600;
	color: #000;
	text-align: center;
}
.hf-confirm-msg {
	padding: 6px 16px 14px;
	font-size: 13px;
	color: #1c1c1e;
	line-height: 1.4;
	text-align: center;
}
.hf-confirm-actions {
	display: flex;
	border-top: 0.5px solid rgba(60,60,67,0.29);
}
.hf-confirm-btn {
	flex: 1 1 0;
	background: transparent;
	border: 0;
	padding: 12px 0;
	font-size: 16px;
	color: var(--ios-blue, #007AFF);
	font-family: inherit;
	cursor: pointer;
	font-weight: 400;
}
.hf-confirm-btn:active { background: rgba(0,0,0,0.06); }
.hf-confirm-ok { font-weight: 600; border-left: 0.5px solid rgba(60,60,67,0.29); }
.hf-confirm-destr { color: var(--ios-red, #FF3B30); }

/* ============================================================
   ActivityCard — system-event in chat (Meting toegevoegd, Doel
   gewijzigd, etc.). Compact, icoon links, label+waarde rechts.
   ============================================================ */
.ActivityCard {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 4px;
	max-width: 280px;
}
.ActivityCard .ACIcon {
	flex: 0 0 36px;
	width: 36px; height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center; justify-content: center;
	font-size: 16px;
}
.ActivityCard .ACBody { flex: 1; min-width: 0; }
.ActivityCard .ACTitle {
	font-size: 13px;
	font-weight: 600;
	color: var(--ios-label, #000);
	letter-spacing: -0.1px;
}
.ActivityCard .ACSub {
	font-size: 12px;
	color: var(--ios-label-2, #555);
	margin-top: 1px;
}
.ActivityCard .ACValue {
	color: var(--ios-label, #000);
	font-weight: 500;
}

/* ============================================================
   Datapoint detail-view (Apple Health-style trend page)
   ============================================================ */
#ScrollDPDetail { background: var(--ios-bg-grouped, #F2F2F7); padding-bottom: 32px; }
.dp-detail-head {
	background: var(--ios-bg, #fff);
	padding: 20px 16px 16px;
	text-align: center;
	border-bottom: 0.5px solid var(--ios-sep, rgba(0,0,0,0.10));
}
.dp-detail-iconwrap {
	width: 56px; height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center; justify-content: center;
	font-size: 24px;
	margin-bottom: 8px;
}
.dp-detail-name {
	font-size: 22px;
	font-weight: 700;
	color: var(--ios-label);
	letter-spacing: -0.3px;
}
.dp-detail-unit { font-size: 13px; color: var(--ios-label-3); margin-top: 2px; }
.dp-trend-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 4px 12px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 600;
}
.dp-trend-badge i.fal { font-size: 12px; }

/* Periode-toggle (Apple Segment-control) — direct onder de header */
.dp-period-toggle {
	display: flex;
	gap: 0;
	margin: 20px 16px 14px;
	background: rgba(120,120,128,0.16);
	border-radius: 10px;
	padding: 2px;
}
/* Trend-badge zit nu ONDER de grafiek, centraal uitgelijnd */
.dp-trend-row {
	display: flex;
	justify-content: center;
	padding: 12px 16px 0;
}
.dp-period-btn {
	flex: 1 1 0;
	border: 0;
	background: transparent;
	padding: 8px 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--ios-label);
	border-radius: 8px;
	cursor: pointer;
	font-family: var(--ios-font, inherit);
	transition: background 0.12s;
}
.dp-period-btn-sel {
	background: var(--ios-bg, #fff);
	box-shadow: 0 1px 2px rgba(0,0,0,0.08);
	font-weight: 600;
}

/* Chart-card met groot avg-blok bovenin (Apple Health-stijl) */
.dp-chart-wrap {
	background: var(--ios-bg, #fff);
	margin: 0 16px;
	border-radius: 12px;
	padding: 16px 12px 6px;
}
.dp-chart-svg { width: 100%; height: auto; display: block; }
.dp-chart-empty { padding: 30px 16px; text-align: center; color: var(--ios-label-3); font-size: 14px; }
.dp-avg-block { padding: 0 4px 14px; }
.dp-avg-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--ios-label-3);
}
.dp-avg-value {
	font-size: 34px;
	font-weight: 700;
	color: var(--ios-label);
	line-height: 1.05;
	margin-top: 2px;
	letter-spacing: -0.6px;
}
.dp-avg-unit {
	font-size: 17px;
	font-weight: 500;
	color: var(--ios-label-3);
	margin-left: 2px;
}
.dp-avg-range {
	font-size: 13px;
	color: var(--ios-label-3);
	margin-top: 4px;
}

/* Alle gegevens — Apple Health-stijl: meting-naam klein bovenaan,
   één grote witte card met alle rijen, value links, datum + chevron rechts. */
.dp-hist-subtitle {
	padding: 18px 22px 8px;
	font-size: 16px;
	color: var(--ios-label-3, #6D6D72);
	font-weight: 400;
	letter-spacing: -0.2px;
}
.dp-hist-card {
	background: var(--ios-bg, #fff);
	border-radius: 12px;
	margin: 0 16px 24px;
	overflow: hidden;
	box-shadow: 0 0 0 0.5px var(--ios-sep, rgba(0,0,0,0.06));
}
.dp-hist-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 0.5px solid var(--ios-sep);
}
.dp-hist-card .dp-hist-row:last-child { border-bottom: none; }
.dp-hist-main { flex: 1; min-width: 0; }
.dp-hist-value {
	font-size: 17px;
	font-weight: 400;
	color: var(--ios-label, #000);
	letter-spacing: -0.2px;
	font-variant-numeric: tabular-nums;
}
.dp-hist-unit {
	font-size: 13px;
	font-weight: 400;
	color: var(--ios-label-3);
}
.dp-hist-note {
	font-size: 13px;
	color: var(--ios-label-3);
	margin-top: 2px;
	line-height: 1.35;
}
.dp-hist-date {
	font-size: 15px;
	color: var(--ios-label-3, #8E8E93);
	flex: 0 0 auto;
	letter-spacing: -0.1px;
}
.dp-hist-chev {
	color: var(--ios-placeholder, #C7C7CC);
	font-size: 13px;
	flex: 0 0 auto;
}

/* ============================================================
   Leermodule-picker — Apple Apps-stijl drilldown (search + A-Z)
   ============================================================ */
.hf-lm-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.40);
	z-index: 9300;
	display: none;
	align-items: stretch;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.18s ease-out;
}
.hf-lm-overlay.hf-lm-in  { opacity: 1; }
.hf-lm-overlay.hf-lm-out { opacity: 0; }
.hf-lm-card {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: var(--ios-bg-grouped, #F2F2F7);
	border-radius: 16px 16px 0 0;
	height: 88%;
	display: flex;
	flex-direction: column;
	transform: translateY(40px);
	transition: transform 0.22s cubic-bezier(.2,.7,.2,1);
	box-shadow: 0 -2px 16px rgba(0,0,0,0.18);
	overflow: hidden;
}
.hf-lm-overlay.hf-lm-in .hf-lm-card { transform: translateY(0); }
.hf-lm-header {
	position: relative;
	padding: 14px 16px 10px;
	text-align: center;
	background: var(--ios-bg, #fff);
	border-bottom: 0.5px solid var(--ios-sep, rgba(60,60,67,0.20));
	flex: 0 0 auto;
}
.hf-lm-title { font-size: 17px; font-weight: 600; color: var(--ios-label, #000); }
.hf-lm-header .dp-sheet-close { position: absolute; top: 8px; right: 10px; }
.hf-lm-body { flex: 1; min-height: 0; overflow-y: auto; }
.hf-lm-body .dp-add-shell { padding: 0; min-height: 100%; }
.hf-lm-body .dp-add-content { padding: 0; min-width: 0; }
.hf-lm-body .dp-section-card { margin: 0 8px 0 16px; }
.hf-lm-body .dp-add-search { margin: 12px 8px 12px 16px; }
.hf-lm-body .dp-az-rail { padding-left: 2px; padding-right: 6px; flex: 0 0 14px; }
.LMPickerList { padding-bottom: 24px; }

/* ============================================================
   Apple iOS-style action-sheet picker (bottom-sheet met opties)
   ============================================================ */
.hf-picker-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
	z-index: 9300;
	display: none;
	opacity: 0;
	transition: opacity 0.18s ease-out;
}
.hf-picker-overlay.hf-picker-in  { opacity: 1; display: block; }
.hf-picker-overlay.hf-picker-out { opacity: 0; }
.hf-picker-card {
	position: absolute;
	left: 8px; right: 8px; bottom: 8px;
	background: rgba(245,245,247,0.96);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-radius: 14px;
	padding: 8px 0 8px;
	box-shadow: 0 -2px 16px rgba(0,0,0,0.16);
	transform: translateY(20px);
	transition: transform 0.22s cubic-bezier(.2,.7,.2,1);
	max-height: 80vh;
	overflow: hidden;
}
.hf-picker-overlay.hf-picker-in .hf-picker-card { transform: translateY(0); }
.hf-picker-handle {
	width: 36px; height: 4px;
	background: rgba(60,60,67,0.30);
	border-radius: 2px;
	margin: 4px auto 8px;
}
.hf-picker-title {
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--ios-label-3, #6D6D72);
	padding: 4px 16px 10px;
	border-bottom: 0.5px solid rgba(60,60,67,0.20);
	letter-spacing: 0.1px;
}
.hf-picker-list { background: transparent; }
.hf-picker-list-scroll { max-height: 56vh; overflow-y: auto; }
.hf-picker-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	cursor: pointer;
	border-bottom: 0.5px solid rgba(60,60,67,0.18);
	font-size: 16px;
	color: var(--ios-label, #000);
}
.hf-picker-row:last-child { border-bottom: none; }
.hf-picker-row:active { background: rgba(0,0,0,0.05); }
.hf-picker-row-sel .hf-picker-label { color: var(--ios-accent, #00AF66); font-weight: 500; }
.hf-picker-row i.fa-check { color: var(--ios-accent, #00AF66); font-size: 15px; }
.hf-picker-cancel {
	display: block;
	width: calc(100% - 16px);
	margin: 10px 8px 0;
	background: #fff;
	border: 0;
	padding: 14px 0;
	border-radius: 12px;
	font-size: 17px;
	font-weight: 600;
	color: var(--ios-blue, #007AFF);
	cursor: pointer;
	font-family: var(--ios-font, inherit);
}
.hf-picker-cancel:active { background: rgba(0,0,0,0.04); }

/* Verplicht-veld marker (rood sterretje achter label) */
.SettingsRequired { color: var(--ios-red, #FF3B30); margin-left: 2px; font-weight: 500; }
/* Visuele feedback bij validatie-fout op een input */
.input-error {
	box-shadow: 0 0 0 2px rgba(255,59,48,0.35) !important;
	border-radius: 6px;
	transition: box-shadow 0.18s;
}

/* Apple-style filled primary-button — vol vlak in accent-kleur, ronde
   hoeken, vette tekst. Bedoeld voor de "Maak tijdelijke link"-actie. */
.st-create-wrap { padding: 14px 16px 8px; display: flex; gap: 10px; }
.st-create-wrap > .ios-primary-btn,
.st-create-wrap > .ios-secondary-btn { flex: 1 1 0; min-width: 0; }
.ios-secondary-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: var(--ios-bg, #fff);
	color: var(--ios-accent, #00AF66);
	border: 1.5px solid var(--ios-accent, #00AF66);
	border-radius: 14px;
	padding: 12px 20px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.2px;
	cursor: pointer;
	font-family: var(--ios-font, inherit);
	transition: transform 0.08s, opacity 0.12s;
}
.ios-secondary-btn:active { transform: scale(0.98); opacity: 0.85; }
.ios-secondary-btn > i.fal { font-size: 16px; }
/* QR-overlay (Apple-style modal centered on viewport) */
.st-qr-overlay {
	position: absolute;
	inset: 0;
	z-index: 120;
	background: rgba(0,0,0,0.4);
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.st-qr-card {
	background: #fff;
	border-radius: 16px;
	padding: 24px 20px 18px;
	max-width: 360px;
	width: 100%;
	position: relative;
	box-shadow: 0 12px 40px rgba(0,0,0,0.25);
	text-align: center;
}
.st-qr-card .dp-sheet-close {
	position: absolute; top: 10px; right: 10px;
}
.st-qr-title {
	font-size: 17px; font-weight: 600;
	margin-bottom: 14px;
	color: var(--ios-label);
}
.st-qr-img-wrap {
	background: #F2F2F7;
	border-radius: 12px;
	padding: 16px;
	margin: 0 auto 14px;
	display: inline-block;
}
.st-qr-img-wrap svg, .st-qr-img-wrap img { width: 240px; height: 240px; display: block; }
.st-qr-url {
	font-size: 11px;
	color: var(--ios-label-3);
	margin-bottom: 14px;
	word-break: break-all;
	padding: 0 4px;
	line-height: 1.4;
}

.ios-primary-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: var(--ios-accent, #00AF66);
	color: #fff;
	border: 0;
	border-radius: 14px;
	padding: 14px 20px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.2px;
	cursor: pointer;
	font-family: var(--ios-font, inherit);
	transition: transform 0.08s, opacity 0.12s;
	box-shadow: 0 1px 3px rgba(0,175,102,0.25);
}
.ios-primary-btn:active { transform: scale(0.98); opacity: 0.92; }
.ios-primary-btn:disabled { opacity: 0.55; cursor: default; }
.ios-primary-btn > i.fal { font-size: 16px; }
.st-btn {
	flex: 0 0 32px;
	width: 32px; height: 32px;
	border-radius: 8px;
	background: var(--ios-bg-3, #EFEFF4);
	color: var(--ios-label);
	border: 0;
	display: inline-flex;
	align-items: center; justify-content: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.st-btn:active { transform: scale(0.95); }
.st-btn-revoke { color: var(--ios-red); }
.st-btn-copy   { color: var(--ios-blue, #007AFF); }

/* Placeholder voor sub-views die nog gebouwd worden (Abonnementen) */
.SettingsEmpty {
	text-align: center;
	padding: 60px 24px 40px;
}
.SettingsEmptyIcon {
	font-size: 48px;
	color: var(--ios-placeholder, #C7C7CC);
	margin-bottom: 16px;
}
.SettingsEmptyTitle {
	font-size: 17px;
	font-weight: 600;
	color: var(--ios-label);
	margin-bottom: 8px;
}
.SettingsEmptyBody {
	font-size: 14px;
	color: var(--ios-label-2);
	line-height: 1.5;
	max-width: 320px;
	margin: 0 auto;
}

/* ============================================================
   "Mijn resultaten" — drie stat-tegels onder Mijn doelen
   ============================================================ */
.dash-results {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 0 16px;
}
.dash-result-tile {
	background: var(--ios-bg);
	border-radius: 12px;
	padding: 14px 8px 12px;
	box-shadow: 0 0 0 0.5px var(--ios-sep);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}
.dash-result-tile > i.fal {
	font-size: 22px;
	margin-bottom: 2px;
}
.dash-result-num {
	font-size: 22px;
	font-weight: 700;
	color: var(--ios-label);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.4px;
	line-height: 1.1;
}
.dash-result-num .dash-result-of {
	font-size: 13px;
	font-weight: 500;
	color: var(--ios-label-3);
	letter-spacing: 0;
}
.dash-result-lbl {
	font-size: 11px;
	color: var(--ios-label-3);
	letter-spacing: -0.05px;
	line-height: 1.2;
}

/* Density-tweaks */
#ScrollDashboard.dash-density-compact .dash-result-tile  { padding: 10px 6px 8px; }
#ScrollDashboard.dash-density-compact .dash-result-num   { font-size: 19px; }
#ScrollDashboard.dash-density-spacious .dash-result-tile { padding: 18px 10px 14px; }
#ScrollDashboard.dash-density-spacious .dash-result-num  { font-size: 26px; }

/* ============================================================
   NUCLEAR override: LearnModule-bubbel (.ChatMsgLM) MOET edge-to-edge
   met grijze header-bar aan de bovenkant. Hogere specificity (type+2class)
   dan andere ChatMsg-regels zodat dit altijd wint, ook als een base-rule
   later in CSS staat of als :has(.ChatRichText) niet matcht.
   ============================================================ */
div.ChatMsg.ChatMsgLM {
	padding: 0 !important;
	max-width: 92% !important;
	overflow: hidden !important;
	background: #fff !important;
	border-radius: 18px !important;
	box-shadow: 0 0 0 0.5px var(--ios-sep) !important;
	color: var(--ios-label) !important;
}
div.ChatMsg.ChatMsgLM > .ChatMsgText {
	padding: 0 !important;
	overflow: visible !important;
	min-width: 0 !important;
}
div.ChatMsg.ChatMsgLM .ChatLessonHead {
	margin: 0 !important;
	padding: 10px 14px !important;
	background: var(--ios-bg-grouped) !important;
	color: var(--ios-label) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-bottom: 0.5px solid var(--ios-sep) !important;
	border-radius: 0 !important;
	letter-spacing: -0.1px !important;
	display: block !important;
}
div.ChatMsg.ChatMsgLM .ChatMsgTime {
	padding: 6px 14px 10px !important;
	margin: 0 !important;
}
div.ChatMsg.ChatMsgLM .ChatRichText {
	padding: 12px 14px !important;
}

/* ============================================================
   FLOATING PILL FOOTER — Hockey.nl / modern iOS app stijl.
   Footer = fixed bottom, transparent. Binnen-bar (#FooterButtonBar
   of #FooterChatInput) is een rounded pill met shadow, floating
   boven de safe-area. Active footeritem krijgt groen pill achter
   het icoon (.HighLighted).
   ============================================================ */
#Footer {
	position: fixed !important;
	bottom: 0 !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 100% !important;
	max-width: 420px !important;
	height: auto !important;
	background: transparent !important;
	padding: 0 12px max(20px, calc(env(safe-area-inset-bottom) + 8px)) !important;
	z-index: 50;
	pointer-events: none;            /* alleen de pill-bar zelf tap-baar */
	transition: padding-bottom 0.15s ease-out;
}
#Footer > * { pointer-events: auto; }
/* Keyboard open: home-indicator-zone niet nodig — pill strak op keyboard */
#Footer.keyboard-up {
	padding-bottom: 6px !important;
}

/* De pill — frosted-glass (Apple Podcasts / iOS-style): semi-transparante
   wit + backdrop saturate+blur. Content erachter blijft subtiel zichtbaar
   maar wazig. Border 0.5px voor crisp edge tegen de blur. */
#FooterButtonBar,
#FooterChatInput {
	background: rgba(255, 255, 255, 0.72) !important;
	-webkit-backdrop-filter: saturate(180%) blur(24px) !important;
	backdrop-filter: saturate(180%) blur(24px) !important;
	border-radius: 26px !important;
	border-top: none !important;
	border: 0.5px solid rgba(255, 255, 255, 0.6) !important;
	box-shadow:
		0 6px 20px rgba(0, 0, 0, 0.10),
		0 1px 4px rgba(0, 0, 0, 0.06) !important;
	padding: 6px 8px !important;
	min-height: 52px !important;       /* gelijk voor button-bar én chat-input */
	height: auto !important;
}

/* Footeritem: icoon + label vertikaal gestapeld, gecentreerd */
#FooterButtonBar .footeritem {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding: 2px 4px !important;
	color: var(--ios-label-3) !important;
	transition: color 0.15s;
	border-radius: 14px;
	cursor: pointer;
}
/* Icon: laat FA→SVG mapping (lijn 1943-1956: bg=currentColor + mask) zijn werk
   doen — alleen font-size + kleur tweaken, GEEN bg of dimensies overschrijven. */
#FooterButtonBar .footeritem i {
	font-size: 18px !important;
	color: var(--ios-label-3) !important;
	transition: color 0.15s;
}
#FooterButtonBar .footeritem > div:not(.TotalUnseen) {
	font-size: 10px !important;
	line-height: 1.1;
	font-weight: 500;
}

/* Active state — groene pill achter ICOON + LABEL via pseudo (zodat we
   de icon-bg-mask niet kapot maken). Pseudo dekt het hele item-content
   (icon + caption) zodat label óók in de groene pill zit. */
#FooterButtonBar .footeritem {
	position: relative;
}
/* Active state — WhatsApp-stijl: grijs/zwart-transparante pill ALLEEN
   achter het icoon, niet achter het label. Icoon en label blijven in
   default-kleur (geen groen tint). */
#FooterButtonBar .footeritem.HighLighted {
	color: var(--ios-label) !important;
}
#FooterButtonBar .footeritem.HighLighted::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 6px;
	right: 6px;
	border-radius: 14px;
	background: rgba(60, 60, 67, 0.18);    /* iOS systemFill, donker-transparant */
	z-index: 0;
	pointer-events: none;
}
#FooterButtonBar .footeritem.HighLighted i {
	color: var(--ios-label) !important;
	position: relative;
	z-index: 1;
}
#FooterButtonBar .footeritem.HighLighted > div:not(.TotalUnseen) {
	position: relative;
	z-index: 1;
	color: var(--ios-label) !important;
}

/* Chat-input pill — input field zit binnen pill, zelfde hoogte als
   #FooterButtonBar (52px min, padding 6 8). GEEN `display: flex
   !important` — dat blokkeert ShowPanel's inline `display:none`. */
#FooterChatInput {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Container vult viewport — content scrollt ONDER de frosted-glass Footer
   door zodat het blur-effect zichtbaar is. Scroll-areas krijgen extra
   bottom-padding zodat de laatste items nog boven de pill zichtbaar zijn. */
#HealfieContainer {
	height: 100% !important;
}
.ScrollWindow {
	padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
}

/* ============================================================
   Mijn tools — app-bibliotheek (grid + edit-mode + modal)
   Rustige iOS-stijl, consistent met SettingsCard.
   ============================================================ */

/* Edit-icon in #HeaderGeneric .IconRight — alleen zichtbaar op tools-detail.
   body.settings-no-plus verbergt de hele .IconRight op settings-views — moet
   die parent dus weer zichtbaar maken op tools, plus de PlusSign-child verbergen. */
#HeaderGeneric .IconEditTools { display: none; }
body.detail-tools #HeaderGeneric .IconRight {
	display: flex !important;
}
body.detail-tools #HeaderGeneric .PlusSign { display: none !important; }
body.detail-tools #HeaderGeneric .IconEditTools {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: var(--ios-accent) !important;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	padding: 4px 10px;
	line-height: 1;
}
/* Toggle "Wijzig" ↔ "Opslaan" via body class */
.IconEditTools .ToolsEditText--on { display: none; }
body.tools-edit-on .IconEditTools .ToolsEditText--off { display: none; }
body.tools-edit-on .IconEditTools .ToolsEditText--on  { display: inline; font-weight: 600; }

.ToolsGrid { padding: 0 8px 24px; }
.ToolsEmpty {
	padding: 32px 16px;
	text-align: center;
	color: var(--ios-label-3);
	font-size: 14px;
}

.ToolsCategory { margin-bottom: 18px; }
.ToolsCategoryHead {
	font-size: 13px;
	font-weight: 600;
	color: var(--ios-label-3);
	padding: 6px 12px 8px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
/* Edit-mode: header wordt input + delete-btn rij */
.ToolsCategoryHead--edit {
	display: flex !important;
	align-items: center;
	gap: 8px;
	text-transform: none !important;
	padding: 4px 8px 8px !important;
	letter-spacing: 0 !important;
}
.ToolsCategoryName {
	flex: 1;
	border: none;
	background: rgba(60,60,67,0.08);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ios-label);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-family: inherit;
}
.ToolsCategoryName:focus {
	outline: none;
	background: rgba(60,60,67,0.14);
	text-transform: none;
	letter-spacing: 0;
}
.ToolsCategoryDelete {
	width: 28px; height: 28px;
	border: none;
	background: transparent;
	color: var(--ios-red, #FF3B30);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.ToolsCategoryDelete i { font-size: 20px; }
.ToolsCategoryDelete:active i { opacity: 0.5; }

/* Up/down pijlen voor categorie-volgorde in edit-mode */
.ToolsCategoryMove {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.ToolsCategoryMoveBtn {
	width: 22px; height: 14px;
	border: none;
	background: rgba(60,60,67,0.10);
	color: var(--ios-label-3);
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.ToolsCategoryMoveBtn:active:not([disabled]) {
	background: rgba(60,60,67,0.20);
}
.ToolsCategoryMoveBtn[disabled] {
	opacity: 0.3;
	cursor: default;
}
.ToolsCategoryMoveBtn i { font-size: 10px; }

/* "+ Nieuwe categorie" knop onderaan in edit-mode */
.ToolsCategoryAddNew {
	margin: 8px 12px 18px;
	padding: 12px;
	border: 1.5px dashed var(--ios-accent);
	border-radius: 12px;
	color: var(--ios-accent);
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	background: rgba(0,175,102,0.06);
}
.ToolsCategoryAddNew:active { background: rgba(0,175,102,0.14); }
.ToolsCategoryAddNew i { margin-right: 6px; }
.ToolsCategoryGrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	padding: 0 2px;
}

.ToolsTile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 0 6px;
	border-radius: 14px;
	background: transparent;
	cursor: pointer;
	position: relative;
	transition: background 0.15s, transform 0.1s;
	-webkit-tap-highlight-color: rgba(0,0,0,0.04);
}
.ToolsTile:active { transform: scale(0.94); background: rgba(0,0,0,0.04); }

.ToolsTileIcon {
	width: 66px; height: 66px;        /* iOS-home-icoon formaat */
	border-radius: 15px;              /* ~22% radius — iOS standaard */
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.06);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.ToolsTileIcon img {
	width: 100%; height: 100%;
	object-fit: cover;                /* favicon vult tile, geen padding-rondje */
}
.ToolsTileIcon i {
	font-size: 36px;
	color: var(--ios-accent);
}
.ToolsTileLabel {
	font-size: 12px;
	color: var(--ios-label);
	text-align: center;
	line-height: 1.2;
	letter-spacing: -0.1px;
	width: 100%;
	max-width: 110px;
	padding: 0 2px;
	box-sizing: border-box;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

/* --- Edit-mode: wiebel-animatie iOS-stijl --- */
@keyframes ToolsTileWiggle {
	0%, 100% { transform: rotate(-1.2deg); }
	50%      { transform: rotate(1.2deg); }
}
.ToolsGrid--edit .ToolsTile:not(.ToolsTileAdd) {
	animation: ToolsTileWiggle 0.18s ease-in-out infinite;
	animation-delay: calc(var(--wiggle-offset, 0) * 0.04s);
}
/* Alterneer offset per tegel zodat ze niet synchroon wiebelen */
.ToolsGrid--edit .ToolsTile:nth-child(2n) { animation-direction: reverse; }
.ToolsGrid--edit .ToolsTile:nth-child(3n) { animation-duration: 0.20s; }

.ToolsTileDelete {
	position: absolute;
	top: -4px; left: -4px;
	width: 22px; height: 22px;
	border-radius: 11px;
	background: var(--ios-red, #FF3B30);
	color: #fff;
	border: 2px solid #fff;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	z-index: 2;
	padding: 0;
}
.ToolsTileDelete i { font-size: 12px; color: #fff; }

.ToolsTileAdd .ToolsTileIcon {
	background: rgba(0,175,102,0.10);
	box-shadow: none;
	border: 1.5px dashed var(--ios-accent);
}
.ToolsTileAdd .ToolsTileIcon i { color: var(--ios-accent); font-size: 24px; }

/* ============================================================
   ToolEditSheet — modal voor tool toevoegen/wijzigen
   ============================================================ */
.ToolEditSheet {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.ToolSheetBackdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.ToolSheetCard {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--ios-bg, #fff);
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	animation: ToolSheetSlideUp 0.22s ease-out;
}
@keyframes ToolSheetSlideUp {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}
.ToolSheetHandle {
	width: 36px; height: 4px;
	background: var(--ios-placeholder, #C7C7CC);
	border-radius: 2px;
	margin: 8px auto 0;
	opacity: 0.5;
}
.ToolSheetHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px 6px;
	border-bottom: 0.5px solid var(--ios-sep);
}
.ToolSheetTitle {
	font-size: 16px;
	font-weight: 600;
	color: var(--ios-label);
	flex: 1;
	text-align: center;
}
.ToolSheetClose, .ToolSheetSave {
	background: transparent;
	border: none;
	color: var(--ios-accent);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	padding: 6px 8px;
	min-width: 60px;
}
.ToolSheetClose { color: var(--ios-label-3); font-size: 18px; text-align: left; }
.ToolSheetSave { font-weight: 600; text-align: right; }
.ToolSheetBody {
	padding: 14px 16px max(24px, env(safe-area-inset-bottom));
	overflow-y: auto;
	flex: 1;
}

.ToolField {
	display: block;
	margin-bottom: 14px;
	font-size: 13px;
	color: var(--ios-label-3);
}
.ToolField > span {
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
}
.ToolFieldHint {
	font-weight: 400;
	color: var(--ios-label-4);
	font-size: 12px;
}
.ToolField input[type="text"],
.ToolField input[type="url"],
.ToolField select {
	width: 100%;
	border: 1px solid var(--ios-sep);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 15px;
	color: var(--ios-label);
	background: #fff;
	box-sizing: border-box;
	font-family: var(--ios-font);
}
.ToolField input[type="text"]:focus,
.ToolField input[type="url"]:focus,
.ToolField select:focus {
	border-color: var(--ios-accent);
	outline: none;
}

.ToolIconRow {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ToolIconPreview {
	width: 44px; height: 44px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.10);
	object-fit: contain;
	padding: 6px;
}

.ToolError {
	color: var(--ios-red, #FF3B30);
	background: rgba(255,59,48,0.08);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	margin-top: 8px;
}
.ToolStatus {
	color: var(--ios-label-3);
	font-size: 13px;
	text-align: center;
	margin-top: 8px;
}

/* ============================================================
   Optimistic-send: eigen-bubble met pending-clok + typing-pill
   ("AIsistent is aan het typen...") tijdens wachten op bot.
   ============================================================ */
.ChatMsg.ChatMsgPending {
	opacity: 0.65;
}
.ChatMsg.ChatMsgPending .ChatMsgTime i {
	margin-left: 4px;
	opacity: 0.7;
	font-size: 10px;
}
.ChatTyping {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	margin: 6px 10px 6px auto;
	background: rgba(60, 60, 67, 0.10);
	border-radius: 14px;
	font-size: 13px;
	color: var(--ios-label-3);
	clear: both;
	float: left;
	max-width: 80%;
}
.ChatTypingDots {
	display: inline-flex;
	gap: 3px;
	margin-left: 6px;
}
.ChatTypingDots i {
	width: 5px; height: 5px;
	background: var(--ios-label-3);
	border-radius: 50%;
	animation: ChatTypingDot 1.2s infinite ease-in-out;
}
.ChatTypingDots i:nth-child(2) { animation-delay: 0.15s; }
.ChatTypingDots i:nth-child(3) { animation-delay: 0.30s; }
@keyframes ChatTypingDot {
	0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
	30%           { opacity: 1;   transform: translateY(-2px); }
}