update chat

assets/css/stylesheet.css

@@ -578,7 +578,6 @@ h1, h2, h3, h4, h5, h6 {
 
 .player-off{
     height: 80vh;
-
     display: flex;
     align-items: center;
     justify-content: center;
@@ -590,10 +589,9 @@ h1, h2, h3, h4, h5, h6 {
 
 .player-container {
     position: relative;
-    /* width: 100%;
-    height: 100%; */
-
     flex-grow: 10;
+    /* Em telas grandes, pode ser interessante adicionar margem para separar do chat */
+    /* margin: 15px; */
 }
 
 .player {
@@ -608,14 +606,13 @@ h1, h2, h3, h4, h5, h6 {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.6); /* Cor de fundo semitransparente */
+    background-color: rgba(0, 0, 0, 0.6); /* Fundo semitransparente */
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 15px;
-    z-index: 10; /* Garante que a mensagem "Offline" apareça em cima do vídeo */
-    
+    z-index: 10; /* Garante que a mensagem "Offline" fique acima do player */
 }
 
 .player-info {
@@ -623,7 +620,7 @@ h1, h2, h3, h4, h5, h6 {
     background-color: #0b1a33;
 }
 
-/* Estilos específicos para o player, se necessário */
+/* Estilos específicos para o player */
 video::-webkit-media-controls {
     background-color: hsl(0, 0%, 14%);
 }
@@ -632,22 +629,24 @@ video::-webkit-media-controls-play-button {
     color: #fff;
 }
 
+/* Container que engloba o player e o chat */
 .live-container{
     display: flex;
-    flex-direction: row;
-
+    flex-direction: column; /* Padrão: empilha o player e o chat (telas pequenas) */
     height: 70vh;
+	padding: 15px;
     width: 100%;
 }
 
+/* Estilos do chat */
 .chat {
-display: flex;
-flex-direction: column;
-flex-grow: 1;
-margin: 15px;
-background-color: var(--background-color);
-border-radius: 10px;
-color: #fff;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin: 15px;
+    background-color: var(--background-color);
+    border-radius: 10px;
+    color: #fff;
 }
 
 .chat-container {
@@ -682,6 +681,7 @@ color: #fff;
 .chat-line p {
     margin: 0;
     color: #fff;
+	overflow-wrap: break-word;
 }
 
 .username {
@@ -714,6 +714,45 @@ color: #fff;
     background-color: #243b65;
 }
 
+/* ===== Regras responsivas ===== */
+
+/* Para telas grandes: layout em linha com chat à direita */
+@media (min-width: 768px) {
+    .live-container {
+        flex-direction: row; /* Player e chat lado a lado */
+        align-items: stretch; /* Garante que ambos tenham a mesma altura */
+    }
+    
+    .player-container {
+        flex-grow: 1;
+        margin: 15px; /* Opcional: ajuste de espaçamento */
+    }
+    
+    .chat {
+        width: 400px; /* Largura fixa, semelhante à do chat da Twitch */
+        height: 95%; /* Alinha a altura do chat à do contêiner (e do player) */
+        margin: 15px;
+    }
+}
+
+/* Para telas pequenas: layout em coluna com chat abaixo do player */
+@media (max-width: 767px) {
+    .live-container {
+        flex-direction: column;
+		height: auto;
+    }
+    
+    .player-container, .chat {
+        width: 100%;
+        margin: 15px 0; /* Espaçamento vertical */
+    }
+    
+    .chat {
+        height: 500px; /* Altura ajustada para um tamanho adequado */
+    }
+}
+
+
 .page-aula{
     font-family: var(--font-family);
 }
@@ -780,4 +819,4 @@ color: #fff;
 }
 .content-aula a:hover {
     border-bottom-color: #007bff; /* Mostra a borda inferior ao passar o mouse */
-}
+}