/* ---------------------------------------------------------------------------
   The AI Leave Planner's conversation, its messages alone (js/lp-chat.js;
   inc/private-tiles.php, lobo_child_lp_chat(); Corey, 2026-10-16)

   No window around them: straight on the dark blue-teal they are shown
   over. The assistant's messages on the left, nearly white, beside its
   mark; the person's on the right in the prototype's teal; choices as
   glassy pills; at the end the recommended leave, its definition tapped
   open in a small tip (no leave plan, Corey, 2026-10-17). Its height is
   the box it is given (--lp-chat-h); the messages sit at the bottom of it.
   Everything is sized in ems, so the script can scale the whole of it by
   its font size until the finished conversation just fits the box.
   --------------------------------------------------------------------------- */

/* Figtree for the whole conversation (Corey, 2026-10-17): self-hosted,
   as Lato is (fonts/figtree; SIL Open Font License, Erik Kennedy), one
   variable file for every weight, latin only. */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree/figtree-latin-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.lp-chat {
	--lp-chat-h: 340px;
	--lp-chat-fs: 13.5px;
	--lp-chat-teal: #0b7280;
	--lp-chat-ink: #16323a;
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: var( --lp-chat-h );
	color: var( --lp-chat-ink );
	font-family: "Figtree", "Lato", Helvetica, Arial, sans-serif;
	font-size: var( --lp-chat-fs );
	line-height: 1.4;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

/* The messages, at the foot. */
.lp-chat__log {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: flex-end;
	gap: .52em;
	min-height: 0;
	/* Room round the messages for their shadows, which the clipping would
	   otherwise cut at the foot and sides (Corey, 2026-10-17): the box
	   reaches out past the chat's own by as much as it is padded more, so
	   the messages sit where they did. */
	margin: 0 -1em -2em;
	padding: .6em 1.3em 2.45em;
	overflow: hidden;
	/* The top's fade, where the first messages pass out: long and eased,
	   so they thin away rather than meet an edge (Corey, 2026-10-17; 1em,
	   straight, before). */
	--lp-chat-fade: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, 0 ) 0,
		rgba( 0, 0, 0, .06 ) .5em,
		rgba( 0, 0, 0, .2 ) 1.1em,
		rgba( 0, 0, 0, .42 ) 1.8em,
		rgba( 0, 0, 0, .66 ) 2.5em,
		rgba( 0, 0, 0, .85 ) 3.2em,
		rgba( 0, 0, 0, .96 ) 3.8em,
		#000 4.3em
	);
	-webkit-mask-image: var( --lp-chat-fade );
	mask-image: var( --lp-chat-fade );
}

.lp-chat__row {
	display: flex;
	flex: none;
	align-items: flex-end;
	gap: .6em;
}

.lp-chat__row--user {
	justify-content: flex-end;
}

.lp-chat__av {
	display: inline-flex;
	flex: none;
	box-sizing: border-box;
	width: 1.8em;
	height: 1.8em;
	padding: .38em;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 10px -4px rgba( 0, 0, 0, .45 );
	/* The mark muted toward slate (Corey, 2026-10-17). */
	color: #456c75;
}

/* The mark's left piece in AbsenceSoft's orange, as in their logo, the
   right in the teal (Corey, 2026-10-17). */
.lp-chat__av .lp-chat__mark-a {
	fill: #85614f;
}

/* One mark for a run of the assistant's messages: at the last of them. */
.lp-chat__row--bot:has( + .lp-chat__row--bot ) .lp-chat__av {
	visibility: hidden;
}

.lp-chat__bubble {
	/* Its words a touch under the chat's size (Corey, 2026-10-17; .89
	   before), its padding and corners scaled up to match so the bubble
	   keeps its size. */
	font-size: .84em;
	max-width: 82%;
	padding: .636em .954em;
	border-radius: 1.113em;
	/* Deeper (Corey, 2026-10-17). */
	box-shadow: 0 3px 6px -2px rgba( 0, 0, 0, .14 ), 0 14px 26px -10px rgba( 0, 0, 0, .6 );
	overflow-wrap: break-word;
}

.lp-chat__bubble {
	/* A step heavier than regular, Figtree's medium (Corey, 2026-10-17);
	   what is bold stays bold. */
	font-weight: 500;
}

.lp-chat__row--bot .lp-chat__bubble {
	border-bottom-left-radius: .318em;
	background: rgba( 246, 251, 252, .96 );
	color: #0b4b59;
	transform-origin: 0 100%;
}

.lp-chat__row--user .lp-chat__bubble {
	border-bottom-right-radius: .318em;
	background: linear-gradient( 135deg, #4fb5ca, #2a8fa6 );
	box-shadow: 0 3px 6px -2px rgba( 0, 0, 0, .16 ), 0 14px 26px -10px rgba( 0, 0, 0, .65 ), inset 0 0 0 1px rgba( 255, 255, 255, .14 );
	color: #fff;
	font-weight: 500;
	transform-origin: 100% 100%;
}

/* A term with a definition behind it (js/lp-chat.js, define()): dotted
   underneath, as a link to a definition is; pressed when it is tapped. */
.lp-chat__term {
	border-radius: .25em;
	text-decoration: underline dotted;
	text-decoration-thickness: 1.5px;
	text-underline-offset: .22em;
	transition: background-color .45s cubic-bezier( .4, 0, .6, 1 ), box-shadow .45s cubic-bezier( .4, 0, .6, 1 );
}

.lp-chat__term.is-tapped {
	background: rgba( 11, 114, 128, .14 );
	box-shadow: 0 0 0 .15em rgba( 11, 114, 128, .14 );
}

/* Its definition, opened beside it: a small dark tip with a pointer to
   the term. */
.lp-chat__tip {
	position: absolute;
	z-index: 5;
	box-sizing: border-box;
	width: max-content;
	max-width: min( 15em, 100% );
	padding: .55em .8em .6em;
	border-radius: .6em;
	/* More contrast (Corey, 2026-10-17): a deeper ground, white words. */
	background: #08262e;
	box-shadow: 0 8px 22px -12px rgba( 0, 0, 0, .35 ), inset 0 0 0 1px rgba( 255, 255, 255, .08 );
	color: #fff;
	font-size: .79em;   /* the choices' size */
	line-height: 1.35;
	pointer-events: none;
}

.lp-chat__tip::after {
	content: "";
	position: absolute;
	left: calc( var( --lp-tip-x, 50% ) - .35em );
	width: .7em;
	height: .7em;
	background: inherit;
	transform: rotate( 45deg );
}

.lp-chat__tip.is-above::after {
	bottom: -.3em;
}

.lp-chat__tip.is-below::after {
	top: -.3em;
}

.lp-chat__bubble strong {
	color: #08404c;
	font-weight: 700;
}

/* Weights (Corey, 2026-10-17): the words regular throughout, the person's
   too; only the recommendation's name in bold, and that not black. */

/* The assistant typing: three dots in a wave. */
.lp-chat__row--typing .lp-chat__bubble {
	display: inline-flex;
	gap: .318em;
	padding: .869em 1.007em;
}

.lp-chat__row--typing i {
	width: .477em;
	height: .477em;
	border-radius: 50%;
	background: #6aa6b3;
	animation: lp-chat-dot 1.6s ease-in-out infinite;
}

.lp-chat__row--typing i:nth-child( 2 ) {
	animation-delay: .2s;
}

.lp-chat__row--typing i:nth-child( 3 ) {
	animation-delay: .4s;
}

@keyframes lp-chat-dot {
	0%, 60%, 100% {
		opacity: .5;
		transform: translateY( 0 );
	}

	/* A soft rise, not a bounce (Corey, 2026-10-17). */
	30% {
		opacity: .9;
		transform: translateY( -.12em );
	}
}

/* Choices: pills under the question, in line with its words. */
.lp-chat__chips {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: .45em;
	padding-left: 2.4em;
}

.lp-chat__chip {
	padding: .45em .82em;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .1 );
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .28 );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	color: #fff;
	font-size: .79em;
	font-weight: 400;
	white-space: nowrap;
	transition: background-color .4s ease, color .4s ease, opacity .5s ease, box-shadow .4s ease;
}

/* The date picker's pill: a calendar mark before its words. */
.lp-chat__chip--date {
	display: inline-flex;
	align-items: center;
	gap: .45em;
}

.lp-chat__chip--date svg {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
}

/* The date picker opened (js/lp-chat.js, pickDate()), in AbsenceSoft's own
   look (the prototype's colors_and_type.css; Corey, 2026-10-17): a white
   card with a hairline border and their soft shadow, the month in their
   navy with arrows beside it, the weekdays in charcoal, today ringed in
   their teal and the chosen day filled in their deep teal. */
/* Opened as a modal over the conversation (Corey, 2026-10-17): the
   calendar centred on the chat, which softens under it (js/lp-chat.js);
   no scrim, which was clipped at the edges on desktop. */
.lp-chat__modal {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.lp-chat__cal {
	box-sizing: border-box;
	width: 15.5em;
	max-width: 100%;
	padding: 1.15em 1.2em 1.05em;
	border-radius: .9em;
	background: #fff;
	box-shadow: inset 0 0 0 1px #e0e0e0, 0 4px 16px rgba( 0, 0, 0, .16 ), 0 20px 40px -16px rgba( 0, 0, 0, .45 );
	color: #252525;
	font-size: .84em;
}

.lp-chat__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 .3em .8em .35em;
	color: #1d5869;
	font-weight: 700;
}

.lp-chat__cal-nav {
	display: inline-flex;
	gap: .55em;
	color: #717171;
	font-weight: 400;
	letter-spacing: .1em;
}

.lp-chat__cal-grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: .3em .25em;
	text-align: center;
}

.lp-chat__cal-wd {
	color: #717171;
	font-size: .74em;
	font-weight: 700;
	line-height: 2;
}

.lp-chat__cal-day {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 50%;
	font-size: .86em;
	transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.lp-chat__cal-day.is-today {
	box-shadow: inset 0 0 0 1.5px #44a5b8;
	color: #096179;
	font-weight: 700;
}

.lp-chat__cal-day.is-picked {
	background: #096179;
	box-shadow: none;
	color: #fff;
	font-weight: 700;
	animation: lp-chat-press .6s cubic-bezier( .45, 0, .2, 1 );
}

.lp-chat__chip.is-picked {
	background: #fff;
	box-shadow: 0 0 0 4px rgba( 255, 255, 255, .18 ), 0 6px 16px -6px rgba( 0, 0, 0, .5 );
	color: var( --lp-chat-teal );
	animation: lp-chat-press .8s cubic-bezier( .45, 0, .2, 1 );
}

.lp-chat__chip.is-dim {
	opacity: .45;
}

@keyframes lp-chat-press {
	40% {
		transform: scale( .98 );
	}
}

/* Where even at its smallest it is too tall for its box, the first
   messages pass up out of the top under a longer fade — eased as the
   short one is, so they thin away gradually (Corey, 2026-10-17; 3.5em,
   straight, before). */
.lp-chat--over .lp-chat__log {
	--lp-chat-fade: linear-gradient(
		to bottom,
		rgba( 0, 0, 0, 0 ) 0,
		rgba( 0, 0, 0, .05 ) .7em,
		rgba( 0, 0, 0, .16 ) 1.5em,
		rgba( 0, 0, 0, .34 ) 2.4em,
		rgba( 0, 0, 0, .56 ) 3.3em,
		rgba( 0, 0, 0, .77 ) 4.2em,
		rgba( 0, 0, 0, .92 ) 5em,
		#000 5.8em
	);
}

/* The finished conversation, laid out unseen beside it to be measured
   (js/lp-chat.js, fit()). */
.lp-chat__log.lp-chat__log--measure {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: auto;
	visibility: hidden;
	pointer-events: none;
}

/* The last conversation, fading over the start of the next (js/lp-chat.js,
   clear()): placed by the script exactly over the log. */
.lp-chat__log.lp-chat__log--ghost {
	position: absolute;
	/* Sized by the script to the log's whole box, padding and all, so
	   nothing in it shifts as it is lifted across. */
	box-sizing: border-box;
	/* Placed by the script at the log's own box, margins already counted:
	   none of its own, or it lands a little to the left. */
	margin: 0;
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.lp-chat * {
		animation: none !important;
		transition: none !important;
	}
}

/* The leave plan, in the hero after the due date (Corey, 2026-10-17): its
   span, three bars that draw in turn with the due date marked between the
   first two, and a key to them. Its title in the bubbles' teal, everything
   else in it one softer teal (Corey, 2026-10-17). */
.lp-chat__row--plan {
	align-items: flex-end;
}

.lp-chat__plan {
	flex: 1 1 auto;
	max-width: 88%;
	padding: .8em .95em .72em;
	border-radius: 1.05em;
	border-bottom-left-radius: .3em;
	background: rgba( 246, 251, 252, .96 );
	color: #0b4b59;
	font-size: .84em;
	font-weight: 500;
	box-shadow: 0 3px 6px -2px rgba( 0, 0, 0, .14 ), 0 14px 26px -10px rgba( 0, 0, 0, .6 );
	transform-origin: 0 100%;
}

/* Its title with its dates under it, and at the top right the weeks off,
   their job protection under them. */
.lp-chat__plan-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .15em .9em;
	margin-bottom: .55em;
}

.lp-chat .lp-chat__plan-head span {
	text-align: right;
	line-height: 1.35;
}

/* Each on its line whole, on a phone too. */
.lp-chat .lp-chat__plan-head :is( b, span ) {
	white-space: nowrap;
}

.lp-chat .lp-chat__plan-head small {
	display: block;
	margin-top: .15em;
	color: #4a7480;
	font-size: .86em;
	white-space: nowrap;
}

.lp-chat .lp-chat__plan-head b {
	color: #0b4b59;
	font-weight: 700;
}

.lp-chat .lp-chat__plan-head span {
	color: #4a7480;
	font-size: .86em;
}

/* The due date, over the bar where the first part ends. */
.lp-chat__graph {
	position: relative;
	padding-top: 1.35em;
}

.lp-chat__due {
	position: absolute;
	top: 0;
	/* On the middle of the gap between the first two bars: the bars share
	   what is left after their two gaps (.22em each), so the first ends at
	   its share of that, and half a gap on is the middle. */
	left: calc( ( 100% - .44em ) * var( --due ) + .11em );
	color: #4a7480;
	font-size: .76em;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	transform: translate( -.2em, .3em );
	transition: opacity .6s ease, transform .8s cubic-bezier( .22, 1, .36, 1 );
}

.lp-chat__due::after {
	content: "";
	position: absolute;
	top: 1.3em;
	left: .2em;
	width: 1.5px;
	height: 1.05em;
	margin-left: -.75px;
	border-radius: 1px;
	background: #4a7480;
}

.lp-chat__bars {
	display: flex;
	gap: .22em;
	height: .9em;
}

.lp-chat__seg {
	width: var( --w );
	height: 100%;
	border-radius: .22em;
	/* Each grows in from nothing, left to right, the next starting as the
	   last reaches its end. Uncovered rather than widened, so nothing
	   around it is laid out again each frame. */
	-webkit-clip-path: inset( 0 100% 0 0 round .22em );
	clip-path: inset( 0 100% 0 0 round .22em );
	transition:
		-webkit-clip-path .75s cubic-bezier( .45, 0, .2, 1 ),
		clip-path .75s cubic-bezier( .45, 0, .2, 1 );
}

.lp-chat__seg--a {
	background: #0b5566;
}

.lp-chat__seg--b {
	background: #7cc3d1;
}

.lp-chat__seg--c {
	background: #2f8ea3;
}

.is-drawn .lp-chat__seg {
	-webkit-clip-path: inset( 0 0 0 0 round .22em );
	clip-path: inset( 0 0 0 0 round .22em );
}

.is-drawn .lp-chat__seg--b {
	transition-delay: .62s;
}

.is-drawn .lp-chat__seg--c {
	transition-delay: 1.24s;
}

.is-drawn .lp-chat__due {
	opacity: 1;
	transform: translate( -.2em, 0 );
	transition-delay: .55s;
}

.lp-chat__keys {
	display: flex;
	flex-wrap: wrap;
	gap: .2em .9em;
	margin-top: .65em;
	color: #4a7480;
	font-size: .8em;
	font-weight: 500;
}

/* The key's three, each rising softly into place in turn as the last bar
   finishes. */
.lp-chat__keys > span {
	display: flex;
	align-items: center;
	gap: .38em;
	white-space: nowrap;
	opacity: 0;
	transform: translateY( .35em );
	transition: opacity .7s ease, transform .9s cubic-bezier( .22, 1, .36, 1 );
}

.is-drawn .lp-chat__keys > span {
	opacity: 1;
	transform: none;
}

.is-drawn .lp-chat__keys > span:nth-child( 1 ) {
	transition-delay: 1.6s;
}

.is-drawn .lp-chat__keys > span:nth-child( 2 ) {
	transition-delay: 1.75s;
}

.is-drawn .lp-chat__keys > span:nth-child( 3 ) {
	transition-delay: 1.9s;
}

.lp-chat__keys i {
	flex: none;
	width: .62em;
	height: .62em;
	border-radius: .15em;
}

/* On a phone the plan takes the row's full width. */
@media only screen and ( max-width: 600px ) {
	.lp-chat__plan {
		max-width: none;
	}
}