Как решить проблему с дизайном, если сообщения выходят за пределы поля, нужно, чтобы за пределы не выходили.

что исправить код chat.php

<?php
// chat.php
// Кодування UTF-8

header('Content-Type: text/html; charset=utf-8');

session_start();
require_once 'db.php';

if (!isset($_GET['expert_id'])) {
header('Location: index.php');
exit;
}

$expertId = (int)$_GET['expert_id'];
$expert = getExpertById($expertId);

if (!$expert) {
header('Location: index.php');
exit;
}

// Ініціалізація чату
$chatId = initChat($expertId);
$messages = getChatMessages($chatId);
?>

<!DOCTYPE html>

<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Чат з <?= htmlspecialchars($expert['name']) ?> - Світ Екстрасенсів</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/chat.css">
<script src="js/jquery.min.js"></script>
<script src="js/chat.js"></script>
</head>
<body>
<div class="chat-header">
<img src="uploads/<?= htmlspecialchars($expert['photo']) ?>" alt="<?= htmlspecialchars($expert['name']) ?>" class="chat-expert-photo">
<h2><?= htmlspecialchars($expert['name']) ?></h2>
<!-- Кнопка керування звуком -->
<div class="sound-toggle">
<img src="images/sound-on.png" alt="Звук увімкнено" id="sound-icon">
</div>
</div>

<div class="chat-messages" id="chat-messages" data-chat-id="<?= $chatId ?>">
    <!-- Повідомлення будуть оновлюватися AJAX-ом -->
</div>

<div class="chat-input">
    <form id="chat-form" enctype="multipart/form-data">
        <input type="hidden" name="chat_id" value="<?= $chatId ?>">
        <label for="attachment" class="attachment-label">
            📎
            <input type="file" name="attachment" id="attachment" style="display: none;">
        </label>
        <textarea name="message" id="message" placeholder="Введіть ваше повідомлення..." required></textarea>
        <button type="submit">Надіслати</button>
    </form>
</div>
content_copy
Use code with caution.
</body>
</html>


код chat.css

/* css/chat.css /
/ Кодування UTF-8 */

body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #0e0e0e;
color: #fff;
}

.chat-header {
display: flex;
align-items: center;
justify-content: space-between; /* Додаємо, щоб розташувати елементи по боках */
padding: 10px;
background-color: #1e1e1e;
flex-shrink: 0;
}
.chat-header img {
border-radius: 50%;
width: 50px;
height: 50px;
}

.chat-header h2 {
margin-left: 10px;
flex-grow: 1; /* Займає доступний простір між фото та кнопкою звуку */
}

/* Стилі для кнопки керування звуком */
.sound-toggle {
cursor: pointer;
}

.sound-toggle img {
width: 24px;
height: 24px;
}

.chat-messages {
padding: 20px;
height: calc(100vh - 160px);
overflow-y: auto;
background-color: #0e0e0e;
}

.message {
display: flex;
margin-bottom: 20px;
}

.expert-message {
flex-direction: row;
}

.user-message {
flex-direction: row-reverse;
}

.message img {
border-radius: 50%;
width: 30px;
height: 30px;
}

.message-content {
background-color: #1e1e1e;
padding: 10px;
border-radius: 10px;
max-width: 70%;
margin: 0 10px;
}

.message-content p {
margin: 0;
}

.chat-input {
position: fixed;
bottom: 0;
width: 100%;
background-color: #1e1e1e;
padding: 10px;
}

.chat-input form {
display: flex;
align-items: center;
}

.chat-input textarea {
width: 100%;
height: 50px;
resize: none;
border: none;
padding: 10px;
margin-left: 10px;
border-radius: 10px;
background-color: #2e2e2e;
color: #fff;
}

.chat-input button {
background-color: #6a82fb;
border: none;
padding: 10px 20px;
margin-left: 10px;
color: #fff;
border-radius: 5px;
cursor: pointer;
}

.chat-input button:hover {
background-color: #5a72eb;
}

.attachment-label {
cursor: pointer;
font-size: 24px;
color: #6a82fb;
}

.attachment-label input {
display: none;
}

@media (max-width: 768px) {
.chat-messages {
padding: 10px;
}

.message-content {
    max-width: 80%;
}
content_copy
Use code with caution.

}