@use '../assets';

#app-mount .chat-2ZfjoI {
	background: var(--background-alt);

	// Thread opened
	&.threadSidebarOpen-1LSXvU {
		border-radius: 0;
	}

	// Prevent Y-Overflow
	.scroller-kQBbkU {
		overflow-x: hidden !important;
	}

	// Message spacing
	.scrollerSpacer-3AqkT9 {
		display: none;
	}

	// Header
	.header-1dhDWV {
		line-height: normal;
	}
}

#app-mount .messagesWrapper-RpOMA3 {
	background: var(--background-alt);
	z-index: 1;
	.scrollerSpacer-1Rp0XE {
		height: 0;
	}

	// Welcome Message
	.container-1yy5xN {
		padding: var(--spacing-triple);
		margin: 0;
		justify-content: center;
		flex-grow: 1;
		border: none;
		h1 {
			margin: 0;
			margin-bottom: var(--spacing);
			font-size: var(--font-size-xxl);
			font-weight: var(--font-weight-light);
			color: var(--text-normal);
			max-width: calc(100% - var(--avatar-size-xl) - var(--spacing-double) - var(--spacing));
		}
		.description-22d6ux {
			color: var(--text-muted);
			font-size: var(--font-size);
			font-weight: var(--font-weight-normal);
			max-width: calc(100% - var(--avatar-size-xl) - var(--spacing-double) - var(--spacing));
			user-select: text;
		}
		.wrapper-1VLyxH {
			width: var(--avatar-size-xl) !important;
			height: var(--avatar-size-xl) !important;
			position: absolute;
			right: var(--spacing-double);
		}
		.emptyChannelIcon-1YdEz2 {
			background: url(assets.$illustration_7) center/cover no-repeat;
			border-radius: 0;
			position: absolute;
			margin: 0;
			right: var(--spacing-triple);
			height: 72px;
			width: 72px;
		}
		.button-2OOM0p {
			font-size: var(--font-size);
			font-weight: var(--font-weight-normal);
			cursor: var(--cursor);
			min-height: var(--input-height);
			height: var(--input-height);
			line-height: normal;
			transition: none;
			padding: 0 var(--spacing);
			border-radius: var(--button-border-radius);
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			text-transform: capitalize;
			color: var(--white);
			background-color: rgb(var(--accent));
			margin-top: var(--spacing-half);
			&:hover {
				box-shadow: inset 0 0 0 100vmax rgb(255, 255, 255, 0.1);
			}
			&:focus {
				box-shadow: 0 0 0 2px rgb(var(--accent), 0.25), inset 0 0 0 100vmax rgb(255, 255, 255, 0.1);
			}
		}
	}

	.container-30bdan {
		padding: var(--spacing-double) var(--spacing-double) 0;
		padding-top: calc(var(--spacing) * 6);
		.hasDivider-20M1le {
			border: none;
		}
		.inner--CkhGx {
			max-width: 600px;
			width: 100%;
			&::before {
				content: '';
				width: 90%;
				height: 200px;
				background: var(--text-muted);
				mask: url(assets.$illustration_3) center/contain no-repeat;
				margin-bottom: var(--spacing);
			}
			.titleName-2vkJTW {
				font-size: var(--font-size-xxl);
				font-weight: var(--font-weight-light);
				line-height: 1.5;
				color: var(--text-normal);
				p:first-child {
					display: none;
				}
			}
			.subtitle-3tY4DQ {
				margin: 0;
				font-weight: var(--font-weight-normal);
				color: var(--text-normal);
				line-height: normal;
			}
			.cardWrapper-2fBdfM {
				.card-PQEqCK {
					margin: 0;
					border-radius: 0;
					background: transparent;
					border: 1px solid var(--base-border);
					border-top: none;
					padding: var(--spacing-double);
					cursor: var(--cursor);
					.icon-2ou77m {
						display: none;
					}
					.checkmark-bW9BK8 {
						background: transparent;
						padding: 0;
						color: rgb(var(--status-green));
					}
					.cardHeader-GktiNM {
						margin: 0;
						font-size: var(--font-size);
						font-weight: var(--font-weight-semibold);
						color: var(--text-normal);
					}
					&.completed-_QmSvM .cardHeader-GktiNM {
						opacity: 1;
					}
				}
				&:nth-child(2) .card-PQEqCK {
					border-top: 1px solid var(--base-border);
					border-radius: 3px 3px 0 0;
					margin-top: var(--spacing-double);
				}
				&:last-child .card-PQEqCK {
					border-radius: 0 0 3px 3px;
				}
			}
		}
	}
}
