/********************************************************/
/*
/*      Cruise Contrôle App CSS - Discussions
/*
/********************************************************/
#chat {
	/*-- Variables --*/
	--bubble-shadow			: drop-shadow(3px 3px 2px rgba(0,0,0,.25));
	
	--avatar-size			: 92px;
	--avatar-bg-color		: var(--wp--preset--color--rose);
	--avatar-border			: 6px solid var(--wp--preset--color--blanc);
	
	--arrow-size			: 16px;
	--arrow-offset			: var(--wp--preset--spacing--5);
	/*-- Variables --*/
	
	grid-column: 1 / span 3;
	display: grid;
	grid-template-columns: subgrid;
	gap: var(--wp--preset--spacing--2-5);
	width: 100%;
	height: 100svh;
	
	/* Prevent animations from playing while the chat is not visible */
	#chat:not(.visible) * {
		animation-name: unset !important;
		animation-duration: unset !important;
		animation-fill-mode: unset !important;
		animation-play-state: unset !important;
		animation-timing-function: unset !important;
	}
	
	#chat-inner {
		/*-- Variables --*/
		--response-shadow 		: 6px 6px 0px 0px var(--accent-color, var(--wp--preset--color--bleu));
		--response-shadow-hover	: 8px 8px 0px 0px var(--accent-color, var(--wp--preset--color--bleu));
		/*-- Variables --*/
		
		grid-column: 1 / span 2;
		display: grid;
		grid-template-columns: 1fr 1.25fr;
		column-gap: var(--wp--preset--spacing--2-5);
		width: 100%;
		height: calc(100svh - (var(--wp--custom--header-height) + var(--wp--preset--spacing--1)));
		padding-inline-end: var(--wp--preset--spacing--1-5);
		padding-block-end: var(--wp--preset--spacing--2);
		margin-block-start: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--1));
		overflow-x: clip;
		overflow-y: scroll;
		scrollbar-color: var(--accent-color, var(--wp--preset--color--bleu)) transparent;
		scrollbar-width: thin;
		scroll-behavior: smooth;
		interpolate-size: allow-keywords;
		z-index: 5;
		
		& > .discussion {
			grid-column: 1 / span 2;
			grid-row: calc(var(--index, 0) + 1);
			display: grid;
			grid-template-columns: subgrid;
			grid-auto-rows: max-content;
			column-gap: var(--wp--preset--spacing--2-5);
			row-gap: unset;
			z-index: var(--z-index, 1);
			
			/******************************/
			/* Row
			/******************************/
			& .row {
				grid-column: 1 / span 2;
				grid-row: span 1;
				display: grid;
				grid-template-columns: subgrid;
				z-index: var(--z-index, 1 );
				
				/*-- Animation/transition --*/
				&[data-state=""] {
					display: none;
				}
				&[data-state="showing"]  {
					animation-name: bubble-in;
					animation-duration: var(--anim-speed-fast);
					animation-fill-mode: forwards;
					animation-play-state: running;
				}
				&[data-state="loading"] {
					animation-name: bubble-in;
					animation-duration: var(--anim-speed-fast);
					animation-fill-mode: forwards;
					animation-play-state: running;
					& > .bubble > .bubble-inner { animation-play-state: running; }
				}
				&[data-state="loaded"] {
					animation-name: bubble-in;
					animation-duration: var(--anim-speed-fast);
					animation-fill-mode: forwards;
					animation-play-state: running;
					& > .bubble > .bubble-inner { animation-play-state: running; }
					& > .bubble > .bubble-inner > .txt { animation-play-state: running; }
					& > .bubble > .bubble-inner > .loader { animation-play-state: running; }
				}
				&[data-state="hidden"] {
					animation-name: bubble-out;
					animation-duration: var(--anim-speed-fast);
					animation-fill-mode: forwards;
					animation-play-state: running;
				}
				/*-- Animation/transition --*/
				
				& > * {
					grid-row: span 1;
					position: relative;
				}
				
				& > .avatar {
					justify-self: end;
					align-self: center;
					grid-column: 1;
					display: flex;
					justify-content: center;
					align-items: end;
					width: var(--avatar-size);
					aspect-ratio: 1;
					background-color: var(--avatar-bg-color);
					border: var(--avatar-border);	
					border-radius: 50%;
					margin-block: unset;
					box-shadow: var(--shadow);
					overflow: clip;
					translate: var(--wp--preset--spacing--1-5);
					
					& > img {
						position: absolute;
						width: 100%;
						height: 100%;
						object-fit: cover;
						z-index: 0;
						
						&.avatar-img {
							width: 95%;
							height: 95%;
							z-index: 1;
						}
					}
				}
				
				& > .bubble {
					grid-column: 2;
					display: flex;
					align-items: center;
					min-height: calc(var(--avatar-size) + var(--wp--preset--spacing--0-50)); /* .5rem padding to prevent shadow overlap */
					color: var(--bubble-text-color);
					background-color: var(--bubble-bg-color, var(--wp--preset--color--bleu));
					padding: var(--bubble-pad);
					border-radius : var(--bubble-radius);
					user-select: none;
					filter: var(--bubble-shadow);
					
					&::after {
						content: '';
						position: absolute;
						display: block;
						border-style: solid;
						bottom: calc(var(--arrow-size) * -1);
						margin-left: calc((var(--arrow-size) / 2 ) * -1);	
					}
					
					& > .bubble-inner {
						display: grid;
						grid-template-columns: 100%;
						grid-template-rows: 100%;
						width: 100%;
						height: 100%;
						text-align: var(--bubble-text-align);
						
						/*-- Animation/transition --*/
						animation-name: bubble-inner-in;
						animation-duration: var(--anim-speed-fast);
						animation-play-state: paused;
						animation-fill-mode: forwards;
						/*-- Animation/transition --*/
						
						& > .loader {
							align-self: center;
							justify-self: center;
							grid-row: 1;
							grid-column: 1;
							pointer-events: none;
							
							/*-- Animation/transition --*/
							animation-name: loader-out;
							animation-duration: var(--anim-speed-fast);
							animation-play-state: paused;
							animation-fill-mode: forwards;
							/*-- Animation/transition --*/
							
							&::before  {
								--scale: 1.1;
								
								content: '';
								display: block;
								width: calc(70px * var(--scale));
								height: calc(26px * var(--scale));
								background: var(--bubble-text-color);
								border-radius: calc(50px * var(--scale));
								
								--c: no-repeat radial-gradient(farthest-side,#000 92%,#0000);
								--s: calc(18px * var(--scale)) calc(18px * var(--scale));
								
								mask: var(--c) left calc(4px * var(--scale)) top 50%, var(--c) center, var(--c) right calc(4px * var(--scale)) top 50%, linear-gradient(#000 0 0);
								mask-composite: exclude;
								
								animation: loader-anim 1.5s infinite;
							}
						}
						
						& > .txt {
							align-self: center;
							grid-row: 1;
							grid-column: 1;
							display: grid;
							grid-template-columns: 100%;
							justify-self: stretch;
							/* overflow: hidden; */
							transform-origin: var(--bubble-text-align) center;
							
							/*-- Animation/transition --*/
							animation-name: message-init;
							animation-duration: var(--anim-speed-fast);
							animation-play-state: paused;
							animation-fill-mode: forwards;
							/*-- Animation/transition --*/
							
							& > .txt-inner {
								justify-self: stretch;
								overflow: hidden;
								
								* {
									margin-block: unset;
								}
								
								* + * {
									margin-block-start: 1em;
								}
								
								mark.highlight-red-flag {
									display: contents;
									color: inherit;
									background-color: unset;
									line-height: inherit;
									padding: unset;
								}
							}
						}
					}
				}
				
				&.them {
					/*-- Variables --*/
					--bubble-bg-color	: var(--accent-color, var(--wp--preset--color--bleu));
					--bubble-text-color : var(--wp--preset--color--blanc);
					--bubble-text-align	: left;
					--bubble-radius		: 12px;
					--bubble-pad 		: var(--wp--preset--spacing--3) var(--wp--preset--spacing--1-5);
					/*-- Variables --*/
					
					& > .bubble::after {
						left: var(--arrow-offset);
						border-width: var(--arrow-size) var(--arrow-size) 0 0;
						border-color:  var(--bubble-bg-color) transparent transparent transparent;
					}
					
					&:has(.avatar) > .bubble {
						grid-column-start: 2;
					}	
				}
				
				&.us {
					/*-- Variables --*/
					--bubble-bg-color 	: var(--wp--preset--color--blanc);
					--bubble-text-color : var(--accent-color, var(--wp--preset--color--bleu));
					--bubble-text-align	: right;
					--bubble-radius		: 64px;
					--bubble-pad 		: var(--wp--preset--spacing--3) var(--wp--preset--spacing--1-5);
					/*-- Variables --*/	
					
					& > .bubble::after {
						right: var(--arrow-offset);
						border-width: 0 var(--arrow-size) var(--arrow-size) 0;
						border-color: transparent var(--bubble-bg-color)  transparent transparent;
					}
				}
				
				&.response {
					/*-- Variables --*/
					--bubble-bg-color 	: var(--wp--preset--color--blanc);
					--bubble-text-color : var(--accent-color, var(--wp--preset--color--bleu));
					--bubble-text-align	: right;
					--bubble-radius		: 64px;
					--bubble-pad 		: var(--wp--preset--spacing--1) var(--wp--preset--spacing--1-5);
					/*-- Variables --*/	
					
					&:first-of-type {
						margin-block-start: var(--wp--preset--spacing--2);
					}
					&:not(:last-of-type) {
						margin-block-end: var(--wp--preset--spacing--1);
					}
					
					& > .bubble {
						border: 1px solid var(--bubble-text-color);
						box-shadow: var(--response-shadow);
						cursor: pointer;
						filter: unset;
						transition: box-shadow var(--anim-speed-very-fast);
						
						&:is(:hover, :focus) {
							box-shadow: var(--response-shadow-hover);
						}
						
						& > .bubble-inner {
							& > .txt {
								counter-increment: answer-counter;
								display: grid;
								grid-template-columns: var(--avatar-size) 1fr;
								column-gap: var(--wp--preset--spacing--1);
								overflow: visible;
								
								&::before {	
									content: counter(answer-counter, lower-alpha);
									align-self: center;
									display: flex;
									align-items: center;
									justify-content: center;
									width: var(--avatar-size);
									height: var(--avatar-size);
									aspect-ratio: 1;
									font-family: var(--wp--preset--font-family--roc);
									font-size: calc(var(--wp--preset--font-size--x-large) * .8);
									font-weight: bold;
									line-height: 1;
									text-transform: uppercase;
									color: var(--bubble-bg-color);
									background: var(--bubble-text-color);
									border-radius: 50%;
									margin-block: calc(var(--wp--preset--spacing--0-50) * -1);
									margin-inline-start: calc(var(--wp--preset--spacing--1) * -1);
								}
								
								& > .txt-inner {
									display: flex;
									flex-direction: column;
									justify-content: center;
									font-size: var(--wp--preset--font-size--medium);
									line-height: 1;
									font-weight: 400;
									overflow: visible;
									
									& > * {
										margin-block: unset;
									}
									
									& > * + * {
										margin-block-start: 1em;
									}
								}	
							}
						}
						
						&::after {
							display: none !important;
						}
					}
				}
				
				&[data-end-flag] {
					padding-block-start: var(--wp--preset--spacing--2);
					
					/*-- Animation/transition --*/
					animation-name: message-init;
					animation-duration: var(--anim-speed-fast);
					animation-play-state: paused;
					animation-fill-mode: forwards;
					
					&[data-state="loaded"]  {
						animation-play-state: running;
					}
					/*-- Animation/transition --*/
					
					& > div {
						grid-column: 2;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						align-items: center;
						column-gap: var(--wp--preset--spacing--1);
						padding-inline: var(--wp--preset--spacing--3);
						
						& > .wp-block-button {
							justify-self: center;
							display: flex;
							justify-content: center;
							min-width: 90%;
							margin-block-start: var(--wp--preset--spacing--1);
						}
						
						& > * {
							margin-block: unset;
						}
						
						& > hr {
							flex: 1;
							height: 1px;
							background-color: var(--accent-color, var(--wp--preset--color--blanc));
							border: unset;
						}
						
						& > p {
							line-height: 1;
							color: var(--accent-color, var(--wp--preset--color--blanc));
							user-select: none;
						}
					}
				}
			}
			
			& :is(section, fieldset) {	
				grid-column: 1 / span 2;
				display: grid;
				grid-template-columns: subgrid;
				position: relative;
				margin-block-start: unset;
				isolation: isolate;
				z-index: var(--z-index, 1);
				
				&.messages {
					z-index: 3;
				}
				
				&.responses {
					counter-reset: answer-counter;
					z-index: 2;
				}
				
				&.reactions {
					z-index: 1;
				}
			}
			
			& fieldset {
				display: none;
				
				& input[type="radio"] {
					position: fixed;
					left: 0;
					top: 0;
				}
			}
		}
	}
	
	/******************************/
	/* Chat end popup
	/******************************/
	& > #chat-end-popup {
		position: absolute;
		top: 0;
		left: calc(var(--wp--custom--wide-pad) * -1);
		width: var(--wp--custom--viewport-width);
		height: 100svh;
		background: rgba(0, 0, 0, .75);
		margin-block-start: unset;
		pointer-events: none;
		z-index: 99;
		
		/*-- Animation/transition --*/
		animation-name: fade-in;
		animation-duration: var(--anim-speed-slow);
		animation-fill-mode: forwards;
		animation-play-state: paused;
		&.reset {
			opacity: 0 !important;
			pointer-events: none !important;
			
			animation-name: unset;
			animation-duration: unset;
			animation-fill-mode: unset;
			animation-play-state: unset;
		}
		&.fade-out {
			animation-name: fade-out;
			animation-duration: var(--anim-speed-slow);
			animation-fill-mode: forwards;
			animation-play-state: paused;
		}
		&.animate {
			animation-play-state: running;
		}
		/*-- Animation/transition --*/
		
		&:is(.animate, .visible) {
			pointer-events: all;
		}
		
		&.visible {
			opacity: 1;
		}
		
		& > .popup-inner {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: calc((var(--wp--custom--header-height) / 2) + 50%);
			left: 50%;
			max-width: calc(100% / 3);
			max-height: calc((100svh - var(--wp--custom--header-height)) * .75);
			background-color: var(--wp--preset--color--rose);
			padding: var(--wp--preset--spacing--1);
			border: 12px solid var(--wp--preset--color--blanc);
			border-radius: 32px;
			box-sizing: border-box;
			translate: -50% -50%;
			user-select: none;
			
			/*-- Animation/transition --*/
			animation-name: scale-up;
			animation-duration: var(--anim-speed);
			animation-fill-mode: forwards;
			animation-play-state: paused;
			animation-timing-function: var(--anim-easing-slow-down);
			&.reset {
				scale: 0 !important;
				
				animation-name: unset;
				animation-duration: unset;
				animation-fill-mode: unset;
				animation-play-state: unset;
				animation-timing-function: unset;
			}
			&.animate {
				animation-play-state: running;
			}
			/*-- Animation/transition --*/
			
			&::before,
			& > .popup-close {
				position: absolute;
				top: 0;
				background-color: var(--wp--preset--color--orange);
				border: var(--avatar-border);
				border-radius: 50%;
				box-shadow: var(--shadow);
				cursor: pointer;
				translate: -50% -50%;
			}
			
			&::before {
				content: '';
				display: block;
				left: 50%;
				width: var(--avatar-size, 92px);
				height: var(--avatar-size, 92px);
				aspect-ratio: 1;
				background-image: url(../images/cruise-controle-eyes.svg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 70%;
				pointer-events: none;	
			}
			
			& > .popup-close {
				left: 100%;
				width: 52px;
				height: 52px;
				aspect-ratio: 1;
				background-image: url(../images/xmark-white.svg);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 15px;
			}
			
			& > * {
				text-align: center;
				color: var(--wp--preset--color--noir);
				margin-block: unset;
			}
			
			& > p {
				max-width: calc(100% * (2/3));
				line-height: 1;
				margin-block-start: var(--wp--preset--spacing--4);
			}
			
			& > h2 {
				line-height: .8;
				margin-block-start: var(--wp--preset--spacing--0-50);
			}
			
			& > .wp-block-buttons {
				display: flex;
				column-gap: var(--wp--preset--spacing--1);
				margin-block-start: var(--wp--preset--spacing--2);
				
				& a {
					line-height: 1.05;
				}
			}
		}
	}
}