this is part of my html code. i want use for persian text so must rtl but i can set to rtl.
<style>
        body, html {
            height: 100%;
        }

        .main {
            flex-grow: 1;
            overflow-y: auto;
        }

        .messages-box {
            flex: 1;
            overflow-y: auto;
        }

        .messages-list {
            padding-left: 0;
        }

        .message {
            margin-bottom: 15px;
            list-style: none;
            border-radius: 5px;
            box-shadow: 20px 20px 100px 5px grey;
            --r: 25px; /* the radius */
            --t: 30px; /* the size of the tail */

            padding: calc(2 * var(--r) / 3);
            -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100%/calc(100% - var(--r)) var(--t) no-repeat,
            conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
            radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0/var(--r) var(--r) space padding-box;
        {#background: linear-gradient(135deg, #00A000, #1384C5) border-box;#}{#color: #fff;#}
        }

        .message-text {
            padding: 10px;
            border-radius: 5px;
            direction: rtl;
        }

        .sent {
            background-color: #34c759;
            align-self: flex-end;
            direction: rtl;
        {#    background: linear-gradient(135deg, #00cc00, #2f6ee0) border-box;#}
        }

        .received {
            background-color: #f1f0f0;
            align-self: flex-start;
            direction: rtl;
        {#    background: linear-gradient(135deg, #2f6ee0, #00cc00) border-box;#}
        }

        .message-form {
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
            background-color: #f8f9fa;
        }

        .message-input {
            flex: 1;
            border-radius: 5px;
            border-right: none;
        }

        .btn-send {
            border-radius: 5px;
        }

        .chat-container {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .left {
            --_d: 0%;
            border-left: var(--t) solid #0000;
            margin-right: var(--t);
            place-self: start;
        }

        .right {
            --_d: 100%;
            border-right: var(--t) solid #0000;
            margin-left: var(--t);
            place-self: end;
        }

        .overlay {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.9);
            overflow-x: hidden;
            transition: 0.5s;
        }

        .overlay-content {
            position: relative;
            top: 25%;
            width: 100%;
            text-align: center;
            margin-top: 30px;
            overflow-y: auto;
        }

        .overlay a {
            padding: 8px;
            text-decoration: none;
            font-size: 36px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }

        .overlay a:hover, .overlay a:focus, .overlay b:hover, .overlay b:focus {
            color: #f1f1f1;
        }

        .overlay .closebtn {
            position: absolute;
            top: 20px;
            right: 45px;
            font-size: 60px;
        }

        @media screen and (max-height: 450px) {
            .overlay a {
                font-size: 20px
            }

            .overlay .closebtn {
                font-size: 40px;
                top: 15px;
                right: 35px;
            }
        }
    </style>
{% endblock %}


{% block content %}
    <div class="chat-container">
        <div class="card flex-grow-1  main">
            <div class="card-header bg-primary text-white"><span style="font-size:30px;cursor:pointer"
                                                                 onclick="openNav()">&#9776; menu</span></div>
            <div id="myNav" class="overlay">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                <div class="overlay-content">
                    <a href="{% url '/' %}">خانه</a>
                    {% if user.is_authenticated %}
                        <b>{{ user.name }}</b>
                        <a href="/logout/">خروج</a>
                    {% else %}
                        <div class="card-header bg-primary text-white">
                        <a style="color: yellow" href="/login/">Login</a>
                        {#                            <a style="color: yellow;" href="register">Register</a>#}
                    {% endif %}
                    {% if history %}
                        <a href="/chat/">چت</a>
                    {% endif %}
                    {% for history in history_list %}
                        <a class="h6" href="/chat/{{ history.created_at__date }}/">{{ history.persian_date }}</a>
                    {% endfor %}

                    <a href="#">About</a>
                    <a href="#">Services</a>
                    <a href="#">Clients</a>
                    <a href="#">Contact</a>
                    </div>
                </div>
                {#            <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>#}


                <div class="card-body messages-box">

                    <ul class="list-unstyled messages-list">

                        {% if ai_notification is True and history is False %}
                            <li class="message received">
                                <div class="message-text">
                                    <div class="message-sender">
                                        <b>AI Rice</b>
                                    </div>
                                    <div class="message-content" id="notification">
                                        {{ daily_checkup_messages }}
                                    </div>
                                </div>
                            </li>
                        {% elif daily_checkup_messages is not False %}
                            <li class="message received left">
                                <div class="message-text">
                                    <div class="message-sender">
                                        <b>AI Rice</b>
                                    </div>
                                    <div class="message-content">
                                        {{ daily_checkup_messages.ai_message | safe }}
                                    </div>
                                </div>
                            </li>

                            <li class="message sent right">
                                <div class="message-text">
                                    <div class="message-sender">
                                        <b>You</b>
                                    </div>
                                    <div class="message-content">
                                        {{ daily_checkup_messages.user_response | safe }}
                                    </div>
                                </div>
                            </li>

                            <li class="message received left">
                                <div class="message-text">
                                    <div class="message-sender">
                                        <b>AI Rice</b>
                                    </div>
                                    <div class="message-content">
                                        {{ daily_checkup_messages.ai_response | safe }}
                                    </div>
                                </div>
                            </li>
                        {% endif %}

                        {% for chat in chats %}
                            {% if chat.farmer == request.user %}
                                {% if chat.message %}
                                    <li class="message sent right">
                                        <div class="message-text">
                                            <div class="message-sender">
                                                <b>You</b>
                                            </div>
                                            <div class="message-content">
                                                {{ chat.message | safe }}
                                            </div>
                                        </div>
                                    </li>
                                {% endif %}

                                <li class="message received left">
                                    <div class="message-text">
                                        <div class="message-sender">
                                            <b>AI Rice</b>
                                        </div>
                                        <div class="message-content">
                                            {{ chat.response | safe }}
                                        </div>
                                    </div>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                <br><br>
                <br><br>
            </div>
            {% if history is not True %}
                <form class="message-form">
                    {% csrf_token %}
                    <div class="input-group">
                        <input type="text" class="form-control message-input" placeholder="Type your message...">
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-primary btn-send">Send</button>
                        </div>
                    </div>
                </form>
            {% else %}
            {% endif %}
        </div>