body {
            margin: 0;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            background: #36393f;
            color: #fff;
        }
        .flex-container {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 200px;
            background: #2f3136;
            padding: 20px;
            box-sizing: border-box;
        }
        .sidebar .logo {
            font-size: 1.8em;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }
        .channels {
            list-style: none;
            padding: 0;
        }
        .channels li {
            padding: 8px;
            margin-bottom: 5px;
            background: #202225;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
        }
        .channels li:hover {
            background: #00b0f4;
            color: #fff;
        }
        .chat-area {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .chat-header {
            padding: 20px;
            background: #2f3136;
            border-bottom: 1px solid #202225;
        }
        .profile-avatar-button {
    background: #2f3136;
    border: 1px solid #202225;
    border-radius: 50%; /* circular button */
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    transition: border 0.2s ease, background 0.2s ease;
}

.profile-avatar-button:hover {
    border-color: #00b0f4;
    background: #40444b;
}

        .chat-content {
            flex-grow: 1;
            padding: 20px;
            overflow-y: auto;
            background: #2e3338;
        }
        .message {
            margin-bottom: 15px;
            background: #40444b;
            border-radius: 4px;
            padding: 10px;
        }
        .username {
            font-weight: bold;
            margin-right: 10px;
        }
        .chat-input-bar {
            padding: 20px;
            background: #40444b;
            border-top: 1px solid #202225;
        }
        .chat-input-bar input {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 4px;
            background: #2f3136;
            color: #fff;
        }
        .mute-button,
.clear-chat {
    background: #2f3136;
    border: 1px solid #202225;
    border-radius: 4px;
    padding: 10px 15px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}
.change-user {
    background: #2f3136;
    border: 1px solid #202225;
    border-radius: 4px;
    padding: 10px 15px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mute-button:hover,
.clear-chat:hover {
    background: #00b0f4;
    border-color: #0091cc;
}