@media screen and (max-width: 768px) {
    .telefono {
        max-width: 90%;
    }
}
@media screen and (min-width: 768px) {
    .telefono {
        max-width: 60%;
    }
}
@media screen and (min-width: 992px) {
    .telefono {
        max-width: 50%;
    }
}
@media screen and (min-width: 1200px) {
    .telefono {
        max-width: 45%;
    }
}

@media screen and (min-width: 1400px) {
    .telefono {
        max-width: 27%;
    }
}



html {
	scrollbar-width: none;
	font-family: Arial, Helvetica, sans-serif;
}
body {
	margin: 0;
	background-color: #CCC;
}

.telefono {
	height: 96svh;
	min-height: 730px;
	box-sizing: border-box;
	margin: 16px auto;
	border: 7px solid #333;
	border-radius: 20px;
	color: #DDD;
	background-image: url(img/background.jpg);	/* Background della chat */
}

.barra {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;	/* Nome	| Ora:min:sec | day/month/year */
	align-content: center;
	justify-items: center;
	height: 3%;
	box-sizing: border-box;
	background-color: #04463c;
	color: white;
	border-radius: 11px 11px 0 0;
}
.barra p {
	margin: 0;
	font-size: small;
	letter-spacing: 1.5px;
}


.header {
	display: grid;
	grid-template-columns: 1fr 5fr 1fr 1fr;		/* pfp | Nome gruppo | img | img */
	gap: 15px;
	padding: 0 10px;
	align-items: center;
	height: 10%;
	box-sizing: border-box;
	background-color: #06534a;
}
.header h3 {
	margin: 0;
}


.chat {
	height: 78.5%;
	box-sizing: border-box;
	display: grid;
	align-items: end;
	grid-template-rows: 1fr;
	color: black;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scroll-behavior: smooth;
	scrollbar-color: #0a8e7f rgba(0, 0, 0, 0);
	color: white;
	transition: ease 1s;
}
/* Messaggio del destinatore (messaggi ricevuti) */
.msgD {
	width: 60%;
	height: fit-content;
	background-color: #444;
	margin: 15px 10px;
	border-radius: 0 15px 15px;
	overflow-wrap: break-word;
}
.msgD p, h4 {
	margin: 10px;
}

/* Messaggio del mittente (messaggi inviati) */
.msgM {
	width: 60%;
	height: fit-content;
	background-color: #075e54;
	margin: 15px 10px 10px 40%;
	border-radius: 15px 0 15px 15px;
}
.msgM p {
	margin: 10px;
}
.msgD#lastChild {
	animation: .3s inviatoD 1;
}
.msgM#lastChild {
	animation: .3s inviatoM 1;
}


.footer {
	display: grid;
	grid-template-columns: 5fr 1fr;
	gap: 10px;
	justify-items: center;
	align-items: center;
	height: 8.5%;
	border-radius: 0 0 13px 13px;
	flex-wrap: nowrap;
}
.msg {
	width: 80%;
	margin: 12px 15px;
	padding: 15px 20px;
	background-color: #444;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	border-radius: 10px;
	cursor: text;
}
/* Bottone per l'invio dei messaggi */
.footer img {
	width: 50px;
	transition: ease 0.3s;
	cursor: pointer;
	user-select: none;
	-webkit-user-drag: none;
}
.footer img:hover {
	width: 60px;
	filter: drop-shadow(8px 8px 3px #555);
}


@keyframes inviatoM {
	from { opacity: 0; transform: translateX(150px); }
	to { opacity: 1; }
}
@keyframes inviatoD {
	from { opacity: 0; transform: translateX(-150px); }
	to { opacity: 1; }
}