:root {
	--send-bg-dark: #3478F5;
	--send-bg-light: #69B4F5;
	--send-text: white;
	--receive-bg: #E5E5EA;
	--receive-text: black;
	--button-bg-light: #52CC8F;
	--button-bg-dark: #49BFBD;
	--button-text: #FFFFFF;
	--time-text: #999999;
	--header-bg-solid: rgba(241,241,241,1);
	--header-bg-transparent: rgba(235,235,235,0.7); 
	--header-border: #B1B0B2;
	--header-text: black;
	--dot-light: #C2C2C2;
	--dot-dark: #969696;
	--page-bg: white;
	--scrollbar: rgba(0,0,0,0.35);
}

/* Dark mode colors, which will override the default light colors */
@media only screen and (prefers-color-scheme: dark) {
	:root {
		--send-bg-dark: #3A80F4;
		--send-bg-light: #5294F7;
		--send-text: white;
		--receive-bg: #262626;
		--receive-text: white;
		--button-bg-light: #4DBF86;
		--button-bg-dark: #49BFBD;
		--button-text: #FFFFFF;
		--time-text: #8D8D93;
		--header-bg-solid: rgba(31,31,31,1);
		--header-bg-transparent: rgba(41,41,41,0.75); 
		--header-border: #323232;
		--header-text: white;
		--dot-light: #545256; /* intentionally reversed */
		--dot-dark: #88868B; /* light acts as a highlight */
		--page-bg: black;
		--scrollbar: rgba(255,255,255,0.5);
	}
}

/* For Chrome and Safari, add a margin-top of 51px to the scrollbar.
   We do this to allow content to scroll under the header but still
   have the scrollbar end just below the header (a la iMessage) */
.scroll-cover {
	display: none; /* overriden if scrollbar supported */
}
   
@supports selector(::-webkit-scrollbar) {
	::-webkit-scrollbar {
		width: 15px; 
	}

	::-webkit-scrollbar-thumb {
		border: 4px solid rgba(0,0,0,0);
		border-radius: 10px;
  		background-clip: padding-box;
		background-color: var(--scrollbar);
	}

	/* Not 51px (like .header) because of the scrollbar border */
	::-webkit-scrollbar-track {
		margin-top: 47px;
		margin-bottom: -4px;
	}

	.scroll-cover {
		display: block;
		position: absolute;
		z-index: 9999; /* less than .header */
		top: 0;
		right: 0;
		height: 100%;  
		width: 15px; /* scrollbar width */
		background: var(--page-bg);
		opacity: 1;
		transition: all 500ms;
	}

	body:hover > .scroll-cover {
		opacity: 0;
		transition: all 500ms;
	}
	
	/* For phones, make the scrollbar skinny. */
	@media only screen and (max-width: 768px) {
		::-webkit-scrollbar, .scroll-cover { 
			width: 10px; 
		} 
		::-webkit-scrollbar-thumb {  
			border: 3px solid rgba(0,0,0,0);   
			border-radius: 5px;
		}
		::-webkit-scrollbar-track {
			margin-top: 48px;
			margin-bottom: -3px;
		}
	}
}

html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    scroll-snap-type: y proximity;
    overscroll-behavior: none;
    touch-action: pan-y;
}

body {
	overflow-y: auto;
	background-color: var(--page-bg);
}

.layout-container {
	position: relative;
	margin-right: calc(100% - 100vw); /* scrollbar gutter */
	padding-top: 50px; /* space for the header */
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 20px;
}

.header {
	position: fixed;
	z-index: 99999;
	top: 0;
	height: 50px;
	width: 100%;
	margin-bottom: 5px;
	border-bottom: 1px solid var(--header-border);
	text-align: center;
	line-height: 50px; /* Vertical centering of text */
	font-weight: bold;
	color: var(--header-text);
	background-image: 
		linear-gradient(
  		var(--header-bg-solid),
  		var(--header-bg-transparent));
 	backdrop-filter: blur(15px) brightness(1.1);
	-webkit-backdrop-filter: blur(15px); /* iOS is brighter, weirdly */
}

.footer {
	position: relative;
	height: 100px; /* this is space for new messages to appear */
	scroll-snap-align: var(--scroll-snap); /* set via JS */
}

.new-joke-button {
	position: absolute;
	display: flex;  
	align-items: center;
	justify-content: center;
	left: 50%;
	bottom: 0px;
	transform: translate(-50%,-50%);
	height: 50px;
	width: 200px;
	border: none;
	border-radius: 25px;
	background-image: 
  		linear-gradient(
  		-45deg,
  		var(--button-bg-dark),
  		var(--button-bg-light));
	cursor: auto;
	opacity: 0;
	visibility: hidden;
}

/* set when the joke is over */
.new-joke-button.visible {
	transition: opacity 400ms;
	opacity: 1;
	visibility: visible;
	cursor: pointer;
}

.new-joke-button > span {
	margin-left: auto;
    margin-right: auto;
    font-weight: normal;
	font-size: 20px;
	color: var(--button-text);
}

.new-joke-button > svg {
	margin-left: auto;
	margin-right: 8px;
	width: 24px;
	height: 24px;
}

.new-joke-button > svg > path:first-child {
	fill: var(--button-text);
}

.time-header {
	position: absolute;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 30px;
	width: 100%;
	padding-top: 8px;
	white-space: pre;
	font-weight: normal;
	font-size: 12px;
	letter-spacing: 0.9px;
	color: var(--time-text);
}

.time {
	font-weight: 300;
}

/* the .message within is absolutely positioned, so we can
   animate the height of the container and allow for a smooth
   transition when a new message appears. */
.message-container {
	position: relative;
	margin: 0 auto;
	height: 0; /* overridden by animations */
	width: calc(100% - 30px); /* 15px margin for old iPhones */
	max-width: 390px;
}

/* We set the message height via JavaScript, since we don't know
   the height of a message in advance. */
@keyframes expand-msg {
	from {
		height: 0;
	}
	to {
		height: var(--msg-height);
	}
}

/* Expand-text is used when switching from a typing dots message
   to one with actual text which may be taller. */
@keyframes expand-text {
	from {
		height: var(--msg-height);
	}
	to {
		height: var(--total-msg-height, var(--msg-height));
	}
}

.message-container.expand-send {
	animation: expand-msg 300ms 0s ease-in-out forwards;
}

.message-container.expand-recv {
	animation: expand-msg 300ms 0s ease-in-out forwards, expand-text 300ms 1s ease-in-out forwards;
}

/* The message right before the footer is the one that's
   currently animating, so make sure the browser knows it. */
.layout-container > div:nth-last-child(2) > .message-container:last-child {
	will-change: height;
}

.message {
	position: absolute;
	opacity: 0;
	max-width: 255px;
	min-height: 25px;
	margin-bottom: 2px;
	padding: 10px 16px;
	border-radius: 22px;
	line-height: 1.2;
}

/* Now that send is SVG, the pseudo elements aren't needed.
   However, they aren't visible so we're leaving them alone. 
   This simplifies the CSS for dots and recv messages. */
.message:before, .message:after {
    content: "";
	position: absolute;
    bottom: 0;
    height: 25px;
}

.content {
	white-space: pre-line;
	word-break: break-word;
}

.emoji {
	font-size: 30px !important;	
}

/* set on the first .message in a group, so the other messages
   have less padding between them, as with iMessage on iOS. */
.group-height {
	margin-top: 6px; /* overridden by .time-height if present */
}

/* set on the .message so the header fits above it */
.time-height {
	margin-top: 38px !important; /* must = time-header height + padding */
}

@keyframes ease-in-msg {
	from {
		transform: translateY(10px);
	}
	to {
		transform: translateY(0px);
	}
}

.message[send] {
	right: 0px;
	color: var(--send-text); 
	clip-path: var(--clip-path); /* set via JS */
	animation: ease-in-msg 300ms ease-in-out;
}

.message-container:last-child > .message[send] {
	clip-path: var(--tail-clip-path); /* set via JS */
}

.message[send] > .content {
	position: relative;
	z-index: 1; /* necessary with clip-path */
}

.send-background {
	position: fixed;
	left: 0;
	top: 0;
	width: 100% !important;
	height: 100% !important;
	background-image: 
  		linear-gradient(
  		var(--send-bg-light) 0px,
  		var(--send-bg-light) 50px, 
  		var(--send-bg-dark) 850px,
  		var(--send-bg-dark) 100%);
	background-position: top;
}

@keyframes show-recv {
	to {
		position: absolute;
	}
}

/* The animation time for a message to appear needs to match
   the time for the typing message to disappear in JS. */
.message[recv] {
	position: fixed; /* overriden by show-recv */
	left: 7px;
	color: var(--receive-text);
	background-color: var(--receive-bg);
	animation: show-recv 0s 1s forwards;
}

.message-container:last-child > .message[recv]:before {
	left: -7px;
	width: 20px;
	border-bottom-right-radius: 16px 14px;
	background-color: var(--receive-bg);
}

.message-container:last-child > .message[recv]:after {
	left: -26px;
	width: 26px;
	border-bottom-right-radius: 10px;
	background-color: var(--page-bg);
}

@keyframes breathe {
	50%	{ transform: scale(1.025); }
}

.message[dots] {
	z-index: 10;
	left: 7px;
	background-color: var(--receive-bg);
	animation: ease-in-msg 300ms ease-in-out, breathe 1200ms 300ms ease-in-out;
}

.message[dots]:before {
	z-index: 10;
	height: 6px;
	width: 6px;
	left: -6px;
	border-radius: 50%;
	background-color: var(--receive-bg);
}

.message[dots]:after {
	z-index: 10;
	height: 13px;
	width: 13px;
	left: -1px;
	bottom: 3px;
	border-radius: 50%;
	background-color: var(--receive-bg);
}

@keyframes cycle-dots {
	0% { background-color: var(--dot-light); }
	50% { background-color: var(--dot-dark); }
	100% { background-color: var(--dot-light); }
}

.dots, .dots:before, .dots:after {
	height: 12px;
	width: 12px;
	border-radius: 50%;
	background-color: var(--dot-light);
}

.dots {
	position: relative; 
	top: 6px;
	margin-left: 19px;
	margin-right: 19px;	
	animation: cycle-dots 1s 0.3333s linear;
}

.dots:before {
    content: "";
	position: absolute; 
	left: -18px;
	animation: cycle-dots 1s 0s linear;
}

.dots:after {
    content: "";
	position: absolute; 
	left: 18px;
	animation: cycle-dots 1s 0.6666s linear;
}