footer {
	height: auto;
	padding-bottom: 0;
}

#user-name {
	font-weight: bold;
	display: inline-block;
	text-wrap: nowrap;
	max-width: 30ch;
	overflow-x: clip;
}

#user {
	color: var(--color);
	font-size: 1rem;
	text-transform: none;
	display: flex;
	overflow-x: clip;
	flex: 1;
	align-items: center;
	gap: var(--spacing);
	min-width: 5ch;
}


#message-list {
	display: flex;
	justify-content: end;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 1000;
	gap: 1px;
	padding: var(--spacing) var(--spacing2);
	min-height: calc(var(--body) - var(--footer) - var(--header) - var(--inset-bottom));

	img {
		width: auto;
		height: auto;
		max-width: 80%;
		max-height: 80dvh;
	}

	li {
		word-wrap: break-word; /* make sure the text wraps to multiple lines if long */
		display: flex;
		flex-direction: column;
		gap: 1px;
		&:last-child {margin-bottom: var(--spacing)}
	}

	.user {
		align-self: start;
	}

	.self, .ack {
		align-self: end;
	}

	img.self {
		margin-right: var(--spacing);
	}

	.ack {
		font-size: 0.9em;
		margin-right: var(--spacing);
		color: var(--label);
	}

	p {
		position: relative;
		text-align: left;
		border-radius: 1em;
		max-width: 24ch;
		margin: 1px var(--spacing);
		padding: 0.4em 1.5ch;
		text-wrap: wrap;
		word-break: break-word;

		&:before {width: 2ch; background: inherit}
		&:after {width: 1ch; background: var(--background)}
		&:before, &:after {position: absolute; bottom: 0; height: 1em; content: ''}
	}

	p.self {
		color: white;
		background: var(--blue);

		&:before {right: -0.8ch; border-bottom-left-radius: 1em}
		&:after {right: -1ch; border-bottom-left-radius: 1ch}
	}

	p.user {
		color: currentColor;
		background: var(--deco);

		&:before {left: -0.8ch; border-bottom-right-radius: 1em}
		&:after {left: -1ch; border-bottom-right-radius: 1ch}
	}
}

#attachments {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	gap: var(--spacing);
	padding-bottom: var(--spacing);
	height: 10em;

	button {
		position: absolute;
		padding: 0;
		height: auto;
		top: 0;
		right: 0;
		margin: calc(var(--spacing)/2);
		padding: calc(var(--spacing)/2);
	}

	.attachment {
		display: inline;
		position: relative;
		height: 100%;
	}

	.photo {
		height: 100%;
	}
}

#compose {
	display: block;
	border-top: var(--border);
	padding-top: var(--spacing);
	/*background: rgba(0, 0, 255, 0.5);*/

	button, .button {
		padding: var(--spacing);
		flex-shrink: 0;
	}

	#widget {
		margin-bottom: calc(var(--spacing) + var(--inset-bottom));
		display: flex;
		align-items: end;
		gap: 1ch;
		width: 100%;
		/*background: rgba(255, 0, 0, 0.5);*/
	}

	#text-input {
		border: 0;
		flex-grow: 1;
		background: none;
		margin-bottom: 0.57em;
			word-break: break-word;
		/*background: rgba(0, 255, 0, 0.5);*/
	}
}