You are a ui/ux app developer with 15 years experence, I need this design to have a more flat, mimimalistic, modern look. Less like a email and more like a 
chat app, but isn't a chat app.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Art Gallery Messaging</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <style>
        body {
            background-color: #fdfdfd;
            font-family: 'Georgia', serif;
            color: #333;
        }
        .header {
            background-color: #34495e;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        .message-card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
            padding: 15px;
        }
        .message-card h5 {
            margin-bottom: 10px;
            cursor: pointer; /* Indicates expandable content */
            display: flex;
            justify-content: space-between; /* Aligns the title and icon */
            align-items: center; /* Centers the title and icon vertically */
        }
        .message-card h5:hover {
            background-color: #f1f1f1; /* Highlight on hover */
        }
        .reply-box {
            margin-top: 15px;
            display: none; /* Hide reply input initially */
        }
        .btn {
            background-color: #2980b9;
            border: none;
        }
        .btn:hover {
            background-color: #3498db;
        }
        .new-message {
            background-color: #f39c12;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            margin: 20px 0;
        }
        .aside {
            background-color: #f8f9fa;
            padding: 15px;
            border-right: 1px solid #ddd;
        }
        .aside h6 {
            margin-bottom: 10px;
        }
        @media (max-width: 768px) {
            .header, .message-card {
                padding: 10px; /* Adjust padding for mobile */
            }
            .aside {
                border-right: none; /* Remove border for mobile */
                border-bottom: 1px solid #ddd; /* Add border at the bottom */
            }
        }
    </style>
</head>
<body>

<div class="header">
    <h1>Art Gallery</h1>
    <div class="new-message">You have 2 new messages!</div> <!-- Notification of new messages -->
</div>

<div class="container mt-4">
    <div class="row">
        <aside class="col-md-3 aside">
            <h6>Filters</h6>
            <div>
                <label for="filter">Select Filter:</label>
                <select id="filter" class="form-select">
                    <option>All Messages</option>
                    <option>Unread</option>
                    <option>Read</option>
                </select>
            </div>
            <h6 class="mt-4">Sorting</h6>
            <div>
                <label for="sort">Sort By:</label>
                <select id="sort" class="form-select">
                    <option>Date</option>
                    <option>Sender</option>
                    <option>Subject</option>
                </select>
            </div>
            <h6 class="mt-4">Summary</h6>
            <p>Unread Messages: <strong>1</strong></p>
            <p>Total Messages: <strong>5</strong></p>
        </aside>

        <main class="col-md-9">
            <h2>Messages</h2>
            <div class="mb-4">
                <input type="text" class="form-control" placeholder="Search messages...">
            </div>

            <div class="message-list">
                <div class="message-card">
                    <h5 class="message-toggle" data-bs-toggle="collapse" data-bs-target="#message1" aria-expanded="false" aria-controls="message1">
                        Inquiry from John Doe
                        <i class="bi bi-caret-down-fill"></i>  <!-- Downward caret icon -->
                    </h5>
                    <div class="collapse message-content" id="message1">
                        <p>Subject: Interest in Artwork 123</p>
                        <p>Last updated: 3 days ago</p>
                        <p>Full message content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <div class="reply-box">
                            <input type="text" class="form-control" placeholder="Type your reply here...">
                            <button type="button" class="btn btn-primary btn-sm mt-2">Send</button>
                        </div>
                        <button type="button" class="btn btn-secondary btn-sm mt-2" onclick="toggleReply(this)">Reply</button>
                    </div>
                </div>
                
                <div class="message-card">
                    <h5 class="message-toggle" data-bs-toggle="collapse" data-bs-target="#message2" aria-expanded="false" aria-controls="message2">
                        Order Support from Sarah Smith
                        <i class="bi bi-caret-down-fill"></i> <!-- Downward caret icon -->
                    </h5>
                    <div class="collapse message-content" id="message2">
                        <p>Subject: Order #456 Support</p>
                        <p>Last updated: 1 day ago</p>
                        <p>Full message content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <div class="reply-box">
                            <input type="text" class="form-control" placeholder="Type your reply here...">
                            <button type="button" class="btn btn-primary btn-sm mt-2">Send</button>
                        </div>
                        <button type="button" class="btn btn-secondary btn-sm mt-2" onclick="toggleReply(this)">Reply</button>
                    </div>
                </div>

                <!-- Additional messages can be added in a similar format -->
            </div>
        </main>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<script>
    function toggleReply(button) {
        $(button).siblings('.reply-box').slideToggle(); // Toggle reply box visibility
    }
</script>

</body>
</html>