main/public_html/css/container.css

/* Card container */
#CONTAINER.message{
	height: calc( 100% - 6.3em );

	flex-direction: column;
	justify-content: flex-start;
	flex-wrap: nowrap;
}

	#CONTAINER.message div{ /* Message item */
		display: inline-block;
		position: relative;
			top: 0;
			left: 0;
			height: auto;

		margin: 1em;
		padding: 1em;

		align-self: flex-start;

		border-radius: 3px;

		background-color: #fff;

		color: #222;
	}

	#CONTAINER.message div.me{ /* Message Item (self) */
		background: #13d89d;
		align-self: flex-end;
	}

	#CONTAINER.message div.end-pad{
		padding: 0;
		opacity: 0;
	}

		#CONTAINER.message div span.author{ /* Message author */
			display: inline-block;
			position: relative;

			padding: .2em .4em;
			margin-right: 1em;

			border: 1px solid #ddd;

			border-radius: 3px;

			background: #eee;

			color: #666;
		}

		#CONTAINER.message div span.author:after{ /* Add 'dit' */
			content: ' dit';

			color: #333;
		}

		#CONTAINER.message div.me span.author{ /* Hide message author if self */
			display: none;
		}

		#CONTAINER.message div span span{ /* Code block */
			display: inline-block;
			position: relative;

			padding: .2em .3em;

			border-radius: 3px;

			background: #f0f0f0;

			font-family: 'Liberation Mono';
			font-size: .9em;
			text-anchor: end;

		}


	#CONTAINER.message form.msg-input{ /* Message Input */
		display: block;
		position: fixed;
			top: calc( 100% - 3em );
			left: 15em;
			width: calc( 100% - 15em - 2*1px );
			height: 3em;

		border-top: 1px solid #ddd;

		background: #fff;

		overflow: hidden;

		transition: left  .2s ease-in-out,
					width .2s ease-in-out;
	}

	#WRAPPER.min #CONTAINER.message form.msg-input{
		left: 3.5em;
		width: calc( 100% - 3.5em - 2*1px );
	}

	#CONTAINER.message form.msg-input input{ /* form Input */
		display: inline-block;
		position: absolute;
			top: 0;
			left: 0;
			width: calc( 100% - 2em - 3em );
			height: calc( 100% - 2*.5em );

		padding: .5em 1em;

		border: none;

		font-size: inherit;
		font-family: inherit;
	}

	#CONTAINER.message form.msg-input button{ /* form send button */
		display: inline-block;
		position: absolute;
			top: 0;
			left: calc( 100% - 3em );
			width: 3em;
			height: 3em;

		background: url('/image/container/send-msg.svg@777777') center center no-repeat;
		background-size: 50%;

		border: none;

		font-size: inherit;

		cursor: pointer;
	}

	#CONTAINER.message form.msg-input button:hover{
		background-image: url('/image/container/send-msg.svg@000000');
	}