body {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
	width :100vw;
	margin: 0;
	padding: 0;
	background-color: #ddd;
	overflow-y: hidden;
}

.inner {
	display: flex;
	flex-direction: column;
	width: 700px;
	height: 800px;
	background-color: #eefaf3;
	position: relative;
    max-height: 70vh;
    @media screen and (max-width: 400px) {
        width: 90%;
        left: 0;
        right: 0;
        margin: auto;
    }
}
#chats {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
#suggestions {
    position: relative;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 10px 0;
    width: 100%;
}
#suggestions > div {
    padding: .2rem 0.5em;
    background-color: #def;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: .8rem;
    width: 100%;
    text-overflow: ellipsis;
}
#suggestions > div:hover {
	background-color: rgb(175, 198, 221);
}
.msg {
	margin: 0.5em;
	border-radius: 5px;
	max-width: 60%;
}
.msg.to {
	align-self: flex-start;
	background-color: #ffe9b0;
	display: flex;
	flex-direction: column;
}
.msg.from {
	align-self: flex-end;
	background-color: #ddf;
}
.msg > .content {
    padding: 0.4rem .8rem;
    border: none;
    font-size: .9rem;
}
.msg > .link {
	padding: 0.5em;
	border-top: solid 1px #0006;
	background-color: white;
	text-decoration: solid underline;
}

.creator {
	display: flex;
	flex-direction: row;
    margin: 10px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 1px 1px 10px #d7e1db;
    padding: .5rem .5rem .5rem 1.1rem;
    input {
        border: none !important;
        background: transparent;
        outline: none !important;
    }
}

#msgInp {
	flex: 1;
	font-size: .9rem;
	padding: 0.4em;
}
#msgSend {
	font-size: .8rem;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: linear-gradient(28deg, #07794b, #00b16a);
    display: flex;
    align-items: center;
    justify-content: center;
}

#ateamBot {
    position: fixed;
    z-index: 99;
    right: 20px;
    bottom: 80px;
    background-color: #f4f9ff;
    border-radius: 12px;
    box-shadow: 0px 4px 15px rgba(2, 2, 2, 0.1);
    overflow: hidden;
    .header {
        display: flex;
        flex-direction: column;
        padding: 1rem 2rem 1rem 1rem;
        background: linear-gradient(28deg, #07794b, #00b16a);
        color: #fff;
        .title {
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 6px;
        }
        p {
            font-size: 12px;
            opacity: .8;
            line-height: 1.5;
        }
    }
}

.bot-head {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99;
    width: 70px;
    height: 50px;
    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
#chat-bot-msg-loader {
	display: flex;
	flex-direction: row;
	padding: 15px 10px;
	gap: 10px;
	div {
		height: 10px;
		width: 10px;
	}
}