/*--------------------------------------------
 * IM CSS

 	Block 0: Variables
 	Block 1: Main window
	Block B: SVG icons

 	Block C: Contacts
 	Block H: Chats
 	Block M: Messages HTML

 	Block F: Search / Filter
	Block I: Message input / File uploads
 	Block N: Menu
 	Block P: Photo Viewer
 	Block T: Automated actions
 	Block Q: Emojis

 	Block Z: Responsive

--------------------------------------------*/

@font-face {
	font-family: 'Open Sans';
	src: local('Open Sans'), local('OpenSans'),
		url('font/Open Sans.woff2') format('woff2'),
		url('font/Open Sans.woff') format('woff');
	font-display: swap;
}

/*--------------------------------
 	Block 0: Variables
-------------------------------*/
/* Variables */
html {

	--im-margin:		10px;		/* Consistent troughout application */
	--im-padding:		10px;
	--im-border-radius:	8px;

	--im-bg:		#fff;
	--im-fg:		#222;

	--im-bg-active:		#eee;
	--im-border-color:	#ccc;

	--im-iconcolor:		#999;
	--im-iconhovercolor:	#f80;

	--im-msg-r-bg:		#fff;
	--im-msg-r-time:	#666;
	--im-msg-s-fg:		#000;
	--im-msg-s-bg:		#efefef;	/* lightgreen #effdde orange #f7c174 */
	--im-msg-s-time:	#333;

	--im-indicatorcolor:	#21c063;
	--im-grey:		#666;

	--im-checkcolor:	#21c063;	/* green #21c063 #5fc331 blue #027cfc */

	--im-replycolor:	#c4532d;

	height: 100%;

}


[data-theme="dark"] {
	--im-bg:		#222;
	--im-fg:		#eee;

	--im-bg-active:		#333;
	--im-border-color:	#444;
	--im-iconcolor:		#999;
	--im-iconhovercolor:	#eee;

	--im-msg-r-bg:		#333;
	--im-msg-r-time:	#999;
	--im-msg-s-fg:		#000;
	--im-msg-s-bg:		#fa0;	/* green #144d34 orange #b36804 */
	--im-msg-s-time:	#333;

	
	--im-checkcolor:	#027cfc;	/* green #21c063 #5fc331 blue #027cfc */
}

/*--------------------------------
 	Block 1: Main window
-------------------------------*/

/* Loaded in HTML */
html, body#im {
	display: flex; margin: 0; padding: 0; height: 100%; max-height: 100dvh; height: 100%; overflow: hidden;
	font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 1em;
	color: var(--im-fg); background: var(--im-bg);
}

/* Prevent iOS bounce/scroll */
body					{ position: fixed; width: 100%; overscroll-behavior: none; }

/* Loaded in AJAX div */
div#im {
	display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000;
	color: var(--im-fg); background: var(--im-bg);
}

/* Left pane */
#im-l {
	width: 38%; max-width: 500px; /* golden ratio */
	display: flex; flex-direction: column;
	border-width: 0 1px 0 0; border-style: solid; border-color: var(--im-border-color);
}
#im-l-h					{ display: flex; font-weight: bold; }
#im-l-h > div:first-child		{ flex-grow: 2; }

/* Contacts */
#im-l-b					{ flex-grow: 2; overflow-y: auto; max-height: calc(100% - 50px); position: relative; /* make SVG icon also scroll */ }

/* Right pane: dvh = dynamic viewport height */
#im-r					{ height: 100dvh; flex-grow: 2; display: flex; flex-direction: column; background: var(--msg-bg-image); background-size: cover; }
#im-r-h	{
	max-height: 50px; display: flex; gap: var(--im-margin); align-items: center; padding: var(--im-padding);
	font-weight: bold;
	background: var(--im-bg);
	border-width: 0 0 1px 0; border-style: solid; border-color: var(--im-border-color);
	box-shadow: 0px 0px 2px 0px rgba(165, 165, 165, 0.7);
}
[data-theme="dark"] #im-r-h		{ box-shadow: 0px 0px 2px 0px rgba(165, 165, 165, 0.3); }

/* Back to contact list icon */
#im-r-h > div:first-child		{ display: none; }

/* Contact name preview */
#im-r-h > div:nth-child(2)		{ flex-grow: 2; }
#im-r-h > div:nth-child(2) > span:last-child { margin-left: var(--im-margin); vertical-align: top; display: inline-block; }

/* Right icons */
#im-r-h > div:last-child		{  }

#im-r-b					{ flex-grow: 2; overflow-y: auto; min-height: 0; overflow-anchor: auto; }

/* Right pane for settings, automated actions, etc */
#im-r-b > div#im-r-b-pane		{ height: 100%; margin: 0; padding: var(--im-padding); background: var(--im-bg); }

#im-r-f					{ background: var(--im-bg); min-height: 60px; display: flex; align-items: center; }


#im-disconnect-msg {
	position: fixed; top: 0; left: 0; right: 0; padding: 12px 20px;
	background: var(--im-msg-s-bg); color: var(--im-msg-s-fg);
	text-align: center; z-index: 99999; font-weight: bold; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#im-disconnect-msg a			{ margin-left: 10px; color: #fff; text-decoration: underline; cursor: pointer; }

/*--------------------------------
	Block B: SVG icons
-------------------------------*/

#im-l-h svg,
#im-l-f svg,
#im-r-h button svg,
#im-answers svg,				
#im-r-f svg,
#im-r > blockquote svg,
#im-r >	#udiv svg,
#down-arrow svg				{ width: 32px; height: 32px; padding: var(--im-padding); fill: var(--im-iconcolor); cursor: pointer; outline: none; }
#im-l-h svg path,
#im-r-h button svg path,
#im-answers svg path,
#im-r-f svg path,
#im-r > blockquote svg path,
#im-r > #udiv svg path,
#down-arrow svg path			{ fill: var(--im-iconcolor); }
#im-l-h svg:hover,
#im-l-h svg:hover path,
#im-r-h button svg:hover,
#im-r-h button svg:hover path,
#im-answers svg:hover,
#im-answers svg:hover path,
#im-r-f svg:hover,
#im-r-f svg:hover path,
#im-r > blockquote svg:hover,
#im-r > blockquote svg:hover path,
#im-r > #udiv svg:hover,
#im-r > #udiv svg:hover path,
#down-arrow svg:hover path		{ fill: var(--im-iconhovercolor); }

#im-r-f label > svg			{ padding: 2px; } /* bugfix: svg size within label */

/* Undo button styles if AJAX loaded */
#im-l-h button,
#im-l-f button,
#im-r-h button,
#im-r-f button,
.search-wrapper button,
#im-answers button			{ min-width: auto; min-height: auto; margin: 0; padding: 0; border: none; line-height: normal; background: none; outline: none; }

/* Add contact button */
#im-l-f					{ text-align: right; }
#im-l-f button				{ width: 60px; height: 60px; background: #fa0; border-radius: var(--im-border-radius); position: absolute; bottom: 40px; margin-left: -86px; }
#im-l-f button:hover			{ background: #fb0; }
#im-l-f svg,
#im-l-f svg path			{ fill: var(--im-bg); }
/*#im-l-f svg:hover,
#im-l-f svg:hover path			{ fill: var(--im-fg); }*/

/* Loader / Typing indicator */
#im-r-b #im-loader			{ margin: 0 0 0 -15px; padding: 0; } /* move a bit to left for effect */
#im-loader svg,
#im-loader svg path			{ fill: #f90; width: 80px; height: 30px; }

/*--------------------------------
 	Block C: Contacts
-------------------------------*/

/* Contact div (#im-l-b > div) */
.cdiv {
	height: 70px; margin: var(--im-margin);
	display: flex; gap: 0;
	border-radius: var(--im-border-radius);
	transition: background 0.25s ease; cursor: pointer;
}
.cdiv:hover,
.cdiv.active				{ background: var(--im-bg-active); }
.cdiv span				{ display: block; white-space: nowrap; }
.cdiv > div				{ padding: var(--im-padding); }

/* Contact Thumbnail or FIrstletters container */
.cdiv > div:first-child			{ padding: 5px 10px 5px 5px; width: 60px; height: 60px; }

/* Contact Thumbnail */
.cdiv div:first-child > img,
#im-r-h > div:nth-child(2) > img	{ width: 60px; height: 60px; border-radius: var(--im-border-radius); }

/* Contact FIrst letters */
.cdiv div:first-child > span,
#im-r-h > div:nth-child(2) > span:first-child {
	display: inline-block; width: 60px; height: 60px; line-height: 60px;
	font-family: monospace; font-size: 25px; font-weight: bold; text-align: center;
	color: var(--im-msg-s-fg); background: var(--im-msg-s-bg);
	border-radius: var(--im-border-radius);
}
#im-r-h > div:nth-child(2) > img	{ padding-top: 2px; } /* add small space above thumbnail icon in messages pane */
#im-r-h > div:nth-child(2) > span	{ cursor: pointer; }

/* Source icon + Contact name + last message preview */
#im-r-h > div:nth-child(2) > span > svg,
.cdiv > div:nth-child(2) > span > svg	{ width: 16px; height: 16px; margin-right: 5px; vertical-align: middle; }

.cdiv > div:nth-child(2)		{ flex-grow: 2; max-width: calc(100% - 156px); }
.cdiv > div:nth-child(2) span		{ display: block; }
.cdiv > div:nth-child(2) > span:first-child{ font-weight: bold; text-overflow: ellipsis; overflow: hidden; }

/* Last message preview, typing indicator */
.cdiv > div:nth-child(2) > span:last-child			{ color: var(--im-grey); text-overflow: ellipsis; overflow: hidden; }
.cdiv > div:nth-child(2) > span:last-child > span.typing	{ color: var(--im-indicatorcolor); }
.cdiv > div:nth-child(2) > span:last-child > strong.draft	{ color: var(--im-checkcolor); }

/* V SVG icon, Time, new message indicator */
.cdiv > div:last-child			{ width: 40px; }

/* SVG icons, min 44px for touch */
.cdiv > div:last-child > svg {
	position: absolute; margin: 10px 0 0 12px;
	width: 24px; height: 24px; padding: var(--im-padding);
	fill: var(--im-iconcolor); cursor: pointer; outline: none; opacity: 0;
}

.cdiv > div:last-child:hover > svg	{ opacity: 1; }
.cdiv > div:last-child:hover > svg,
.cdiv > div:last-child:hover > svg path	{ fill: var(--im-iconhovercolor); }

/* Time */
.cdiv > div:last-child > span:nth-child(2)	{ font-size: 0.9rem; color: var(--im-grey); }

/* New message indicator */
.cdiv > div:last-child > span:last-child {
	display: inline-block; width: 20px; height: 20px; line-height: 20px;
	font-size: 0.9rem; font-weight: bold; text-align: center;
	color: #333; border-radius: 50%;
}

.cdiv > div:last-child > span:last-child.active	{ background: var(--im-indicatorcolor); }

#im-r-b #contactinfo > img		{ border-radius: var(--im-border-radius); }

/* Contact suggestions */
#im-r-b .cdiv				{ display: inline-flex; width: 320px; }
#im-r-b .cdiv > div:last-child		{ display: none; }

/* Contact source colors */
.cdiv div:first-child > span.webshop,
#im-r-h > div:nth-child(2) > span:first-child.webshop { background: #f80; }
.cdiv div:first-child > span.customer,
#im-r-h > div:nth-child(2) > span:first-child.customer { background: #c2f071; }
.cdiv div:first-child > span.simplex,
#im-r-h > div:nth-child(2) > span:first-child.simplex { background: #07b4b9; }
.cdiv div:first-child > span.whatsapp,
#im-r-h > div:nth-child(2) > span:first-child.whatsapp { background: #83F292; }
/*--------------------------------
 	Block H: Chats
-------------------------------*/

/* Flag spans (words or shor texs highlighted in bubbles) */
.flagspans > span,
.flagspans > a,
.flagspan {
	display: inline-block; margin-bottom: 12px; padding: 6px 8px;
	border-radius: 6px; font-weight: bold; background: #5fc331; color: #eee;
	text-decoration: none;
}

.flagspans > span:not(:last-of-type)		{ margin-right: 12px; }
.flagspans span:nth-of-type(1)			{ background: #5fc331; }
.flagspans span:nth-of-type(2)			{ background: #FAA300; }
.flagspans span:nth-of-type(3)			{ background: #E57C04; }
.flagspans span:nth-of-type(4)			{ background: #FF6201; }
.flagspans span:nth-of-type(5)			{ background: #F63E02; }
.flagspans span.grey				{ background: #ddd; color: #000; }

/* Buttons */
a.button,
input.button,
button.button,
.iconbuttons button,
.leftbuttons button,
.colorbuttons button {
	min-width: auto; /* Smaller buttons to conserve space */
	display: inline-block; margin: 0 0 10px 0; padding: 0 12px;
	min-height: 44px; cursor: pointer; /* WCAG touch target size */ 
	line-height: 44px; border: 0; border-radius: var(--im-border-radius);
	font-family: Open Sans, Helvetica, Arial, sans-serif; font-weight: bold; font-size: 1rem;
	white-space: nowrap; text-decoration: none; text-align: center;
	color: #fff; background: #f80;
	background: linear-gradient(135deg, #ff8800, #ff9f1a);
	transition: background 0.25s ease;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
}

a.button:hover,
input.button:hover,
button.button:hover,
.iconbuttons button:hover,
.leftbuttons button:hover {
	background: #f90; text-decoration: none;
	background: linear-gradient(135deg, #ff9f1a, #ffb347);
	text-decoration: none;
}

.button.green,
button.green				{ background: linear-gradient(135deg, #2ea44f, #3bb563); }
.button.green:hover,
button.green:hover			{ background: linear-gradient(135deg, #3bb563, #4cc474); }

input.button.red,
button.red				{ background: linear-gradient(135deg, #ed333b, #f15158); }
input.button.red:hover,
button.red:hover			{ background: linear-gradient(135deg, #f15158, #f56e74); }

input.button.lightblue,
button.lightblue			{ background: linear-gradient(135deg, #2188c9, #339bd6); }
input.button.lightblue:hover,
button.lightblue:hover			{ background: linear-gradient(135deg, #339bd6, #45ade3); }

.colorbuttons button:nth-of-type(1)	{ background: #ff6201; }
.colorbuttons button:nth-of-type(2)	{ background: #FAA300; }
.colorbuttons button:nth-of-type(3)	{ background: #485696; }
.colorbuttons button:nth-of-type(4)	{ background: #d741a7; }
.colorbuttons button:nth-of-type(5)	{ background: #F63E02; }
.colorbuttons button:nth-of-type(6)	{ background: #5fc331; }
.colorbuttons button:nth-of-type(7)	{ background: #06c; }

.colorbuttons button:hover		{ filter: brightness(1.2); }

.leftbuttons				{ display: inline-block; } /* no whitespace below for date */
.leftbuttons a:not(:last-child),
.leftbuttons button,
.colorbuttons button			{ margin-right: calc(var(--im-margin) * 1); margin-bottom: calc(var(--im-margin) * 1); }

.iconbuttons				{ display: flex; gap: var(--im-margin); }
.iconbuttons button			{ display: inline-flex; align-items: center; gap: var(--im-margin); }
.iconbuttons button svg			{ width: 26px; height: 26px; }
.iconbuttons button span		{ flex-grow: 2; }

/* Order status colors */
.ms .flagspans a.s_orderreceived,
.ms .flagspans a.s_waitingforpayment	{ color: #000; background: #ddd; }
.ms .flagspans a.s_paymentreceived	{ color: #000; background: rgba(102, 255, 102, 1); }	/* #c9f */
.ms .flagspans a.s_processing		{ color: #000; background: rgba(255, 238, 102, 1); }	/* #fe6 */
.ms .flagspans a.s_productssent		{ color: #000; background: rgba(255, 153, 0, 1); }	/* #f90 */
.ms .flagspans a.s_complete		{ color: #000; background: rgba(153, 204, 255, 1); }	/* #9cf */
.ms .flagspans a.s_cancelled		{ color: #000; background: rgba(255, 99, 71, 0.9); }	/* #ff6347 */

/* Text that goes before message (e.g. "Automated message") */
.prenote {
	margin-right: var(--im-margin); padding: 0 var(--im-padding);
	font-size: 0.9em; line-height: 1em; font-weight: bold;
	background: #fc0; color: #222; border-radius: 6px;
}
[data-theme="dark"] .prenote		{ background: #f60; color: #eee; }

.prenote.green				{ background: linear-gradient(135deg, #2ea44f, #3bb563); }
.prenote.red				{ background: linear-gradient(135deg, #f15158, #f56e74); }

/* EasyWebshop text */
.ewtxt span				{ color: #f60; }	/* text: easy */
.ewtxt					{ color: #444; }	/* text: webshop */
[data-theme="dark"] .ewtxt		{ color: #ddd; }

.qrcode					{ width: 256px; height: 256px; background: #fff; margin: calc(var(--im-margin) * 2) 0; padding: calc(var(--im-padding) * 2); }

/* Tables */
.listtable				{ border-collapse: collapse; }
.listtable tr				{ border-width: 0 0 1px 0; border-style: solid; border-color: var(--im-border-color); }
.listtable tr:last-child		{ border: none; }
.listtable th				{ text-align: left; }
.listtable td				{ padding: var(--im-padding); }
.listtable td:first-child		{ padding-left: 0; }
.listtable td:last-child		{ padding-right: 0; }

#down-arrow {
	display: none; position: fixed; bottom: 12vh; right: calc(var(--im-margin) * 2); z-index: 102;
}

#contact-blocked-msg			{ background: var(--im-bg); min-height: 60px; padding: var(--im-padding); padding-bottom: 0; text-align: center; }

/*--------------------------------
 	Block M: Messages HTML
-------------------------------*/

/* messagesDivs per contact, only 1 should be active at a time */
#im-r-b > div				{ display: none; margin: var(--im-margin) 3%; padding: var(--im-padding) 0; } /* by default, chat is hidden */
#im-r-b > div.active			{ display: block; }

/* Date header */
#im-r-b > div > div.date		{ margin: var(--im-margin) 0; text-align: center; font-weight: bold; font-size: 0.8em; }
#im-r-b > div > div.date > span	{
	padding: var(--im-padding);
	background: var(--im-bg-active);
	border-radius: var(--im-border-radius); border: 1px solid var(--im-border-color);
}

/* message div inside mdivcont, #im-r-b > div > div or .mdiv */
.mdiv					{ display: flex; }

/* SVG icons, min 44px for touch */
.mdiv > div:first-child > div:first-child svg,
.mdiv > div:last-child svg		{ width: 24px; height: 24px; padding: var(--im-padding); fill: var(--im-iconcolor); cursor: pointer; outline: none; }
.mdiv > div:first-child > div:first-child svg:hover,
.mdiv > div:first-child > div:first-child svg:hover path,
.mdiv > div:last-child svg:hover,
.mdiv > div:last-child svg:hover path	{ fill: var(--im-iconhovercolor); }

/* mdivL */
.mdiv > div:first-child {
	display: block; width: fit-content; max-width: 800px;
	margin: var(--im-margin) 0; padding: var(--im-padding);
	border-radius: var(--im-border-radius);
}

/* mdiv header: move svg icon to the top right */
.mdiv > div:first-child > div:first-child	{ height: 0; margin: -10px 0 10px 0; text-align: right; }
.mdiv > div:first-child > div:first-child > svg {
	margin: 0; padding: var(--im-padding) 0 var(--im-padding) calc(25% - 24px); opacity: 0;
	text-align: right; border-radius: var(--im-border-radius);
}
.mdiv > div:first-child > div:first-child > svg:hover { opacity: 1; }

/* reply */
.mdiv blockquote {
	margin: 0; padding: calc(var(--im-padding) / 2);
	border-width: 0 0 0 3px; border-style: solid; border-color: var(--im-replycolor); border-radius: calc(var(--im-border-radius) / 2);
	background: rgba(0, 0, 0, 0.1);
}
.mdiv blockquote > span:first-child 	{ display: block; color: var(--im-replycolor); }

/* message */
.mdiv p					{ margin: 0; padding: 0; } /* all messages */
.mdiv span.images			{ display: block; margin-top: var(--im-margin); }
.mdiv span.images img			{ border-radius: var(--im-border-radius); margin: var(--im-margin) var(--im-margin) 0 0; }

/* big emojis in message */
.mdiv .emoji-single			{ font-size: 3rem; }
.mdiv .emoji-double			{ font-size: 2.5rem; }
.mdiv .emoji-triple			{ font-size: 2rem; }

/* mpActions */
.mdiv p > span:last-child		{ float: right; margin: 6px -4px -4px 6px; }

/* time */
.mdiv p > span:last-child > time	{ font-size: 0.9rem; color: var(--im-msg-r-time); }

/* received and sent message */
.mdiv > div:first-child			{ border: 1px solid var(--im-border-color); overflow-wrap: anywhere; }

/* HTML Markdown in MessageSpan */
.ms a:not(.button)			{ color: #f60; text-decoration: none; }
.ms a:not(.button):hover		{ text-decoration: underline; }
.ms ul					{ list-style-image: url(/img/template/bullet-grey.png); }
.ms h1					{ margin: 0; padding: var(--im-padding) 0; font-size: 1.1em; font-weight: bold; }

/* received message */
.mdiv.r > div:first-child		{ background: var(--im-msg-r-bg); /*box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.4);*/ }

/* sent message */
.mdiv.s					{ flex-direction: row-reverse; }
.mdiv.s > div:first-child		{ color: var(--im-msg-s-fg); background: var(--im-msg-s-bg); }
[data-theme="dark"] .mdiv.s > div:first-child { /*box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);*/ border: none; }
.mdiv.s p > span:last-child > time 	{ color: var(--im-msg-s-time); }

/* message status (sent message only) */
.mdiv.s p > span:last-child > svg	{ width: 24px; height: 24px; padding: 0; vertical-align: bottom; fill: var(--im-iconcolor); }
.mdiv.s p > span:last-child > svg.active,
.mdiv.s p > span:last-child > svg.active path { fill: var(--im-checkcolor); }

.mdiv .reaction				{ margin-left: calc(var(--im-margin) / 2); }

/* mdivR */
.mdiv > div:last-child			{ flex-grow: 1; opacity: 0; display: flex; align-items: center; }
.mdiv.s > div:last-child		{ justify-content: flex-end; }
.mdiv > div:last-child:hover		{ opacity: 1; }

/*--------------------------------
 	Block F: Search / Filter
-------------------------------*/

.search-wrapper				{ position: relative; width: 100%; }
#im-l-h .search-wrapper			{ margin: var(--im-margin); }
#im svg.search-icon {
	position: absolute; left: 6px; margin: 8px 0 0 8px; padding: 0; width: 18px; height: 18px;
	fill: var(--im-iconcolor); pointer-events: none; flex-shrink: 0;
}

.search-input {
	width: 100%; margin: 0; padding: 7px; padding-left: 42px;
	color: var(--im-fg); background: var(--im-bg-active); font-size: 1rem;
	border: none; border-radius: var(--im-border-radius);
}
#im input:focus, #im textarea:focus	{ background: var(--im-bg-active); }

/* Hide the browser's default clear button on search inputs */
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration{ -webkit-appearance: none; appearance: none; }
.search-clear {
	position: absolute; top: 0px; right: 4px; display: none; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	padding: 0; border: none;
	cursor: pointer;
}

#im .search-clear svg			{ width: 16px; height: 16px; padding: var(--im-padding); fill: var(--im-iconcolor); }

/* Show clear button when input has value */
.search-clear.visible			{ display: flex; }

/*--------------------------------
	Block I: Message input
-------------------------------*/

/* Reply example */
#im-r > blockquote,
#im-r > #udiv {
	display: block; margin: 0; padding: var(--im-padding);
	background: var(--im-bg);
	border-width: 1px 0 1px 0; border-style: solid; border-color: var(--im-border-color);
}
#im-r > blockquote > svg,
#udiv > svg				{ padding: 0; float: right; }

/* File upload preview */
#files-preview				{ display: flex; flex-wrap: wrap; gap: var(--im-margin); }
#files-preview > div {
	padding: var(--im-padding);
	background: var(--im-bg-active); border-radius: var(--im-border-radius);
}
#files-preview > div > div		{ height: calc(100% - 1em - var(--im-padding)); } /* placeholder div when there is no image, so text goes to bottom */
#files-preview > div > img		{ display: block; max-height: 100px; border-radius: var(--im-border-radius); }

/* Progress bar */
#progressbar		{ margin: 0 var(--im-margin); padding: 0; }
#progressbar > div	{
	display: inline-block; width: 0; height: 28px; margin: 0;
	text-align: right; font-weight: bold; line-height: 26px; white-space: nowrap;
	color: #333; background: #f90;
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
	background-size: 100px 100px;
	animation: move 2s linear infinite;
	transition: width 0.2s;
	border-radius: var(--im-border-radius);
}

@keyframes move { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; }}

/* Input form */
#im-r-f input[type='file'],
#im-r-f input[type='submit']		{ display: none; }
#im-r-f label				{ max-width: none; width: 32px; height: 32px; padding: var(--im-padding); display: flex; }
#im-r-f textarea {
	flex-grow: 2;
	width: calc(100% - var(--im-margin) - var(--im-padding));
	/*height: calc(100% - var(--im-margin) - var(--im-padding) - var(--im-padding) - var(--im-margin));*/
	margin: var(--im-margin); padding: var(--im-padding); margin-right: 0; padding-right: 0;
	border: 0; border-radius: var(--im-border-radius);
	color: var(--im-fg); background: var(--im-bg-active);
	font-size: 1.1rem;
	resize: none; overflow: hidden;

	line-height: 1.3;
	box-sizing: border-box; height: calc(1.3em + var(--im-padding) + var(--im-padding)); max-height: 12em;
}
#im-r-f textarea:focus			{ outline: none }
#im-r-f textarea.scrollable		{ overflow-y: auto; } /* show scrollbar when content exceeds max */

/*--------------------------------
 	Block N: Menu
-------------------------------*/
#im-menu {
	position: absolute; min-width: 150px; padding: 0; list-style: none;
	background: var(--im-bg); box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.4); border-radius: var(--im-border-radius);
	color: var(--im-iconcolor);
	z-index: 2001;
	white-space: nowrap;
}

#im-menu > li				{ cursor: pointer; display: flex; padding: var(--im-padding); border-radius: var(--im-border-radius) }
#im-menu svg				{ width: 24px; height: 24px;  fill: var(--im-iconcolor); margin-right: var(--im-margin); }
#im-menu span				{ flex-grow: 2; display: block; line-height: 24px; }
#im-menu > li:hover			{ background: var(--im-bg-active); }

/*--------------------------------
 	Block P: Photo Viewer
-------------------------------*/

/* Overlay */
.pv-overlay {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	background: var(--im-bg);
	touch-action: pan-y; user-select: none; -webkit-user-select: none;
}

[data-theme="dark"] .pv-overlay		{ background: #000; }

/* Main image */
.pv-overlay img				{ max-width: 100%; max-height: 100%; object-fit: contain; display: block; transition: opacity 0.2s ease; }
.pv-overlay img.pv-loading		{ opacity: 0; }

/* Close button */
.pv-close {
	position: absolute; top: 12px; right: 12px; z-index: 10002;
	width: 48px; height: 48px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.1);
	border: none; border-radius: 50%; cursor: pointer;
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 0.2s;
}

.pv-close:hover				{ background: rgba(0, 0, 0, 0.25); }
.pv-close svg				{ width: 28px; height: 28px; fill: #222; pointer-events: none; }
[data-theme="dark"] .pv-close svg	{ background: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .pv-close svg	{ fill: #fff; }
[data-theme="dark"] .pv-close:hover	{ background: rgba(255, 255, 255, 0.25); }

/* Arrow buttons */
.pv-arrow {
	position: absolute; top: 0; z-index: 10001;
	width: 20%; min-width: 60px; max-width: 120px; height: 100%;
	display: flex; align-items: center; justify-content: center; padding: 0;
	border: none; cursor: pointer;
	background: transparent; transition: background 0.2s;
}

.pv-arrow:hover				{ background: rgba(255, 255, 255, 0.05); }
.pv-arrow svg {
	width: 40px; height: 40px;
	fill: rgba(255, 255, 255, 0.7);
	pointer-events: none;
	/*filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));*/
	transition: fill 0.2s;
}

.pv-arrow:hover svg			{ fill: #fff; }
.pv-prev				{ left: 0; }
.pv-next				{ right: 0; }

/* Hide arrows on single image */
.pv-arrow.pv-hidden			{ display: none; }

/* Mobile: bigger tap targets */
@media (max-width: 768px) {
	.pv-arrow			{ width: 30%; min-width: 70px; }
	.pv-close			{ width: 52px; height: 52px; top: 10px; right: 10px; }
	.pv-close svg			{ width: 30px; height: 30px; }
}

/* Counter (optional subtle indicator) */
.pv-counter {
	position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.5); font: 14px/1 system-ui, sans-serif;
	z-index: 10001; pointer-events: none;
}

/*--------------------------------
 	Block T: Automated actions
-------------------------------*/

div.info				{ width: 100%; font-size: 1em; margin-bottom: 12px; color: #5fc331; font-weight: bold; }
div.info svg				{ vertical-align: middle; margin-right: 8px; width: 20px; height: 20px; }
div.info span				{ width: 100%; vertical-align: middle; }

#im-answers				{ display: flex; flex-wrap: wrap; gap: var(--im-margin); margin: var(--im-margin) 0; }
#im-answers > div {
	display: inline-flex; align-items: center; gap: var(--im-margin); padding: var(--im-padding);
	background: var(--im-bg-active); border-radius: var(--im-border-radius);
}
#im-answers > div > span {
	display: inline-block; line-height: 32px; padding: 0 var(--im-padding);
	border: 0px solid var(--im-iconcolor); border-radius: var(--im-border-radius);
	cursor: pointer; font-weight: bold; color: var(--im-iconcolor);
}
#im-answers > div > span:hover		{ color: var(--im-iconhovercolor); border-color: var(--im-iconhovercolor); }

#im-aa-form {
	display: flex; gap: var(--im-margin); flex-direction: column;
	height: 100%;
}
#im-aa-form > div:first-child		{ flex-grow: 2; }
#im-aa-form textarea,
#im-aa-form select,
#im-aa-form select option,
#im-aa-form input[type="text"] {
	padding: 0 var(--im-padding);	
	min-height: 44px; line-height: 44px;
	border: 0;
	color: var(--im-fg); background: var(--im-bg-active);
	font-size: 1.1rem; border-radius: var(--im-border-radius);
}
#im-aa-form textarea {
	width: calc(100% - (var(--im-padding) * 2)); height: calc(100% - (var(--im-padding) * 2)); padding: var(--im-padding);
	line-height: normal;
}
#im-aa-form select			{ padding: var(--im-padding); }
#im-aa-form > div:last-child		{ display: flex; gap: var(--im-margin); align-items: flex-start; width: 100%; }
#im-aa-form > div:last-child > input[type="text"] { flex-grow: 2; }
#im-aa-form > div:last-child > div:last-child	{ display: flex; gap: var(--im-margin);  justify-content: flex-end; }

/*--------------------------------
 	Block Q: Emojis
-------------------------------*/

emoji-picker {
	display: none; position: absolute; bottom: 50px; 
	--emoji-size: 2rem; z-index: 2001; /* opacity: 0; transition: opacity 1s ease; */
	--border-radius: var(--im-border-radius); }
emoji-picker.active			{ display: block; /*opacity: 1;*/ }

/*--------------------------------
 	Block Z: Responsive
-------------------------------*/

/* SMALLSCREEN_WIDTH */
@media all and (max-width: 800px) {
	#im-l				{ width: 100%; max-width: none; border: none; }
	#im-r				{ display: none; }

	/* Close button in imLH *
	#im-l-h > div:last-child,*/

	/*#im-l-b				{ padding-top: 20vh; /*display: flex; flex-direction: column-reverse;/ }*/

	/* Back to contact list icon */
	#im-r-h > div:first-child	{ display: block; border: 1px solid #f00; }
	#im-r-h #im-back-btn		{
		display: block; position: fixed; bottom: 37vh; right: 0; padding: 4px; 
		background: var(--im-bg);
		border-width: 2px 0 2px 2px; border-style: solid; border-color: var(--im-iconcolor);
		border-radius: calc(var(--im-border-radius) * 2) 0 0 calc(var(--im-border-radius) * 2); cursor: pointer;
	}

	/* Contact list action icon, message action icon, reaction icon */
	.cdiv > div:last-child > svg,
	.mdiv > div:first-child > div:first-child > svg,
	.mdiv > div:last-child		{ opacity: 1; }

	/* Contact suggestions */
	#im-r-b .cdiv			{ display: inline-flex; width: calc(100% - (2 * var(--im-padding))); }

	emoji-picker			{ width: 100%; --border-radius: 0; }

	#im-aa-form > div:last-child	{ flex-wrap: wrap; }

}